CSS, Cascading Style Sheets
Cascading Style Sheets(CSS)는 HTML이나 XML(SVG, XHTML 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다. - MDN
HTML5 이전 버전의 HTML에는 style을 컨트롤할 수 있는 태그(font, center)가 존재하여 CSS 없이도 어느 정도 스타일 표현이 가능했으나 정보와 구조를 담당하는 HTML 본연의 역할과 동떨어진 기능까지 추가됨으로써 복잡하고 혼란스러운 언어였다.
HTML5에서는 HTML는 정보와 구조, CSS는 style의 정의라는 본연의 임무에 충실한 명확한 구분이 이뤄졌다.
HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며, HTML은 CSS를 포함할 수 있다. 그러나 HTML 없이 단독으로 존재하는 CSS는 의미가 없다.
선택자, 셀렉터, selector
선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단이다. CSS Rule Set은 선택자로 선택한 특정 HTML 요소를 어떻게 렌더링할 것인지 브라우저에 지시한다. 이러한 Rule Set의 집합을 스타일시트(Style Sheet)라 한다.
- 특기할 만한 선택자(내가 익숙하지 않은 선택자)
속성, 프로퍼티, property
속성과 그 값을 지정하는 것으로 다양한 스타일을 정의할 수 있다. 속성은 표준 스펙으로 이미 지정되어 있는 것을 사용하여야 하고 사용자가 임의로 정의할 수 없다. 여러 개의 속성을 연속해서 지정할 때 세미 콜론(;)으로 구분한다.
속성 값, value
속성의 값을 특정 단위로 지정해야 한다. 특정 단위는 다음과 같다.
- 키워드 → 각 속성에 따라 사용할 수 있는 키워드가 존재한다.
- 크기 단위 → CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px은 절댓값이고 em, %는 상대값이다. 대부분 브라우저의 폰트 사이즈 기본 값은 16px, 1em, 100%이다. 속성 값이 0인 경우, 단위를 생략할 수 있다.
- px → 픽셀은 디바이스 해상도에 따라 크기가 상대적이라 픽셀을 기준으로 하는 단위는 명확하지 않기 때문에 대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식한다.
- % → 백분율 단위의 상대 단위. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다.
- em → 배수 단위로 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)에 상대적인 사이즈를 설정한다. 예로, 1em은 요소에 지정된 사이즈와 같고, 2em은 그 2배이다. 폰트 사이즈 설정이나 콘텐츠를 포함하는 컨테이너의 크기 설정에 사용하면 상대적인 설정이 가능하여 편리하다. 중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의하여야 한다.
- rem → rem은 최상위 요소(html)의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미한다. 사용자가 브라우저의 기본 폰트 크기를 변경하더라도 이에 따라 웹사이트의 레이아웃을 적절히 조정할 수 있다는 장점이 있다. 따라서 폰트 사이즈 뿐만이 아니라 콘텐츠의 크기에 따라 가변적으로 대응하여야 하는 wrapper 요소(container) 등에 적합하다. Reset CSS를 사용하여 사전에 html 요소의 font-size 지정이 필요하다. font-size 미지정 시에는 16px이 적용된다.
- Viewport 단위(vh, vw, vmin, vmax) → 상대적인 단위로 viewport를 기준으로 한 상대적 사이즈를 의미한다. viewport는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역이다. 웹 브라우저에서 현재 창에 문서를 볼 수 있는 부분을 말한다. 스크롤 해야 보이는 콘텐츠는 뷰포트 바깥의 영역이다.
- 색상 표현 단위 → 키워드와 색상 표현 단위를 이용해 색상을 표현할 수 있다.
HTML과 CSS의 연동
HTML은 CSS를 포함할 수 있다. CSS를 가지고 있지 않은 HTML은 브라우저에서 기본으로 적용하는 CSS에 의해 렌더링된다.
CSS와 HTML을 연동하는 방법은 다음과 같다.
- Link Style → HTML 외부에 있는 CSS 파일을 로드하는 방식이고 가장 일반적이다.
- Embedding Style → HTML 내부에 CSS를 포함시키는 방식이다.
- Inline style → HTML 요소의 스타일 속성에 CSS를 기술하는 방식이다.
Reset CSS 사용하기
모든 웹 브라우저는 디폴트 스타일을 가지고 있어 CSS가 없어도 작동한다. 그런데 웹 브라우저에 따라 디폴트 스타일이 상이하고 지원하는 태그나 스타일로 제각각이어서 주의가 필요하다.
Reset CSS는 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용한다. 즉, 브라우저 별로 제각각인 디폴트 스타일을 하나의 스타일로 통일시켜 주는 역할을 한다.
자주 사용되는 Reset CSS는 다음과 같다.
참고자료 및 출처
'프로그래밍-학습기록 > Web' 카테고리의 다른 글
| CSS Position 속성 (static, relative, absolute, fixed) (0) | 2021.01.07 |
|---|---|
| CSS display 속성과 block, inline, inline-block, none (0) | 2021.01.07 |
| HTML 개요 (0) | 2021.01.05 |