CSS란?

Cascading Style Sheets의 약어로 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의한 스타일 시트 언어이다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다.

이름에서 알 수 있듯이 Cascading은 계속되는, 연속적인이라는 뜻을 가졌으며 이것이 가장 큰 특징이며 우선순위에 따라서 상위요소의 스타일이 하위 요소에 적용이 된다 즉 상속이 된다.

스타일 형식

p {text-align: center; padding: 10px;}
선택자 {스타일 속성: 속성 값;....}

p: 선택자 셀럭터라고 부르고 스타일을 어디에 적용할 것인지를 나타낸다.
text-align: 스타일 속성이고 어떤 스타일을 적용할 것인지를 나타낸다.
center: 속성의 값이고 속성에 적용할 값을 나타낸다.

스타일 적용 우선순위

(첫번째가 가장 중요하고 숫자가 커질수록 우선순위가 낮아짐)

중요도

1. 사용자 스타일 시트의 중요(!important) 스타일
2. 제작자 스타일 시트의 중요 스타일
3. 제작자 스타일 시트의 일반 스타일
4. 사용자 스타일 시트의 일반 스타일
5. 브러우저 스타일

- 사용자 스타일 시트: 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자가 자신에게 맞게 구성해 높은 스타일 시트. 고대비 설정 등 시스템에 의해 만들어지는 스타일이다.
- 제작자 스타일 시트: 개발자가 작성한 css 파일에 의해 스타일이 적용된다.
- 브라우저 스타일: 각각의 브러우저가 가지는 기본 스타일이다.

명시도

명시도란? 주어진 CSS 선언에 적용되는 가중치
1. !important
2. 인라인 스타일
3. id 스타일
4. class / attribute / 가상 선택자(:hover, :active etc...) 스타일
5. 태그 선택자
6. 전체 선택자(*)

<input type="text" style="background: red; width:100px !important;" 
		id="pid" class="pclass">

/* 인라인 스타일: 태그 안에 style 속성을 사용하여 스타일을 적용 */
#pid { /*  id 스타일 */
	background: blue;
}

.pid { /*  class 스타일 */
	background: yellow;
}

input[type="text"] { /*  attribute 스타일 */
	color: gray;
}

.pid:hover { /*  가상 선택자 스타일 */
	background: none;
}

input { /*  태그 선택자 */
	width: 50%;
}

* { /*  전체 선택자 */
	font-size: 16px;
}

!important :우선순위가 가장 높고 상속받은 스타일을 무시할 수 있다. 하지만 그렇기 때문에 더욱 더 주의해서 써야하고, 최대한 자제해야한다.

가상 클래스(:pseudo-class) 가상 요소(:pseudo-element)

• 가상클래스란?: 실제로 존재하는 요소에 별도의 클래스 추가없이 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 스타일을 적용하는 것
• 가상 요소란?: 실제로 존재하지 않는 가상의 요소를 만들어 컨텐츠를 적용하는 것

/* ex) 가상 클래스 */ 
li.nth-child(2) {
	color: red;
}

/* ex) 가상 요소 */ 
p:after {
	content: 'Child-'
}

:before, :after

• :before는 태그의 앞에 가상의 요소를 만들어 컨텐츠를 표시한다.
• :after는 태그의 뒤에 가상의 요소를 만들어 컨텐츠를 표시한다.
• 해당 요소를 사용하기 위해서는 content라는 속성을 사용해야한다.

<p>가상요소 테스트</p>
<!-- 출력결과 => 앞-가상요소 테스트-뒤 -->

p:before {
	content: "앞-"
}
p:after {
	content: "-뒤"
}