🟢제어문 1. 조건문 [1-1] if문 🔴조건의 범위가 있을 때 사용 if(조건식){ 조건식의 결과가 true일 때 실행할 문장; .... }​ [1-2] if ~ else문 if(조건식){ true일 경우 실행할 문장; .... }else{ false일 경우 실행할 문장; }​ 🔴[1-3] if~else if~else문 if(조건식1){ 조건식1이 true일 경우 실행할 문장; }else if(조건식2){ 조건식2이 true일 경우 실행할 문장; }else if(조건식3){ 조건식3이 true일 경우 실행할 문장; }else{ 모든 조건식의 결과가 false일 때 실행할 문장; }​ 🔴[2]switch 문 🔴조건의 값이 일치할 때 switch(변수){ case 값1: 변수와 값1이 같을 경우 실행할 문..

🟢CSS 2D 도형에 관한 처리 🟢 css animation - 요소의 현재 스타일을 다른 스타일로 변환 🟡@ketframe 시작:0% or from 과정:1% or 5% or 10% 끝: 100% or to [원리] 0% 5% 50%..... 100% 장면1 장면2 장면3 마지막 장면 🟡animation-name: 애니메이션의 이름을 설정 ✔ 🟡animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정 forwards: 애니메이션 완료시, 마지막 프레임을 유지 🟡animation-direction: 애니메이션의 지정 방향 설정 reverse: 반대 순서로 진행 alternate: 정해진 순서로 진행 했다가, 다시 반대순서로 돌아감 reverse-alternate: 반대 순서로 진행..

Z-index - HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠수 있음 - 겹치는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용 - 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치 하게 됨 z-index 1번째 div 2번째 div 3번째 div ​ Float - html 요소가 주변(수평으로 나열된)의 다른요소들과 자연스럽게 어울리도록 만들기 위해 사용 - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐 - float를 적용받은 요소들의 방향을 결졍(left,right) - 컨텐츠 크기 만큼만 영역을 설정(블록태그) - float를 적용받은 요소는 다른 요소보다 위쪽에 위치한다(배경보다 위) float2 박스-1 박스-2 박스-3 박..

마진(Margin) - 테두리(border)와 이웃하는 요소들의 간격 - 마진은 눈에 보이지 않음 - 세로 겹침 현상이 일어난다. ✔ 세로 겹침 현상 세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 더 큰 값을 선택하는 현상 박스사이징(Box-Sizing) - width, height 값에 padding border영역은 포함되지 않는다.(content 크기만!) - 만약content width가 100%로 설정되는 경우 padding이나 border 속성을 사용하면 content가 찌그러진다. - box -sizing속성값을 border-box로 설정하면, width와 height값에 padding과 border를 포함 -> 한마디로 찌그러지지 않는다. 디스플레이 - 웹페이지의 레이아웃을..

폰트 🟡font-size 텍스트 크기를 지정 속성: px % em rem (em은 default가 pc에서는 16px, 모바일 12px) (rem은 html에 설정하는 단위 / 전체 모든 단위에 16px로 설정) 🟡font-family -텍스트에 글꼴을 설정 🟡font-weight - 텍스트의 굵기를 설정 - 기본 굵기 : 400 (범위 100 ~ 900) CSS배경 🟡background-color -HTML 요소의 배경색을 설정 🟡backgroud-image - HTML 요소의 배경으로 나타낼 배경 이미지를 설정 - 배경 이미지는 기본 설정으로 반복되어 나타남 🟡backgroud-repeat - 배경 이미지를 수평이나 수직방향으로 반복하도록 설정() 🟡backgroud-position -반복되지 않는 ..

https://developer.mozilla.org/ko/