막노트 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

Utility-First 철학을 지향하는 CSS 프레임워크. HTML 마크업 내부에서 사전 정의된 클래스명을 조합하여 스타일을 완성하는 방식. 별도의 CSS 파일을 생성하거나 클래스 선택자 이름을 고민할 필요 없이 태그 안에서 즉시 스타일링이 가능하여 개발 효율성을 극