5일차 :: CSS

✍CSS(Cascading Style Sheet)

마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다.


CSS의 궁극적인 목표: 어떤 브라우저에서도 동일하게 보여야한다. 그래서 reset.css 같이 값을 바꿔준다.

div { background-color : orange; }

• selector : 선택자
• property : 속성
• value : 값
• { 속성 : 값; } : 선언문

선택자 종류

*	Universal Selector(전체 선택자)
p, section, ul ...	Type Selector(태그 선택자)
.클래스명	Class Selector(클래스 선택자)
#아이디명	Id Selector(아이디 선택자)
(한 칸 공백), >, +, ~	Combinator(복합 선택자)
타입[속성 = "값"]	Attribute Selector(속성 선택자)

복합 선택자

element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects the first <p> element that are placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element

---

선택자 우선순위

!important > 인라인 스타일 속성 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자

동일한 클래스 선택자라면 그 안에서 또 다르게 할 수 있다.
section.클래스명 > .class
.클래스명.클래스명은 두 번 부르는것이기에 더 강하다. (.wow .wow는 wow 하위의 wow를 뜻함)
h1.클래스명.클래스명2 이게 가장 구체적이다.

---

지키면 좋은 css 순서 가이드

1. 전체적인 덩어리를 먼저 나누기.
- 컨텐츠부터 막 서둘러 넣지말고 section이 어떻게 나뉘는지 분석 후 구분한다.

2. 구분을 위해 각각 시각적으로 힌트를 준다.
- background-color나 background-image를 넣는 등 각 영역별로 한눈에 알 수 있게 해준다.

3. 기본 레이아웃 관련 스타일만 짠다.
- margin, padding으로 공간을 만든 후에 내용물을 만들어야한다.

4. 요리 재료(요소, 타입 셀렉터 이용) 손질부터 먼저 해주자.
- 각 속성마다 가진 초기값을 초기화를 통해 가장 담백한 상태로 만들기 ~ inherit, initial(IE박멸), margin 0 padding 0

5. class 선택자를 사용하여 작업한다.
- 타입 선택자나 id 선택자보다는 CSS를 꾸밀때는 클래스 선택자를 사용하는것이 좋다.
- 타입 선택자 지양하는 이유 : 다른 영역에 있는 같은 타입의 요소에도 영향을 줄 수 있기때문에 되도록 쓰지 않아야한다.
- id 선택자 지양하는 이유 : class 선택자는 중복으로 사용가능하지만 id 선택자는 딱 하나만 존재할 수 있기 때문이다.