HTML 속성 vs CSS 속성
- HTML 속성은 태그에 종속적이라 특정 태그에만 사용 가능
- CSS 속성은 태그에 독립적이라 모든 태그에 적용 가능
background 속성
- background-color - 배경 색상
- background-image - 배경 이미지
- background-repeat - 배경 이미지 반복 방식
- background-position - 배경 이미지 위치
- background-attachment - 배경 이미지 고정 여부
CSS 색상 표현법
- Color Name - red, yellow, blue 등 140여 가지
- RGB HEX - #000000 ~ #FFFFFF
- RGB DEC - rgb(0,0,0) ~ rgb(255,255,255)
- RGBA DEC - rgba(0,0,0,0) → 마지막 값이 Alpha Channel(불투명도 0~1)
- RGBA HEX - #RRGGBBAA
CSS 수치 단위
- CSS에서 수치를 사용할 때 반드시 단위를 명시해야 함
절대값
- pt - 포인트, 글꼴 크기에 사용, 1pt = 1/72인치
- px - 픽셀, 가장 많이 사용, 크기/글꼴/여백/위치 등에 활용
상대값
- em - 현재 폰트 대문자 M의 높이 기준, 부모의 영향을 받음
- rem - em과 동일하나 항상 브라우저 기본 글꼴 크기 기준
- % - 부모 태그 기준
- vw - viewport width, 현재 보이는 화면 너비를 100으로 하는 단위
- vh - viewport height, 현재 보이는 화면 높이를 100으로 하는 단위
일반적인 글꼴 크기 범위 - 9pt~12pt / 11px~17px / 0.8em~0.95em
텍스트 관련 CSS 속성
- color - 텍스트 색상(전경색)
- text-align - 수평 정렬, left/center/right/justify, 인라인 요소 정렬
- font-size - 글꼴 크기
- line-height - 줄간격
- word-spacing - 단어 간격
- letter-spacing - 자간(문자 간격)
- font-style - 스타일, normal/italic/oblique
- font-weight - 두께, normal/bold
- text-decoration - 꾸미기, underline/line-through 등
- text-indent - 문단 들여쓰기
- font-family - 글꼴 지정
- serif - 획 끝에 장식이 있는 폰트
- sans-serif - 획 끝에 장식이 없는 폰트
- monospace - 문자 폭이 균일한 폰트
- cursive - 필기체 계열
- fantasy - 장식체 계열
- 폰트 적용은 선언 순서대로 찾으며 없으면 다음 폰트로 넘어감
- font-family: '하늘체', '바람체', 'Malgun Gothic', sans-serif;
폰트 종류는 설치형 폰트(*.ttf)와 웹 폰트(구글 폰트, 눈누 등)로 구분
선택자 중복 적용
-
같은 태그에 여러 선택자가 중복 적용될 때 속성 충돌이 발생하면 선택자 우선순위 점수로 결정
- 태그 선택자 - 1점
- 클래스 선택자 - 10점
- 아이디 선택자 - 100점
- 점수(진짜점수가 아님)가 동일하면 마지막에 선언된 선택자가 적용됨 클래스가 아무리 많이 모여도 아이디 선택자 하나보다 점수가 낮음
/* 점수: 100점 */
#box1 { color: red; }/* 점수: 10*10 = 100점 → 동점이면 마지막 선언 적용 */
.box.aaa.bbb... { color: blue; }폼 컨트롤 스타일
- 브라우저가 기본적으로 User-Agent 스타일을 적용함 개발자가 일부 속성을 정의하면 나머지는 User-Agent 기본값으로 유지됨
