연습과제 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. 카드..

연습과제 캡쳐화면에 제시된 표와 유사하게 디자인해보세요! https://kiranworkspace.com/demo/projects/code-snippets/table/user-table/ 1. 개발자 도구에서 폰트 크기나 색상을 참고해서 구현해주세요! 2. 시맨틱 태그로 전체 뼈대 구조를 잡고 시작해주세요! 3. 드롭다운 메뉴는 하실수 있으신 분만 시도해보세요!

제어장치(controller)를 조작할때 보여지는 디스플레이나 인터페이스를 사용자가 예측할 수 있도록 하는 것이다. 예를 들어 로그인 버튼을 눌러 로그인에 성공하면 홈화면으로 가겠구나라는 예상이 된다. 또는 블로그에서 글작성 완료 버튼을 클릭하면 내가 작성한 글을 보여주거나 글목록 화면으로 이동하겠구라고 예측할 수 있도록 디자인하는 것을 말한다. 에어비앤비 헤더를 보면 사용자가 숙박할 수 있는 숙소의 카테고리가 나오는데 이탈리아 사람이든 한국 사람이든 아시아 사람이든 누가 봐도 클릭하면 어떤 숙소들이 화면에 보여질지가 예상가능하다. 에어비앤비 숙소 리스트를 살펴보면 대응의 원리가 숨어있다. 예약할 숙소사진의 좌측하단에 해당 숙소를 공유하는 호스트 사진도 함께 보여준다. 이는 해당 숙소의 주인이라는 것을 ..