syleemomo의 IT 블로그 syleemomo의 IT 블로그

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; */..