CSS (Cascading Style Sheets)
CSS란 HTML의 각 요소들의 style을 정의하여 화면 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다.
HTML5에서는 HTML은 정보와 구조화, CSS는 styling의 정의라는 명확한 구분이 이루어졌다. HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며 HTML은 CSS를 포함할 수 있지만 HTML없이 단독으로 존재하는 CSS는 의미가 없다.
1. Selector (선택자)
CSS에서 다양한 방법으로 스타일을 적용하고자 하는 HTML요소를 선택할 수 있다.
h1 { color : red; }h1 : 선택자 ( Selector )
{ color : red; } : 선언 블록 ( Declaration block )
color : red; : 선언 ( Declaration)
color : 프로퍼티 ( Property )
red : 값 ( Property value )
1.1 HTML Tag Type을 이용하여 스타일 적용하기
h1 {
color : blue;
}HTML의 태그 종류를 지정하여 요소들을 꾸밀 수 있다. 지정한 태그에 해당하는 모든 요소들에 설정한 스타일이 적용된다.
1.2 Class를 이용하여 스타일 적용하기
.ex {
font-size : 2rem;
}
.hello {
font-weight : bold;
}HTML Element들의 Class를 이용하여 요소들을 선택할 수 있다.
<p class="ex hello"> Hello </p>동일한 스타일을 여러개의 요소에게 공통적으로 적용할 때 유용하게 사용되는 방법이다.
또한, 하나의 HTML Element에 하나 이상의 Class명을 줄 수 있다.
1.3 ID를 이용하여 스타일 적용하기
#ex {
background : blue;
}HTML Element들의 ID를 이용하여 선택할 수 있다.
<div id="ex"> Hello </div>ID는 반드시 하나의 Element에만 적용되어야 한다.
여러개의 HTML 요소들이 동일한 ID 가질 수 X
1.4 여러개의 Selector를 이용하여 스타일 적용하기 (Compound)
h1, h2, #ex {
font-size : 2rem;
}여러개의 Selector를 동시에 나열하는 방법
쉼표로 구분하여 Selector 중 하나라도 일치한다면 해당 스타일이 적용됨
<h1> Hello </h1>
<h2> World </h2>
<div id ="ex"> Example </div>1.5 특정 요소의 하위 요소만 스타일 적용하기 (Descendent)
#ex li {
font-size : 1rem;
}특정 요소의 하위 요소를 선택할 경우 사용된다.
ex라는 ID를 가진 요소의 하위에 존재하는 모든 li tag 선택하여 스타일이 적용됨
<ul id = "ex">
<li> Child </li>
</ul>1.6 부모 자식 관계를 이용하여 스타일 적용하기
#parent > li {
border : 1px solid red;
}직속 자식 요소들을 선택할 때 사용
parent라는 ID값을 가진 Element의 직속 자식요소들 중 li tag 요소들만 선택하여 스타일이 적용됨
<ul id="parent">
<li> child </li>
<li> child
<ul>
<li> grand child </li>
</ul>
</li>
</ul>1.7 페이지내 모든 요소에 스타일 적용하기
* {
color : red;
}1.8 속성(Attribute)을 이용하여 스타일 적용하기
img[alt="Cat"] {
border : 1px solid red;
}img tag들 중 alt 속성의 값이 "Cat"인 HTML element들을 선택하여 스타일을 적용함
(alt외 다른 속성들을 이용하여 선택할 수 있음)
<img src = "image.jpg" alt = "Cat">2. Property (프로퍼티)
Selector로 HTML요소를 선택하고 {}내의 프로퍼티와 값을 지정하는 것으로 다양한 style을 정의할 수 있다.
p {
color : ... ;
font-size : ... ;
}3. Value (속성값)
Selector로 지정한 HTML 요소에 style을 적용하기 위해 Property를 사용했다. Property의 값은 해당 Property에 사용할 수 있는 값을 특정 단위로 지정하여야 한다.
p {
color : orange;
font-size : 16px;
}4. Reset CSS 사용하기
모든 브라우저는 내장하고 있는 기본 스타일이 있어 CSS가 없어도 작동한다. 그런데 웹 브라우저에 따라 기본 스타일이 상이하고 지원하는 tag, style도 제각각이어서 주의가 필요하다.
Reset CSS는 기본적인 HTML요소의 CSS를 초기화하는 용도로 사용한다.
즉, 브라우저별로 제각각인 디폴트 스타일을 하나의 스타일로 통일시켜주는 역할을 한다.
5. 가상 Class 선택자
Element들의 상태에 따라서 마치 Class 선택자처럼 여러 Element들을 선택할 수 있는 선택자 (Class 선택자 X)
- a:link - 방문한 적 X
- a:visited - 방문한 적 O
- a:hover - 마우스 롤오버
- a:active - 마우스 클릭
6. 선택자 공부 Tip
CSS Cheat Sheet을 검색하면 다양한 CSS 정보를 얻을 수 있다.
참고사이트
