해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
CSS3 lesson 1, 2의 내용인 기본 문법과 셀렉터에 대해 알아보겠습니다.
1. CSS3 Syntax
CSS(Cascading Style Sheets)는 HTML과 같은 구조화 된 문서에서 각 요소의 style(design, layout etc)을 정의하여 화면에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어입니다.
HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며, HTML은 CSS를 포함할 수 있지만 HTML 없이 단독으로 존재하는 CSS는 의미가 없습니다.
셀렉터 (Selector, 선택자)
셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단입니다.
위와 같은 구문을 Rule set
이라 하며 셀렉터에 의해 선택된 특정 HTML 요소를 어떻게 렌더링 할 것인지 브라우저에 지시하는 역할을 합니다.
Rule set의 집합을 스타일 시트(Style Sheet)라고 합니다.
프로퍼티 (Property, 속성)
프로퍼티는 표준 스펙으로 이미 지정되어 있는 것을 사용해야 하고, 사용자가 임의로 정의할 수 없습니다.
여러 개의 프로퍼티를 연속해서 지정할 수 있으며 세미콜론(;)
으로 구분합니다.
값 (Value, 속성 값)
프로퍼티의 값은 해당 프로퍼티에 사용할 수 있는 값을 키워드
나 크기 단위
또는 색상 표현 단위
등 특정 단위로 지정해야 합니다.
HTML과 CSS의 연동
위에서 말씀 드렸듯이 HTML은 CSS를 포함할 수 있습니다.
CSS를 가지고 있지 않은 HTML은 브라우저에서 기본으로 적용하는 CSS에 의해 렌더링 됩니다.
연동하는 방법은 다음과 같습니다.
Link style
HTML 외부에 있는 CSS 파일을 로드하는 방식이며, 가장 일반적으로 사용됩니다.
<head>
<link rel="stylesheet" href="css/style.css">
</head>
Embedding style
HTML 내부에 CSS를 포함시키는 방식이며, <style>
를 사용합니다.
간단한 웹페이지가 아닌 경우에는 HTML과 CSS는 역할이 다르므로 Link style을 사용하는 것을 권장합니다.
<head>
<style>
h1 { color: red; }
p { background: aqua; }
</style>
</head>
Inline style
HTML요소의 style 프로퍼티에 CSS를 기술하는 방식입니다.
JavaScript가 동적으로 CSS를 생성할 때 사용하지만, 이것 역시 Link style을 사용하는 것을 권장합니다.
<body>
<h1 style="color: red">Hello World</h1>
<p style="background: aqua">This is a web page.</p>
</body>
Reset CSS 사용하기
모든 웹 브라우저는 디폴트 스타일을 가지고 있어 CSS가 없어도 작동합니다.
하지만 웹브라우저에 따라 디폴트 스타일이 상이하기에 Reset CSS는 HTML 요소의 CSS를 초기화하는 용도로 사용합니다.
제각각인 디폴트 스타일을 하나로 통일시켜 주는 역할을 합니다.
자주 사용되는 Reset CSS는 다음과 같습니다.
2. Selector
셀렉터는 여러 개의 셀렉터를 연속하여 지정할 수 있으며 쉼표(,)
로 구분합니다.
전체 셀렉터 (Universal Selector)
*
: HTML 문서 내의 모든 요소 선택
태그 셀렉터 (Type Selector)
태그명
: 지정된 태그명을 가지는 요소 선택
p {
color: blue;
}
위 코드는 모든 <p>
요소를 선택하여 색상을 blue 컬러로 지정합니다.
ID 셀렉터 (ID Selector)
#id 어트리뷰트 값
: id 어트리뷰트 값을 지정하여 일치하는 요소 선택 → 중복 없음
<div class="container">
<p id="p1">hello</p>
</div>
#p1 {
color: red;
}
“hello”라는 글자의 색상은 red로 지정됩니다.
클래스 셀렉터 (Class Selector)
.class 어트리뷰트 값
: class 어트리뷰트 값을 지정하여 일치하는 요소 선택 → 값 중복 가능
HTML 요소에 class 어트리뷰트 값은 공백으로 구분하여 여러 개 지정할 수 있습니다.
이는 재사용의 측면에서 유용합니다. 다음과 같이 작성할 수 있습니다.
<div class="container">
<p id="p1">hello</p>
<p id="p2">world</p>
</div>
<!-- 여러 개 지정 -->
<p class="text-center text-large">WEB</p>
.container {
color: blue;
}
.text-center {
text-align: center;
}
.text-large {
font-size: 200%;
}
“hello”, “world”의 색상이 blue로 지정되고, “WEB”은 글자 크기가 커지고 중앙에 렌더링 됩니다.
어트리뷰트 셀렉터 (Attribute Selector)
셀렉터[어트리뷰트]
: 해당 어트리뷰트를 갖는 모든 요소 선택
a[href] {
color: red;
}
<a>
중에 href 어트리뷰트를 갖는 모든 요소의 색만 변경됩니다.
셀렉터[어트리뷰트="값"]
: 해당 어트리뷰트와 값이 일치하는 모든 요소 선택
a[target="_blank"] {
color: red;
}
<a>
중에 target 어트리뷰트의 값이 “_blank”인 모든 요소의 색만 변경됩니다.
셀렉터[어트리뷰트~="값"]
: 해당 어트리뷰트의 값이 (공백으로 분리된) 단어로 포함된 요소 선택
<h1 title="heading first">Heading first</h1>
<h1 title="heading-first">Heading-first</h1>
<h1 title="heading second">Heading second</h1>
<h1 title="heading third">Heading third</h1>
h1[title~="first"] {
color: red;
}
<h1>
중 title 어트리뷰트 값에 “first”를 단어로 포함하는 요소만 색이 red로 지정됩니다.
위의 예시에서는 “Heading first”만 색이 변경됩니다.
셀렉터[어트리뷰트|=”값”]
: 해당 어트리뷰트의 값과 일치하거나 연이은 하이픈(”값-”) 으로 시작하는 요소 선택
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
p[lang|="en"] {
color: blue;
}
<p>
중에 lang 어트리뷰트 값이 "en"과 일치하거나 "en-"로 시작하는 요소의 색만 blue로 지정됩니다.
위의 예시에서는 “Hello!”, “Hi!”, “Ello!”의 색이 변경됩니다.
셀렉터[어트리뷰트^=”값”]:
해당 어트리뷰트 값으로 시작하는 요소 선택
a[href^="https://"] {
color: red;
}
<a>
중에 href 어트리뷰트 값이 “https://”로 시작하는 요소만 색이 변경됩니다.
셀렉터[어트리뷰트$=”값”]
: 해당 어트리뷰트의 값으로 끝나는 요소 선택
a[href$=".html"] {
color: green;
}
<a>
중에 href 어트리뷰트 값이 ".html"로 끝나는 요소만 색이 변경됩니다.
셀렉터[어트리뷰트*=”값”]
: 해당 어트리뷰트의 값을 포함하는 요소 선택
div[class*="test"] {
color: yellow;
}
<div>
중에서 class 어트리뷰트 값에 "test"를 포함하는 요소의 색이 변경됩니다.
복합 셀렉터 (Combinator)
부모 요소 : 자신보다 1 level 상위에 속하는 요소
자손 요소(자식 요소) : 자신보다 1 level 하위에 속하는 요소
후손 요소 : 자신보다 n level 하위에 속하는 요소
후손 셀렉터 (Descendant Combinator)
셀렉터A
셀렉터B
후손 셀렉터는 셀렉터A
의 모든 후손(하위) 요소 중 셀렉터B
와 일치하는 요소를 선택합니다.
<div>
<p>p1</p>
<p>p2</p>
<span><p>p3</p></span>
</div>
<p>p4</p>
div p {
color: red;
}
<div>
의 후손 요소 중 <p>
의 색을 바꿉니다.
위의 예시에서는 “p1”, “p2”, “p3”의 색만 red로 변경되고, “p4”는 <div>
의 후손요소가 아니기에 변경이 되지 않습니다.
자식 셀렉터 (Child Combinator)
셀렉터A
>셀렉터B
자식 셀렉터는 셀렉터A
의 모든 자식 요소 중 셀렉터B
와 일치하는 요소를 선택합니다.
<div>
<p>p1</p>
<p>p2</p>
<span><p>p3</p></span>
</div>
<p>p4</p>
div > p {
color: red;
}
<div>
의 자식 요소 중 <p>
의 색을 바꿉니다.
위의 예시에서는 “p1”, “p2”의 색만 red로 변경됩니다.
형제(동위) 셀렉터 (Sibling Combinator)
형제 셀렉터는 형제 관계에서 뒤에 위치하는 요소를 선택할 때 사용합니다.
종류는 인접 형제 셀렉터와 일반 형제 셀렉터가 있습니다.
인접 형제 셀렉터(Adjacent Sibling Combinator)
셀렉터A
+셀렉터B
셀렉터A
의 형제 요소 중 셀렉터A
바로 뒤에 위치하는 셀렉터B
요소를 선택합니다.
A와 B 사이에 다른 요소가 존재하면 선택되지 않습니다.
<p>The first paragraph.</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Another list</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
p + ul {
color: red;
}
<p>
의 형제 요소 중에 <p>
바로 뒤에 위치하는 <ul>
요소를 선택합니다.
위의 예시에서는 “Coffee”, “Tea”, “Milk”의 색만 변경됩니다.
일반 형제 셀렉터(General Sibling Combinator)
셀렉터A
~셀렉터B
인접 형제 셀렉터와 다르게 셀렉터A
의 형제 요소 중 셀렉터A
뒤에 위치하는 셀렉터B
요소를 모두 선택합니다.
<div>A div element.</div>
<ul>
<li>Student</li>
<li>Professor</li>
<li>School</li>
</ul>
<p>The first paragraph.</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Another list</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
p ~ ul {
color: red;
}
<p>
의 형제 요소 중에 <p>
뒤에 위치하는 <ul>
요소를 모두 선택합니다.
위의 예시에서는 “Coffee”, “Tea”, “Milk”, “Apple”, “Banana”의 색이 변경됩니다.
가상 클래스 셀렉터 (Pseudo-Class Selector)
가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용됩니다.
콜론(:)
을 사용하며, 미리 정의된 이름이 있어 임의의 이름을 사용할 수 없습니다.
포맷은 다음과 같습니다.
selector:pseudo-class {
property: value;
}
링크 셀렉터(Link pseudo-classes), 동적 셀렉터(User action pseudo-classes)
:link
: 방문하지 않은 링크일 때
:visited
: 방문한 링크일 때
:hover
: 셀렉터에 마우스가 올라와 있을 때
:active
: 셀렉터가 클릭된 상태일 때
:focus
: 셀렉터에 포커스가 들어와 있을 때
UI 요소 상태 셀렉터(UI element states pseudo-classes)
:checked
: 체크 상태일 때
:enabled
: 사용 가능한 상태일 때
:disabled
: 사용 불가능한 상태일 때
구조 가상 클래스 셀렉터(Structural pseudo-classes)
:first-child
, :last-child
: 셀렉터에 해당하는 모든 요소 중 첫번째 / 마지막 자식 요소 선택
:nth-child(n)
, :nth-last-child(n)
: 셀렉터에 해당하는 모든 요소 중 앞에서 / 뒤에서 n번째 자식 요소 선택
⇒ n : 0부터 시작하는 정수
:first-of-type
, :last-of-type
셀렉터 요소를 기준으로 부모 요소의 자식 요소 중 첫번째 / 마지막 요소 선택
:nth-of-type(n)
, :nth-last-of-type(n)
셀렉터 요소를 기준으로 부모 요소의 자식 요소 중 앞에서 / 뒤에서 n번째 요소 선택
부정 셀렉터(Negation pseudo-class)
:not(셀렉터)
: 셀렉터에 해당하지 않는 모든 요소를 선택
정합성 체크 셀렉터(validity pseudo-class)
:valid(셀렉터)
: 정합성 검증 성공한 input 요소 또는 form 요소를 선택
:invalid(셀렉터)
: 정합성 검증 실패한 input 요소 또는 form 요소를 선택
가상 요소 셀렉터 (Pseudo-Element Selector)
가상 요소는 요소의 특정 부분에 스타일을 적용하기 위해 사용됩니다.
2개의 콜론(::)
을 사용하며, 미리 정의된 이름이 있어 임의의 이름을 사용할 수 없습니다.
포맷은 다음과 같습니다.
selector::pseudo-element {
property:value;
}
::first-letter
: 콘텐츠의 첫 글자를 선택
::first-line
: 콘텐츠의 첫 줄을 선택, 블록 요소에만 적용 가능
::after
, ::before
: 콘텐츠 뒤 / 앞에 위치하는 공간 선택
::selection
: 드래그한 콘텐츠를 선택, 일부 브라우저에서 동작 X
여기까지 CSS 기본 문법과 셀렉터에 대해서 정리해봤습니다.
셀렉터에 대한 자세한 코드 예시는 https://poiemaweb.com/css3-selector 에서 확인하실 수 있습니다.
다음 게시물은 각종 프로퍼티와 Box model에 대해 알아보겠습니다.