아침부터 저녁까지 - JavaScript를 사용하여 대화식 팔레트 만들기
26208 단어 tutorialwebdevbeginnersjavascript
이 강좌에서는 다음 작업을 수행하는 방법을 학습합니다.
HTML 및 CSS에서 요소 설정
HTML 코드
우리가 자바스크립트로 상호작용을 우리의 미니 도시에 융합시키기 전에 먼저 HTML 코드에 추가해서 이 요소들을 설정해야 한다.
낮에서 야간 팔레트로 전환하기 위해서, "day"와 "night"라고 표시된 두 개의 클릭 가능한 단추를 만들 것입니다. 이것은 우리가 필요한 설정을 선택할 수 있도록 합니다.이를 위해
<button></button> 요소의 각 버튼에 body 태그 세트를 추가합니다....
<!--HTML-->
<body>
<button>day</button>
<button>night</button>
...
id 속성을 분배해야 한다. 이것은 CSS에서 이 요소들을 양식화하고 자바스크립트에서 조작할 수 있도록 한다.우리의 미니 도시를 위해 달이 될 수 있는 태양을 만들기 위해 우리는
<div>원소와'태양'이라는 id원소를 추가할 것이다.하늘의 색을 변경하려면 background-color 요소의 body 속성에 접근해야 합니다. 따라서 "body"라는 id을 설정합니다.body 요소에 다음 코드 행을 추가합니다....
<!--HTML-->
<body>
....
<div id = "sun"></div>
<body id = "body"></body>
...
...
<!--HTML-->
<body>
<button>day</button>
<button>night</button>
<div id = "sun"></div>
<body id = "body"></body>
...
CSS 코드: 태양 및 달 요소
이제 HTML에 요소가 설정되어 CSS에서 요소를 조정하고 스타일링할 수 있습니다.
Sun 요소의 경우 CSS 코드에
#id 선택기를 추가합니다....
<style TYPE="text/css">
...
#sun {
}
</style>
...
id의 요소를 열거합니다. 따라서 이 선택기에 추가된 모든 내용은 HTML 코드에서 설명한 sun 요소에 영향을 줍니다.#sun 선택기에 대해 우리는 먼저 다음과 같은 속성을 사용하여 태양의 모양과 색을 만들 것입니다....
#sun {
width: 115px;
height: 115px;
border-radius: 50%;
background: radial-gradient(#FFF89E, #FFDE45);
}
...
width과 height 속성이 같은 길이를 가지기 때문에 생성되는 기본 모양은 정사각형입니다.border-radius 속성은 태양 각도의 반지름을 정의합니다. 이 속성을 50%로 설정하면 완벽한 원을 만들 수 있습니다.그리고 background 속성에서 우리는 radial-gradient 함수를 사용하여 태양의 색깔을 확정할 수 있습니다. 이 함수는 색의 점차적인 변화를 생성합니다. 첫 번째 성명된 색깔(담황색)은 태양의 중심 색깔이고, 두 번째 색깔(밝은 따뜻한 노란색)은 태양의 가장자리 색깔입니다.그런 다음 다음 다음 속성을 추가하여 태양의 위치를 확인합니다.
...
#sun {
...
position: absolute;
left: 350px;
bottom: 75px;
}
...
absolute 속성에 position 값을 설명할 것입니다. 이 속성은 요소가 웹 페이지의 문서체에 따라 이동할 수 있도록 합니다.left 속성은 태양을 한쪽으로 밀어냄으로써 원소의 수평 위치에 영향을 주고 bottom 속성은 태양을 위로 끌어올림으로써 원소의 수직 위치에 영향을 준다.이것이 바로 우리의 태양이 우리의 미니 도시에 있는 모습이다.
주야 변화를 준비하기 위해
sun 요소의 같은 코드 템플릿을 사용하여 달 요소를 만들 수 있습니다....
#sun {
...
}
#moon {
position: absolute;
left: 350px;
bottom: 75px;
width: 115px;
height: 115px;
border-radius: 50%;
background: radial-gradient(#D3D3D3, #555AA6);
}
...
#moon이라는 새로운 선택기를 사용하고 radial-gradient 함수에서 색을 변경할 것이다. - 달 중심의 색은 옅은 회색이고 가장자리의 색은 짙은 회색과 보라색이다.이 때, 우리는 moon 요소를 볼 수 없습니다. 왜냐하면 우리는 HTML 코드에서
<div> 요소를 설명하지 않았기 때문입니다.우리는 이 점을 설명할 필요가 없다. 왜냐하면 이 두 선택기 사이만 왔다 갔다 하기 때문이다. 잠시 후에 우리는 이 두 선택기를 자바스크립트로 작성할 것이다.이것은 우리가 완성한
#sun 및 #moon 요소의 외관입니다....
#sun {
position: absolute;
left: 350px;
bottom: 75px;
background: radial-gradient(#FFF89E, #FFDE45);
width: 115px;
height: 115px;
border-radius: 50%;
}
#moon {
position: absolute;
left: 350px;
bottom: 75px;
width: 115px;
height: 115px;
border-radius: 50%;
background: radial-gradient(#D3D3D3, #555AA6);
}
...
CSS 코드: 주간 및 야간 버튼
디자인 단추의 속성을 시작하기 위해 코드에
button 선택기를 추가합니다....
<style TYPE="text/css">
...
button {
}
</style>
...
<button> 요소, 즉 day 및 night 단추에 액세스합니다.우선 다음 속성을 사용하여 버튼의 색상과 위치를 조정합니다.
...
button {
position: relative;
top: -40px;
right: -360px;
background-color: #FFFFFF;
}
...
position 속성을 relative으로 설정하면 top과 right 속성(우리가 입력한 값으로 단추를 태양 아래 구역으로 이동)을 사용하여 정상적인 위치(즉 웹 페이지의 중심)에서 단추의 위치를 조정할 수 있습니다.또한 background-color 속성을 사용하여 버튼의 색상을 흰색으로 설정합니다.그리고 다음 속성을 추가하여 단추에 테두리를 추가합니다.
...
button {
...
border-style: solid;
border-width: 2px;
border-color: #FF8080;
border-radius: 10px;
}
...
border-style 속성을 설정해야 합니다.위에서 단추의 테두리를 solid으로 설정하면 순수한 색 테두리가 생성됩니다.이 CSS Border Styles list에서 다양한 종류의 경계를 마음대로 시도할 수 있습니다.다른 경계 속성에 대해 border-width과 border-color은 각각 경계의 두께와 색깔을 조정하고, border-radius은 경계 각의 원도를 조정한다. 이 특정 속성은 최대 네 개의 값을 허용하며, 각 값은 요소의 각 각에 접근할 수 있다.마지막으로 다음 두 가지 속성 변경 단추 텍스트의 글꼴을 사용합니다.
...
button {
...
font-size: 15px;
font-family: "Consolas";
}
...
font-size 속성은 버튼 글꼴의 크기를 조정합니다.또한 CSS font list의 글꼴을 테스트하여 font-family 속성으로 설정하여 버튼의 글꼴을 사용자 정의할 수 있습니다.단추의 스타일을 더 설정하기 위해 font-style 및 font-weight과 같은 다른 속성을 추가할 수 있습니다.이것은 우리가 완성한
button 요소의 외관이다....
button {
position: relative;
top: -40px;
right: -360px;
background-color: #FFFFFF;
border-style: solid;
border-width: 2px;
border-color: #FF8080;
border-radius: 10px;
font-size: 15px;
font-family: "Consolas";
}
...
JavaScript와의 상호 작용 추가
JavaScript 코드
HTML 파일에서 JavaScript 인코딩을 사용할 수 있도록 HTML 코드의
<script></script> 요소에 body 태그 세트를 삽입합니다....
<!--HTML-->
<body>
<button>day</button>
<button>night</button>
<div id = "sun"></div>
<body id = "body"></body>
<script>
</script>
...
sun을 호출하여 각각 body과 id 원소를 검색해야 한다.이를 위해
var 또는 변수-circle은 sun원소, sky은 body원소, 그리고 document방법은 getElementById()을 사용하여 각 원소에 접근합니다....
<script>
var circle = document.getElementById("sun");
var sky = document.getElementById("body");
</script>
...
moon 원소를 세웠으니, 우리도 우리가 원하는 밤하늘색을 선택해야 한다.이를 위해 우리는
colors이라는 수조를 만들 것입니다. 이 수조는 낮 하늘과 밤 하늘의 색을 포함합니다....
<script>
var circle = document.getElementById("sun");
var sky = document.getElementById("body");
var colors = ["#D5F3FE","#343F8A"];
</script>
...
현재, 주간과 야간 팔레트를 설정하기 위해서, 우리는 두 가지 함수를 설정할 것이다. 각각
day과 night으로 표시할 것이다....
<script>
...
function day() {
}
function night() {
}
</script>
...
낮에는 태양을 표시하고 밤에는 달을 표시하기 위해
#sun 변수에 #moon 방법을 사용하여 setAttribute()과 circle 원소에서 정보를 검색합니다.두 가지 필수 매개 변수에 대해 우리는 이 변수의 id을 각각 낮과 밤 팔레트의 sun과 moon 요소로 설정합니다....
function day() {
circle.setAttribute("id", "sun");
}
function night() {
circle.setAttribute("id", "moon");
}
...
backgroundColor 변수를 통해 body 요소의 sky 속성에 접근합니다. 방법은 .style.backgroundColor을 추가하여 이 변수의 CSS 속성을 검색하고 조작하는 것입니다.그런 다음 colors 배열의 주간 및 야간 팔레트 색상으로 설정합니다(배열의 색인은 항상 숫자 0에서 시작하므로 colors[0]은 주간 색상을 나타내고 colors[1]은 야간 색상을 나타냅니다)....
function day() {
circle.setAttribute("id", "sun");
sky.style.backgroundColor = colors[0];
}
function night() {
circle.setAttribute("id", "moon");
sky.style.backgroundColor = colors[1];
}
...
...
<script>
var circle = document.getElementById("sun");
var sky = document.getElementById("body");
var colors = ["#D5F3FE","#343F8A"];
function day() {
circle.setAttribute("id", "sun");
sky.style.backgroundColor = colors[0];
}
function night() {
circle.setAttribute("id", "moon");
sky.style.backgroundColor = colors[1];
}
</script>
...
day() 이벤트를 추가하여 night()과 day 함수를 각각 night과 onclick 단추로 연결합니다....
<!--HTML-->
<body>
<button onclick = "day()">day</button>
<button onclick = "night()">night</button>
...
결론
당신의 미니 도시에 상호작용식 색채 구성 요소를 추가한 것을 축하합니다!
이 강좌에서 우리는 JavaScript로 단추를 설계하고 HTML과 CSS에서 이 요소들을 어떻게 양식화하고 링크하는지 배웠다.
버튼에 더 많은 장식 기능을 추가하거나 주야 기능에서 더 많은 작업을 수행하여 하루가 다르게 변하는 시간 사이에 더욱 독특한 전환을 만들 수 있습니다.비록 본 블로그 시리즈는 이러한 프로그래밍 도구에 대한 아주 간단한 소개일 수 있지만, 본 프로젝트가 당신의 흥미를 불러일으키거나 웹 개발과 디자인에 대한 자신감을 높일 수 있기를 바랍니다.
Reference
이 문제에 관하여(아침부터 저녁까지 - JavaScript를 사용하여 대화식 팔레트 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bitproject/from-day-to-night-creating-interactive-color-palettes-with-javascript-o3b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
