막노트 HTML/CSS

font-size 단위 px 절대크기 em 상대크기 부모요소의 글자크기 기준으로 비율 계산 rem 상대크기 html의 글자크기 기준으로 비율 계산 크기단위 디바이스 기준이므로 스크롤바가 2개 생길 수 있음 vw viewport width 1vw = v

Position 이동 기준 설정 static ✍ 문법 기본값 이동불가 right, left, top, bottom이 적용되지 않음 relative ✍ 문법 상대좌표 현재 위치 기준 좌표이동 absolute ✍

칸보다 내용이 클 경우 어떻게 처리할지 설정하는 문법부모에 적용해야 함overflow: hidden;넘치는 부분이 가려짐overflow: visible;모두 보여지는 기본값overflow: scroll;넘치지 않는 부분도 스크롤 영역이 나타남overflow: auto;

이미지 삽입 ⌨️ 문법 src : 경로 절대경로 디렉토리 : local 서비스 : server root 상대경로 현재 파일(html)을 기준으로 경로 설정 ../ 상위폴더로 이동 height, width : 높이, 너비 (px,

display block ⌨️ 문법 줄바꿈이 들어가 혼자 한 줄 차지 대표적인 inline element : , , 태그 inline ⌨️ 문법 줄바꿈 없이 한 줄에 배치됨 대표적인 inline element : , , 태그 inline-block ⌨

자손 선택자 >## 선택자 우선순위 id > 자식/후손 >클래스 > 태그 선택자 > 선택자 >### ⌨️ 문법 자식(자손)선택자 바로 아래 하나만 지정 선택자 선택자 {} >### ⌨️ 문법 후손선택자 자식 중 동일한 모든 선택자 동위(형제) 선택자 선택자+

event \- 대상 (ex. 버튼) \- 이벤트핸들러 (ex. 누른다)action \- 행동 (ex. 등이 켜진다) \- 단, event 대상과 action 대상이 같을 필요없음 \- CSS는 보통 event 대상과 action 대상이 같음형제 요소에서 같은

gradient Gradient Generator : https://www.colorzilla.com/ko/ 위 화살표 투명도 아래 색깔 정도 화살표를 아래로 내리면 삭제 가능 gradient 적용 >### ⌨️ 문법 사이트에서 원하는 gradient css 코

media 속성으로 screen, print, all이 있음그러나 screen으로 모두 사용width가 1200px보다 큰 경우 작성된 스타일 적용width가 540px 보다 작은 경우 작성된 스타일 적용

semantic semantic: 의미론적인 div에 class로 넣던 것을 해당 태그 이름으로 작성 태그 이름만 바뀐 div semantic 태그 >### ⌨️ 문법 wrapper(정확히는 semantic 태그는 아님 : div가 아님) header nav a

>### ⌨️ 문법

import를 활용하여 해당 코드 안에 style이 아닌 다른 css파일에 작성된 style을 적용할 때 사용좋은 점 : \- 다른 사람과 협업시 style만 모아볼 수 있어서 좋음 \- 메인으로 사용하는 것은 공용으로 사용 \- 서브로 각자 페이지에는 각자 이

transform translate scale rotate skew translate(위치이동) translateX >#### ⌨️ 문법 x축 위치이동 양수 : 오른쪽 음수 : 왼쪽 translateY >#### ⌨️ 문법 y축 위치이동 음수 : 위 양수

transition 지연되는 시간을 이용해서 서서히 변화하는 모습을 보여줌 변화체(ex. 반응 선택자 등)가 있어야만 작동이 됨 종류: transition-property transition-duration transition-timing-function

animation 시작하고 바로 실행 가능 키프레임 단위로 움직임 animation name = keyframes name animation-iteration-count:4; 반복횟수 animation-direction: alternate; 진행방향 animation