1. CSS의 개념
Cascading Style Sheet 의 약자라고 한다.
Style Sheet는 꾸며주는 종이 (페이지) 니까 이해가 간다고 치고, Cascading 은 무슨뜻일까?
cascade는 흘러내리는 (작은) 폭포라는 뜻이라고 한다. CSS의 큰 특징 중 하나는 ‘위에서부터' 적용된다는 것이다. 특징에 따라 부모의 요소가 상속되는 경우도 있다.
특히 초기화 한다거나 하는 링크를 CSS의 맨 아래에 넣지 않도록 주의하자!! 왜냐면 애써 만든 스타일들을 결국 초기화 시키는 꼴이 될테니까 말이다.
2. CSS의 기본 구조
(출처 : poeima web)
CSS를 적용하는 방법은 세가지가 있다.
- 인라인 : 선택자의 바로 뒤에 선언하는 inline 식
- 내부참조 : <head> 의 <style> 태그에 선언하는 식
- 외부참조 : css파일을 따로 만들어 html에 link를 연결하는 외부연결식
이 중 가장 많이 사용되는 것은 3번이다.
- 선택자(Selector)
- 기본선택자 : 요소, .class, #id(일반적으로 하나의 문서에 한 번만 사용한다.)
- 결합자
- 의사클래스/요소
- 속성(Property)
- 값(Property Value) : 끝나고 나서는 항상 세미콜론(;) 을 붙여야 한다.
- CSS적용 우선순위는 :
- !importance → 인라인 → id → class, 속성, psuedo-class → 요소, pseudo-element 순이다.
- 또한 CSS 파일 로딩순서 (link로 연결했을 때, 위에서 쓴 요소를 아래에서 다시 쓰면 덮어쓰기가 된다.)
3. CSS의 기본 요소
1. 크기
기본적으로 사용하는 px, % (화면따른 비율) 외에
em, rem 이 많이 쓰인다.
- em : 상속 O, 요소 단위에 지정된 상대적인 사이즈
- rem : 상속 X, 최상위 요소의 사이즈에 기준에서 적용
- vw : (viewport) 라는 의미로, device 의 화면 기준에 따라 달라진다.
2. 색상
많이 사용한느 컬러키워드 (ex. blue, red …) 외에도 RGB (0,0,0) 혹은 컬러코드 #FFFFF
그리고 nsl 색상으로 사용가능하다, alpha는 투명도를 의미한다.
Uploaded by N2T