CSS의 기본 - 개념, 문법, 용법 정리

"styled-components"를 공부하던 중 계속 진도를 나가기 위해서는 CSS에 대한 지식이 좀 더 필요하겠다고 느껴서 CSS에 대해서 한번 짚고 넘어가려 합니다.

 CSS란

CSS는 Cascading Style Sheet의 약자로 HTML 문서의 요소들을 어떻게 보여줄지를 정의한 서식 문서입니다.  HTML4부터 서식 설정을 HTML 문서로부터 분리하는 게 가능해져서 CSS라는 별도의 파일로 관리하게 되었고 그래서 사이트의 스타일을 손쉽게 관리해 줄 수 있도록 해주는 역할을 합니다.

CSS는 W3C라는 기관에서 표준안을 관리하는데 1996년에 최초 표준 권고안이 제정되었고 지금까지 계속 개발이 이어지고 있다고 합니다. 참고로 지금 최신 버전은 CSS2.1입니다.

CSS 문법

CSS는 선택자와 선언부로 구성되는데 스타일을 지정할 목적물을 가리키는 '선택자'가 먼저 나오고 중괄호({}) 안에 적용할 스타일을 나열하는데 이를 '선언부'라고 합니다. 속성과 속성의 구분 혹은 선언은 마지막에는 세미콜론(;)을 사용합니다.

선언부는 방대한 CSS의 기능에 대한 부분이기 때문에 레퍼런스를 검색해서 필요한 기능을 찾아서 쓰면 되기 때문에 그 부분은 건너뛰고 개념을 잡는데 가장 중요한 선택자에 대해서 자세히 알아보겠습니다.

선택자(selector)

기본 선택자

이름	용도	형태	특징
전체 선택자	HTML의 모든 요소 선택	* { color: red; }	" * " 사용
요소 선택자	HTML 요소를 선택	h1 { color: red; }	태그명만 사용
id 선택자	id를 가지는 요소 선택	#body { color: red; }	id 앞에 " # "
class 선택자	특정 집단인 class 요소들을 선택	.header { color: red; }	class 앞에 " . "
그룹 선택자	위 3가지 선택자를 같이 사용 할때	h1, p { color: red; }	요소명을 " , " 로 연결

CSS는 스타일을 적용할 요소를 지정하는데 다양한 방법을 지원하고 있습니다. 단순히 <a>, <div>, <button> 같은 태그에 스타일을 입히고 싶을 때는 선택자로 태그명을 그대로 써주면 됩니다. 그리고 "#" 키워드를 사용하면 속성으로 "id"를 가지고 있는 요소들만 선택적으로 지정할 수도 있으며, "."을 이용하면 특정 클래스 속성만 선택할 수도 있습니다. 그리고 이 선택자들은 복합적으로도 사용이 가능해서 여러 선택자들을 쉼표(,)로 연결해서 사용해주면 한 번에 여러 요소에 같은 스타일을 적용할 수 있습니다.

속성 선택자(attribute selectors)

속성 선택자는 속성 혹은 속성 값을 가지고 HTML요소를 선택할 수 있습니다. 속성 선택자는 선택자를 대괄호" [] "로 감싸서 표현합니다.

형태	용도
[ 속성명 ] { color: red; }	특정 속성을 가진 요소 모두 선택
[ 속성명 = "속성값" ] { color: red; }	특정 속성값이 일치하는 모든 요소 선택
[ 속성명 ~= "속성값" ] { color: red; }	속성값에 특정 문자열의 단어를 포함하는 모든 요소 선택
[ 속성명 |= "속성값" ] { color: red; }	속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 모든 요소 선택
[ 속성명 ^= "속성값" ] { color: red; }	속성값이 특정 문자열로 시작하는 모든 요소 선택
[ 속성명 $= "속성값" ] { color: red; }	속성값이 특정 문자열로 끝나는 모든 요소 선택
[ 속성명 *= "속성값" ] { color: red; }	속성값이 특정 문자열을 포함하는 모든 요소 선택

결합 선택자

스타일을 선택하는 방법 중에는 요소들의 관계를 이용하는 방법으로 결합 선택자가 있습니다. 

이름	형태	용도	특징
descendant selector	div p { color: red; }	특정 하위 요소를 모두 선택	선택자를 띄어쓰기로 구분
child selector	div > h1 { color: red; }	바로 밑의 하위요소를 선택	선택자를 ">"로 구분

위 표에서 descendant selector와 child selector의 차이는 선택자 중 가장 앞에 있는 <div> 태그를 기준으로 하위 요소중 어느 깊이 까지를 대상으로 하는가입니다. 선택자를 띄어쓰기로 구분해서 "div p"와 같이 사용하면 <div> 태그 아래에 있는 요소들 중 모든 <p> 태그를 스타일 적용 대상으로 한다는 의미가 됩니다. 반면, "div > h1"이라고 선택자를 표현하면 <div> 태그 아래에 있는 요소들 중 <h1>이라는 태그를 선택한다는 건 동일한데 <h1> 태그가 기준이 되는 <div> 태그의 바로 아래에 있는 자식 요소일 경우만 해당합니다.

동위 선택자

이름	용도	형태	특징
sibling selector	같은 레벨에 있는 요소 선택	div ~ p { color: red; }	선택자를 "~"로 연결
adjacent sibling selector	같은 레벨에서 바로 다음 요소만 선택	div + p { color: red; }	선택자를 "+"로 연결

동위 선택자는 HTML의 계층구조에서 특정 요소를 기준으로 같은 레벨에 있는 요소들을 선택할 때 사용하는 방법입니다. 

의사 클래스(pseudo-classes)

