Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quod provident dignissimos veritatis rem a dolores aperiam ex. Maiores obcaecati nulla, dolor unde praesentium repellat nemo magni temporibus? Et, esse? Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nobis, provident nam delectus vel ea odit, veniam ullam similique tenetur, magni dolore commodi possimus aliqu..

index.html 파일을 위와 같이 작성하자! body{ margin: 0; padding: 0; background-color: #0e1111; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .window{ width: 500px; height: 300px; background-color: wheat; transition: .5s; } .window:hover{ width: 100vw; height: 100%; } style.css 파일을 위와 같이 작성하자! 핵심은 슬라이드 이미지를 감싸고 있는 컨테이너인 body 요소에 플럭스박스를 적용하고 justify-content 와 alig..

연습과제 1 1 연습과제 2 let i = 0 i++ if(i < 5) alert(i) i++ if(i < 5) alert(i) i++ if(i < 5) alert(i) i++ if(i < 5) alert(i) i++ if(i < 5) alert(i) 연습과제 3 let i = 0 if(i < 5){ i++ alert(i) } if(i < 5){ i++ alert(i) } if(i < 5){ i++ alert(i) } if(i < 5){ i++ alert(i) } if(i < 5){ i++ alert(i) } 연습과제 4 let i = 0 if(i < 5){ alert( i ) i++ } if(i < 5){ alert( i ) i++ } if(i < 5){ alert( i ) i++ } if(i < 5)..

* while 반복문 while (condition) { // 코드 // '반복문 본문(body)'이라 불림 } 조건(condition) 이 truthy 이면 반복문 본문의 코드가 실행된다. 반복문 본문이 한번 실행되는 것을 반복(iternation)이라고 한다. let i = 0; while (i < 3) { // 0, 1, 2가 출력됩니다. alert( i ); i++; } 해당 반복문은 i 값을 1씩 증가시켜가면서 i < 3 의 조건을 만족하는 동안 i 값을 경고창에 출력한다. 해당 반복문은 세번의 이터레이션을 수행한다. let i = 3; while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문이 멈춥니다. alert( i ); i--; } 반복문 조건에는 모든 종류의 표현식이..

연습과제 1 let score = +prompt('평점을 입력해주세요!', 0) if(score === 0){ console.log('☆☆☆☆☆') }else if(score === 1){ console.log('★☆☆☆☆') }else if(score === 2){ console.log('★★☆☆☆') }else if(score === 3){ console.log('★★★☆☆') }else if(score === 4){ console.log('★★★★☆') }else if(score === 5){ console.log('★★★★★') }else{ alert('잘못된 평점입니다.') } 연습과제 2 let score = +prompt('평점을 입력해주세요!', 0) switch (score) { case..

1 body{ margin: 0; height: 100vh; } .bar{ width: 50px; background-color: aqua; animation: grow 1s linear .5s forwards; position: absolute; bottom: 0; } @keyframes grow{ from{ height: 0; } to{ height: 100%; } }

body{ margin: 0; } .bg{ width: 100%; height: 100vh; background-image: url(bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; } .circle{ width: 300px; height: 300px; border-radius: 50%; background-color: gray; position: absolute; transform: translate(-50%, -50%); border: 3px solid #333; mix-blend-mode: multiply; cursor: zoom-in; filter: blur(10px); } .gray..

실습을 위한 준비를 한다. sunblocks home sub1sub1sub1 sub2 sub3 about sub1 sub2 sub3 sub4 sub5 sub6 contact sidemenu1 sidemenu2 sidemenu3 All Rights Reserved By Sunblocks. 푸터 하단에 scroll to top 버튼을 추가한다. html, body{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 200vh; display: flex; flex-direction: column; } header, footer{ height: 70px; flex: none; } main{ flex: 1; /* background: brown; */..

* position: relative - 자신의 현재위치를 기준으로 상대적으로 배치 실습을 위하여 아래와 같이 코드를 작성한다. static relative .container{ background-color: #ccc; } .static, .relative{ width: 200px; height: 200px; } .static{ background-color: yellowgreen; } .relative{ background-color: blue; } .container{ background-color: #ccc; } .static, .relative{ width: 200px; height: 200px; } .static{ background-color: yellowgreen; } .relative{ ..

연습과제 아래 코드펜의 화면 레이아웃을 시맨틱 태그로 구성해보세요! https://codepen.io/lordjiggyx/pen/eYOReEd Mobile First Website ... codepen.io 연습과제 아래 코드펜의 카드 컴포넌트 디자인을 참고하여 유사하게 디자인해보세요! https://codepen.io/utilitybend/pen/bGvjLba Hovers and focus using the has() relational pseudo-class Hovers and focus using the has() relational pseudo-class can give a boost to a11y... codepen.io 웹사이트에서 자주 사용되는 카드 컴포넌트를 한번 디자인해보세요! 1. 카드..