CSS
HTML의 style 관련 요소들은 내용과는 상관없이 겉 모습에만 영향을 준다.
CSS를 사용하는 이유
- 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
내용과 디자인의 분리, 내용은 건드리지않고 디자인만 바꾸는게 가능
- 다양한 기기에 맞춰 탄력적으로 바뀌는 문서를 만들 수 있다.
- 프린터, 스마트폰 브라우저등 다양한 기기에 맞는 레이아웃을 만들 수 잇다.
태그 다음 중괄호 { }를 통해 스타일 값들을 넣어 사용
외부 스타일 시트
- HTML 문서 내부에 <style> 태그 없이 <link> 태그만 사용하여 .css파일을 끌어와서 사용 가능.
주요 선택자
- 태그 선택자
문서내 특정 태그를 사용하는 모든 요소에 스타일 적용됨.
ex) h2 { color:blue; } —> 문서내 모든 h2 Tag에 색깔 바꿈
- class 선택자
직접 class를 만들어서 선택자로 정의하고 마침표 다음에 클래스 이름 지정
캐스캐이딩(Cascading)
위에서 아래로 흐른다는 의미.
하나의 선택자에 여러 스타일이 적용될 때 충돌을 막기 위해 위에서 아래로 흐르며 적용되는 방법.
캐스캐이딩의 원칙
우선 순위
인라인 스타일 > id 스타일 > 클래스 스타일 > 태그 스타일
!important 를 사용하면 최우선순위로 가능
글꼴 관련 스타일
- font-family : 웹 문서에서 사용할 글꼴 지정. 쉼표로 우선순위 지정
- font-size : 글자 크기 수정. 스마트폰 등 반응형 웹에서는 백분율 사용
- font-weight : 글자 굵기 수정
- font 속성 : font : italic 12px/24px;
텍스트 스타일
- text-decoration : 밑줄 긋거나 가로지르기
- text-transform : 텍스트 대문자 소문자 바꾸기 등
- word-spacing , lettet-spacing : 단어 사이 간격, 글자 사이 간격
문단 스타일
- text-align : 텍스트 정렬 방법