의사 클래스는 앞에서 언급한 선택자에 덧붙여서 사용하며 요소의 상태에 따라서 조건별로 선택할 수 있도록 해줍니다. 사용법은 아래와 같이 선택자에 콜론(:)을 붙이고 뒤에 의사 클래스 옵션을 지정하면 됩니다.

div:link { font-weight: bold; }
div:checked { font-weight: bold; }
div:nth-child { font-weight: bold; }

의사 클래스로 사용할 수 있는 옵션은 다음과 같습니다.

이		용도
동적 의사 클래스	:link	해당 링크로 연결된 페이지를 방문하지 않은 상태를 모두 선택
	:visited	해당 링크를 방문한 상태면 모두 선택
	:hover	마우스 커서가 요소 위에 올라가 있는 상태를 모두 선택
	:active	마우스가 링크를 클릭하고 있는 상태를 모두 선택
	:focus	focus를 가지고 있는 input 요소 선택
상태 의사 클래스	:checked	“checked” 상태의 input 요소 모두 선택
	:enabled	활성 상태의 input 요소 모두 선택
	:disabled	비활성 상태의 input 요소 모두 선택
	:target	현재 활성화된 target 요소 모두 선택
	:in-range	특정 범위 내의 값을 가지는 input 요소 모두 선택
	:out-of-range	특정 범위를 벗어나는 값을 가지는 input 요소 모두 선택
	:read-only	읽기전용 속성의 input 요소 모두 선택
	:read-write	읽기전용 속성이 아닌input 요소 모두 선택
	:required	required 속성의 input 요소 모두 선택
	:optional	required 속성이 없는 input 요소 모두 선택
	:valid	유효한 값을 가지는 input 요소 모두 선택
	:invalid	유효하지 않은 값을 가지는 input 요소 모두 선택
구조 의사 클래스	:first-child	모든 자식 요소 중 첫 번째 요소 모두 선택
	:last-child	모든 자식 요소 중 마지막 요소 모두 선택
	:nth-child	모든 자식 요소 중 n번째에 요소 모두 선택
	:nth-last-child	모든 요소 중 뒤에서 n번째 요소 모두 선택
	:first-of-type	모든 자식 요소 중 첫 번째 특정 요소 모두 선택
	:last-of-type	모든 자식 요소 중 마지막 특정 요소 모두 선택
	:nth-of-type	모든 자식 요소 중 n번째 특정 요소 모두 선택
	:nth-last-of-type	모든 자식 요소 중 뒤에서부터 n번째 특정 요소 모두 선택
	:only-child	노드의 마지막에 위치한 모든 자식 요소 선택
	:only-of-type	자식 요소 중 유일한 특정 요소 선택
	:empty	자식 요소가 없는 모든 요소 선택
	:root	문서의 root 선택
기타	:not(선택자)	선택자를 반대로 적용
	:lang(언어)	요소의 특정 언어 설정을 선택

의사 요소(pseudo-element)

의사 요소도 역시 앞에서 언급한 선택자에 덧붙여서 사용합니다. 다만 요소의 특정 부분만 선택하도록 도와줍니다. 사용법은 아래와 같이 선택자에 더블 콜론(::)을 붙이고 뒤에 의사 요소 옵션을 지정하면 됩니다.

div::first-letter { color: red; }
div::before { color: red; }
div::selection { color: red; }

의사 요소로 사용할 수 있는 옵션은 다음과 같습니다.

이름	용도
::first-letter	텍스트의 첫 글자만 선택
::first-line	텍스트의 첫 라인만 선택
::before	특정 요소 바로 앞에 다른 요소를 삽입할 때 사용
::after	특정 요소 바로 뒤에 다른 요소를 삽입할 때 사용
::selection	특정 요소에서 사용자가 선택한 부분만 선택

여기서 'first-letter', 'first-line'옵션에서는 사용할 수 있는 CSS 속성이 제한적입니다.

::first-letter에서 사용 가능한 속성	::first-line에서 사용 가능한 속성
- font - color - background - margin - padding - border - text-decoration - text-transform - line-height - float - clear - vertical-align     (float 값이 none일 경우에만)	- font - color   - background - word-spacing - letter-spacing - text-decoration - text-transform - line-height - clear - vertical-align

CSS 적용방법

HTML에 CSS를 적용하는 방법에는 크게 3가지가 있습니다.

인라인 스타일 정의

HTML요소에 style속성의 속성 값으로 CSS 속성을 문자열로 지정하여 스타일을 지정할 수 있습니다.

<body>
    <h2 style="color:green; text-decoration:underline">
        인라인 스타일
    </h2>
</body>

HTML 문서 내부에서 스타일 정의

<style> 태그를 이용해서 HTML 문서 내부에 CSS를 정의할 수 있습니다.

<head>
    <style>
        body { background-color: lightyellow; }
        h2 { color: red; text-decoration: underline; }
    </style>
</head>

HTML 문서 외부에서 스타일 정의

마지막으로 CSS 확장자의 별도 파일을 만들어서 HTML 문서와 구분해서 스타일을 정의할 수 있습니다.

HTML 문서에는 다음과 같이 CSS파일과 링크를 만들어주고

<head>
    <link rel="stylesheet" href="/examples/media/expand_style.css">
</head>

CSS파일에 스타일을 정의해 줍니다.

body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }

 

이상 지금까지 CSS의 기본개념에 대해서 한번 알아봤습니다. JS 공부를 시작하고 CSS는 계속 뜬구름만 잡고 있어서 예제만 봐도 이해 안 가는 내용이 다반사였는데 기초적인 내용을 정리하고 나니 머리가 맑아지는 느낌이네요. 

 

끝!