CSS란?
CSS 란 Cascading Style Sheets 의 약자로, 우리가 작성한 html 문서에 디자인을 입혀 아름답게 꾸며 줄 수 있는 도구이다.
CSS 는 프로그래밍 언어도, 마크업 언어도 아닌 Style Sheet 언어이다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다.
HTML 태그에서 모든 <p> 태그 안의 텍스트들의 색상을 빨간색으로 바꾸려면 이렇게 작성할 수 있다.
p {
color: red;
}스타일을 적용하려면 이 코드를 HTML 문서에 적용해야 한다.
HTML에 스타일을 적용하려면, 코드를 style.css 파일로 저장한 뒤 HTML파일 내부에 이 css 파일을 참조하라고 알려주면 된다. 그 방법은 이렇다.
<link href="styles/style.css" rel="stylesheet" type="text/css">이제 HTML 파일을 불러오면, 스타일이 적용된 HTML문서를 브라우저에서 볼 수 있다.
CSS의 구조
css의 전체 구조는 rule set 또는 rule 이라고 한다. 각각의 요소에 대해서 알아보자!
선택자, selector
rule 맨 앞에 있는 html요소 이름이다. class, id, attribute 등이 올 수 있다.
요소 여러 개를 선택자로 할 수도 있다.
p,li,h1 {
color: red;
}- 선택자의 종류와 작성법
- id 선택자:
#my-id - class 선택자:
.my-class - attribute 선택자:
img[src=""],[type='radio'] - pseudo class 선택자:
a:hover
- id 선택자:
선언, delcaration
해당 요소를 어떻게 꾸밀 것인지를 명시한 선언문이다.
속성, property
해당 HTML 요소를 꾸밀 수 있는 속성이다.
속성 값, property value
속성 오른쪽, 콜론 뒤에 주어지는 속성에 대한 값이다. color 속성의 속성값으로는 red 말고도 많은 다양한 색상값들이 올 수 있다.
폰트 스타일 바꾸기
구글 폰트 사용하기
다양한 폰트를 사용하고 싶을 경우! Google Font 를 사용해 바꿀 수 있다.
먼저 html 문서에 다음과 같이 링크를 추가해 준다.
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">이제 CSS 코드에서 다음과 같이 폰트 이름을 적어주면 폰트를 변경할 수 있다.
font-family: Lobster;
폰트 이름을 작성할 때 중간에 공백이 있는 경우, "" 를 사용해 묶어주어야 한다.
font-family: "Open Sans";
plan-b 폰트 지정하기
특정 폰트가 사용될 수 없는 상황에서 대체로 사용할 폰트도 지정해 줄 수 있다.
p {
font-family: Helvetica, sans-serif;
}Helvetica 폰트가 사용될 수 없는 상황이라면, sans-serif 폰트를 사용하도록 지정해 준 코드이다.
plan-b 폰트로 지정할 수 있는 것은 기본글꼴, 즉 generic font 들이다. 기본글꼴에는 serif, sans-serif, monospace 가 있다. 또한 CSS 키워드에 해당하기 때문에 따옴표로 묶어 주지 않아도 된다.
Padding 과 Margin
HTML요소들은 기본적으로 박스 형태로 되어 있고, 이 박스들을 어떻게 위치시킬 건지에 따라서 레이아웃을 다르게 구성할 수 있다.
이 박스들은 모두 padding, border, margin 이라는 속성을 가지고 있다.
padding, 컨텐츠 바깥과 경계 사이 공간border, padding 의 바깥쪽에 놓인 실선margin, 경계선 바깥쪽을 둘러싼 공간
그림으로 표현하면 다음과 같다.
margin 에 음수 값 부여하기
margin 은 요소의 경계와 주변 요소 사이의 공간을 제어한다. 따라서 margin 값으로 음수를 주면 요소 크기를 키울 수 있다.
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: 20px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: -15px;
}
margin 과 padding 시계방향 표기법으로 쓰기
margin 과 padding으로 위, 아래, 왼쪽, 오른쪽 네 방향을 각각 제어할 수 있다. 이 방향을 한 줄에 모두 적는 표기법이 시계방향 표기법이다.
padding: 10px 20px 10px 20px;순서대로 위, 오른쪽, 아래쪽, 왼쪽을 의미하기 때문에 시계방향 표기법이라고 한다.
절대 단위와 상대 단위
요소들의 크기를 조절하는 방법으로는 px 말고도 in, mm, em, rem 이 있다.
이 단위들은 절대 단위와 상대 단위로 나눌 수 있다.
절대 단위
절대 단위는 물리적 단위와 거의 일치한다. 브라우저 크기나 화면 크기에 관계 없이 절대적인 크기를 나타낸다.
in: 인치mm: 미리미터px: 픽셀
상대 단위
화면의 특정 요소의 크기에 따른 상대적인 비율로 크기를 나타낼 수 있다.
em: 해당 요소의 글꼴 크기를 1em으로 사용한다. 요소 크기(padding, margin, width 등) 에 적용할 경우, 해당 요소 안의 폰트 크기에 대한 비율이다. 아래 그림에서 padding 은 빨간색 박스 안에 있는 텍스트 padding의 폰트 크기의 2배이다. 폰트 크기 단위로 em을 적용할 경우, 기준은 부모 요소의 폰트 크기가 된다.
.red-box {
background-color: red;
padding: 2em;
}
rem: 루트 요소(HTML) 의 글꼴 크기를 1em으로 사용한다.- 폰트 단위에 대한 자세한 설명은 여기서! 폰트 단위: em, rem(root em)
상속과 오버라이딩
모든 태그의 최상위 태그는 html, 그 다음은 body 태그이다.
모든 하위 태그들은 부모 태그에 적용된 CSS 속성을 그대로 가진다(상속한다)
그러나 브라우저는 CSS와 HTML 문서를 위에서 아래로 읽기 때문에 가장 아래에 쓰여진 CSS가 결과적으로 화면에 적용된다.
예를 들어 아래와 같은 코드가 있을 때, h1 태그는 body 태그의 속성을 상속하기 때문에 h1의 폰트 색상에 대한 선언이 없어도 "Hello world"는 green 이라는 속성값을 가진다.
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
</style>
<h1>Hello World!</h1>그런데 body {} 아래에 h1 의 폰트 컬러에 대한 새로운 속성값을 부여해준다면, 가장 마지막에 선언된 스타일이 적용되어 h1태그는 pink라는 속성값을 갖게 된다.
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
h1 {
color: pink
}
</style>
<h1>Hello World!</h1>즉, CSS 문서에서 선언된 순서에 따라 속성값을 재정의(오버라이드)할 수 있다.
아래 코드를 보면, h1요소에 pink-text와 blue-text 두 개의 클래스가 부여되었지만, CSS에서 가장 마지막에 선언된 클래스는 blue-text 이기 때문에 결과적으로 blue 속성값을 갖는다. h1에 부여된 클래스 순서를 바꿔도 마찬가지이다.
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>오버라이딩 예외
이러한 오버라이딩 특성을 무시할 수 있는 두 가지 방법이 있다.
#my-id
id 를 사용해 스타일을 선언하는 경우, 다른 무엇보다 우선순위를 가진다.
아래의 코드를 보면, orange-text 는 아래 두 개의 클래스보다 위에 선언되었지만 id 에 대한 스타일이기 때문에 다른 두 개의 클래스를 제치고 적용된다.
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>인라인 스타일(끝판왕)
HTML 태그 내에 style 속성으로 스타일을 부여하는 경우, 다른 모든 스타일 선언을 무시하고 적용된다.
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 style="color: green;" id="orange-text" class="pink-text blue-text">Hello World!</h1>다양한 색상 표기법
16진수 표기법
#000000 과 같이 6개의 16진수를 사용해 색상을 표기하는 방법이다.
앞에서부터 두 자리씩 R, G, B 요소를 의미한다.
R, G, B를 나타내는 숫자 두 자리가 같다면(예: #00FFFF) #0FF 와 같이 줄여 쓸 수도 있다.
RGB 표기법
rgb(0, 0, 0) 으로 색상을 표기하는 방법이다. 0에서부터 255 사이의 숫자로 R, G, B 색상의 밝기를 지정한다.
CSS 변수 사용하기
CSS 코드 내에서 변수를 만들어 문서 전체에서 참조할 수 있다.
--penguin-skin: blue; 과 같이 - 를 두 개 붙여서 변수를 만들고, 속성값을 할당해 주면 된다.
변수를 사용할 때는 다음과 같이 어떤 속성에 대한 속성값으로 background: var(—penguin-skin) 을 넣어 주면 된다.
plan b 속성값 넣어주기
어떤 이유로 인해 변수가 브라우저에서 작동하지 않을 경우, 이를 대체할 수 있는 속성값을 함께 지정해 줄 수 있다.
다음과 같이 작성하면, penguin-skin이라는 변수를 참조할 수 있다면 해당 변수에 선언된 속성값을 배경색으로 사용하고, 변수를 참조할 수 없다면 black을 배경색으로 사용한다.
background: var(--penguin-skin, black);다음과 같이 background 속성에 대한 선언을 두 번 해줌으로써 plan-b 를 마련할 수도 있다. 이렇게 되면 변수 사용을 지원하지 않는 브라우저에서는 첫 번째 선언을 사용할 것이고, 변수 사용을 지원하는 브라우저에서는 두 번째 선언을 사용할 것이다.
<style>
:root {
--red-color: red;
}
.red-box {
background: red;
background: var(--red-color);
height: 200px;
width:200px;
}
</style>
<div class="red-box"></div>root 변수 만들고 상속, 재정의하기
변수 또한 부모 요소에서 만들면 모든 하위 요소에서 이를 상속한다.
문서 전체에서 변수를 사용하기 위해서는 :root 선택자에 변수를 정의해야 한다.
:root 는 루트 요소(HTML)를 의미하는 pseudo class 선택자이다. :root 요소 안에서 만들어진 변수를 특정 요소 내에서 다시 정의하면 변수를 덮어쓸 수도 있다.
:root 요소는 media 쿼리를 사용해 화면 크기별로 다르게 선언할 수도 있다. 예를 들어 화면 너비 350px 이하에서는 크기와 색상을 다르게 만들려면 다음과 같이 작성하면 된다.
:root {
--penguin-size: 300px;
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
}
@media (max-width: 350px) {
:root {
--penguin-size: 200px;
--penguin-skin: black;
--penguin-belly: gray;
--penguin-beak: yellow;
}