ch2 - 1. CSS의 기초

Index

Index 1. CSS의 기초 1.1 CSS란?1.2 CSS의 기본 구조 1.2.1 Selector 1.2.2 Property 1.2.3 Value 1.2.4 Declaration 1.3 CSS 기본 단위 1.3.1 고정 크기 단위와 가변 크기 단위 1.3.3 Color

1. CSS의 기초

1.1 CSS란?

CSS는 Cascading Style Sheets의 약자입니다. CSS의 단어 뜻을 보면 그 목적과 의미를 쉽게 이해할 수 있습니다.

가장 먼저 Style Sheets라는 단어에서 볼 수 있듯이 CSS는 웹 페이지의 스타일을 정리해둔 문서입니다. 여기서 스타일은 "글자 크기는 13px", "본문 내용 오른쪽에 여백은 13px", "제목은 여기 배치" 와 같이 웹 페이지와 관련된 스타일 들을 말합니다.

남은 Cascade는 '폭포가 되어 떨어지다'의 뜻을 가지는 단어입니다. CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용됩니다. 이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙었습니다.

정리하자면 Cascading Style Sheets의 약자인 CSS는 웹 페이지의 다양한 스타일을 정의할 때 쓰입니다.

1.2 CSS의 기본 구조

CSS는 우리가 앞으로 웹에 적용할 스타일을 적어둔 일종의 스타일 명세서입니다. 한 번 다음과 같은 스타일 명세서가 있다고 생각해 봅시다. 이 글의 폰트, 글자 크기, 글자색을 다음과 같이 해주세요 라고 적혀 있습니다.

이제 이 스타일 명세서를 CSS로 바꿔 보면 다음과 같습니다. 이 예시를 토대로 CSS의 기본 구조에 대해 차근차근 설명하겠습니다.

1.2.1 Selector

먼저 HTML의 <article>태그를 가리키고 있는 article을 CSS에서는 선택자 혹은 셀렉터라고 부릅니다.

CSS를 적용할 때는 이 글의와 같이 우리가 스타일을 지정할 HTML 요소를 선택해야 합니다. 이 역할을 하는 것이 바로 셀렉터입니다.

1.2.2 Property

다음으로 font-family, font-size 해당하는 부분을 CSS에서는 속성(Property)이라고 부릅니다.

CSS에서 프로퍼티는 지정하고 싶은 스타일 속성의 이름입니다. CSS에 정의된 프로퍼티를 올바르게 사용해야 원하는 스타일을 적용할 수 있습니다. font-size, color, backgound, position 등 정말 다양한 속성이 있습니다.

1.2.3 Value

마지막으로 16px, blue에 해당하는 부분은 CSS에서 값(Value)이라고 부릅니다. 보통 벨류는 다음과 같이 나뉩니다.

CSS에 정의된 특정 키워드(blue, block 등)를 벨류로 사용

수치와 특정 단위(px, %, em, rem, vh, vw 등)를 벨류로 사용

벨류는 프로퍼티와 짝을 이루어 사용됩니다. 보통 각 프로퍼티에 허용되는 벨류의 종류가 정해져 있고 이를 알고 정확히 사용해야 우리가 원하는 방향으로 스타일을 적용할 수 있습니다.

정리하면 CSS의 기본적인 구조는 셀렉터, 프로퍼티, 벨류로 이루어져 있습니다.

선택자(Selector): 스타일을 적용하고자 하는 HTML 요소를 선택

속성(Property): 스타일 속성 이름

값(Value): 속성에 대응되는 값

1.2.4 Declaration

추가적으로 설명하자면, 셀렉터 뒤에 {}(중괄호) 안에 있는 한 블록, 덩어리를 보통 선언 블록(Declaration block)이라고 부릅니다.

이 선언 블록은 중괄호로 시작과 끝을 나타내며 블록 안에 내용을 한 단위로 하고 다음 선언 블록과 구분됩니다. 각각 적혀 있는 선택자에 한해서만 스타일이 적용됩니다.

다음으로 선언 블록 내부를 보면, 속성과 값은 짝을 이루고 있습니다. CSS에서 속성과 값의 짝을 선언(Declaration)이라고 부릅니다.

선언 블록 내부의 다른 선언과 ;(세미콜론)으로 구분됩니다. 각 선언이 끝날 때마다 선언이 끝났음을 알리는 세미콜론을 반드시 써야 합니다. 쓰지 않을 경우 제대로 스타일 적용이 안될 수 있습니다.

세미콜론으로 끝을 알리기 때문에 이러한 점을 이용하여 CSS에서는 모든 선언을 한 줄로 이어서 쓸 수 있습니다. 하지만 가독성을 위해서, 특별한 경우가 아니라면 권장하지 않습니다.

1.3 CSS 기본 단위

CSS에서 사용할 수 있는 여러 크기의 단위에 대해서 살펴보도록 하겠습니다.

단위는 고정크기단위와 가변크기단위로 나누어지며, 고정크기단위에는 px, pt, pc, cm, mm, in이 있고, 가변크기단위에는 em, ex, rem, %, vh, vw, vmin, vmax, eh, ch가 있습니다. 여기서는 자주 쓰이는 단위에 대서만 알아보도록 하겠습니다.

1.3.1 고정 크기 단위와 가변 크기 단위

고정 크기 단위

단위

설명

픽셀(화소)

포인트

인치

cm, mm

센티미터, 밀리미터

px은 고정크기단위로 CSS에서 많이 쓰이는 단위입니다. 가변크기단위와는 달리, 고정된 크기를 지원하기 때문에 글자크기의 변화가 용이합니다. 초기 기본 px의 크기는 16px입니다. 각 선택자에 대해 원하는 px값을 지정하면 아래와 같은 결과를 얻습니다.

CODE


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		h1 { font-size: 20px; }
		p  { font-size: 14px; }
		div{ font-size: 10px; }
		</style>
	</head>
	<body>
		<h1>[ch5_ex1]CSS 크기단위에 대한 실습입니다.</h1>
		<p>CSS 크기단위 첫번째 px에 대한 실습 예제입니다.</p>
		<div>첫번째 실습은 px의 크기를 알아봅니다.</div>
	</body>
</html>

실행화면

가변 크기 단위

단위

설명

배수 단위 (부모의 글자크기에 따라 기준점이 달라진다.)

백분율 단위

rem

root em (최상위 요소의 글자크기에 따라 달라진다.)

화면비 백분율 단위

vmin

화면비 최솟값

vmax

화면비 최댓값

현재 폰트의 x-height 값

em은 가변크기단위로 배수를 나타내는 단위입니다. 부모의 font-size에 따라 기준점을 세우며 기준점에 따라 크기가 달라집니다. 자세한 내용은 아래 코드를 참고해주시기 바랍니다.

CODE


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body { font-size: 30px;  }
			div  { font-size: 0.8em; }
			p    { font-size: 1.2em; }
			</style>
		</head>
		<body>
			<!-- body의 크기인 30px을 따른다. -->
			em의 처음 크기는 30px 입니다.
			<div>
				<!-- 부모 body의 크기인 30px에 div의 크기인 0.8을 곱한다. -->
				<br/>em의 크기는 30 * 0.8 = 24px 입니다.
				<div>
					<!-- 부모 div의 크기인 19.2px에 div 크기인 0.8을 곱한다. -->
					<br/>em의 크기는 19.2 * 0.8 = 15.36px 입니다.
				</div>
			</div>
		</div>
		<!-- 부모 body의 크기인 30px에 p의 크기인 1.2을 곱한다. -->
		<p>p의 크기는 30 * 1.2 = 36px 입니다.</p>
	</body>
</html>

실행화면

em에서의 값 1은 100%입니다. 즉, 부모의 px값을 30px로 지정하고, 그 아래 자식 div의 값에 0.8em을 지정하면 30px * 0.8 = 24px가 됩니다.

💡

(부모의 크기값 * 자식의 em 값) = 자식이 가지게 될 크기 값

이를 보편화하면 위의 공식이 성립하게 됩니다. 가변크기단위이기 때문에 부모의 크기에 따라 자식의 크기 값이 달라집니다.

%는 가변크기단위로써 백분율을 나타내는 단위입니다. %도 기본 설정된 크기에서 상대적으로 크기를 지정합니다. 초기 설정된 크기는 100%입니다.

기본 px의 크기가 16px이라 했으니 폰트의 크기를 75%라 정할 경우,

16px * 0.75 = 12px가 된다. 자세한 내용은 아래 예제를 통해서 설명하도록 하겠습니다.

CODE


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body { font-size: 30px;  }
			div  { font-size: 50%; }
			p    { font-size: 110%; }
			</style>
	</head>
		<body>
			<!-- body의 크기인 30px을 따른다. -->
			%의 처음 크기는 30px 입니다.
			<div>
				<!-- 부모 body의 크기인 30px에 div의 크기인 0.5을 곱한다. -->
				<br/>%의 크기는 30 * 0.5 = 15px 입니다.
			</div>
			<!-- 부모 body의 크기인 30px에 p 크기인 1.1을 곱한다. -->
			<p>p의 크기는 30 * 1.1 = 33px 입니다. </p>
    </body>
</html>

실행화면

%에서의 값 100%은 1이다. 즉, 부모의 px값을 30px로 지정하고, 그 아래 자식 div의 값을 50%를 주게 되면 30px * 0.5 = 15px가 됩니다.

💡

부모의 크기 & (자식의 %값/100) = 자식이 가지게 될 px 값

이를 보편화하면 위의 공식이 성립하게 됩니다. em과 같이 가변크기단위이기 때문에 부모의 크기에 따라 자식의 크기 값이 달라지게 됩니다.

1.3.2 넓이와 높이, 여백과 테두리

위 그림의 속성들을 합해 BOX 속성 이라고 합니다. 이 속성들 중에서 width와 height 속성은 단어 그대로 가로와 세로의 길이를 의미합니다. margin과 padding은 여백의 크기를 의미하고, bording은 테두리를 나타냅니다. 각 속성은 크기(사이즈)를 적어주고, 단위를 적어주면 됩니다. 자세한 설명은 아래 예제를 통해서 설명하겠습니다.

CODE


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body { font-size: 30px; }
			p:nth-child(1) { font-size: 100%;  }
			p:nth-child(2) { font-size: 0.5em; }
			p:nth-child(3) { font-size: 50%;   }
			div:nth-child(4) {
				width: 50%;
				height: 100px;
				background-color: #FFD9EC;
				font-size: 50%;
			}
			div:nth-child(5) {
				width: 30%;
				height: 150px;
				background-color: #E3C4FF;
				font-size: 50%;
			}
			</style>
		</head>
		<body>
				<!-- 각 p별 속성을 지정한다. -->
				<p>이 번 예제에서는 width와 height의 속성에 대해서 알아본다.</p> <!-- 첫번째 p의 속성을 따른다. -->
				<p>1. width는 가로의 길이다.</p> <!-- 두번째 p의 속성을 따른다. -->
				<p>2. height는 세로의 길이이다.</p> <!-- 세번째 p의 속성을 따른다. -->
			<div>
				<!-- 첫번째 div의 속성을 따른다. -->
				<br/><br/> 가로 width는 50%이고, 세로 height는 100%이다.
			</div>
			<div>
				<!-- 두번째 div의 속성을 따른다. -->
				<br/><br/> 가로 width는 30%이고, 세로 heigth는 150px이다.
			</div>
		</body>
</html>

실행화면

첫번째 div의 width와 height는 각각 50%와 100px 입니다. 두번째 div의 width와 height는 각각 30%와 150px 입니다. 첫번째 div의 가로보다 두번째 div의 가로가 더 작은 것을 볼 수 있습니다. 또한 첫번째 div의 세로보다 두번째 div의 세로가 더 길어진 것을 확인할 수 있습니다.

margin 과 padding 속성

padding : 본문 내용과 border 사이의 여백 border : 선 (선의 굵기를 다양하게 지정할 수 있으며, 선을 그리지 않을 수도 있음) margin : border와 바깥과의 여백

'P-B-M' 의 순서로 기억하면 좋습니다. padding은 요소의 테두리 안쪽과 콘텐츠 사이의 공간을 확보하는 반면에, margin은 요소의 테두리 외부에 투명한 공간을 확보합니다.

이때 margin영역은 padding영역과는 달리 background-color 속성으로 설정된 배경색의 영향을 받지 않습니다. 또한 margin과 padding 모두 -top(상단 여백), -right(오른쪽 여백), -bottom(하단 여백), -left(왼쪽 여백)의 방식으로 각 영역의 크기를 방향별로 따로 설정할 수 있습니다.

💡

자유롭게 크기를 조정하며 다양하게 실습해보세요!

1.3.3 Color

HTML에서 색상 이름, RGB값, HEX값으로 색상을 지정할 수 있습니다. HTML 색상표 페이지에서(https://html-color-codes.info/Korean/) 여러 색상 값을 확인하실 수 있습니다.

색상 이름

브라우저는 140 가지 색상 이름을 지원합니다. 다른 표현방식에 비해 수가 제한적입니다.

※ 참고 - https://www.w3schools.com/colors/colors_names.asp

RGB값

빛의 3원색인 빨간색(Red), 초록색(Green), 파란색(Blue)를 혼합하여 색을 나타내는 방식.

RGB 값은 0 ~ 255의 값으로 표현됩니다.

CODE


<head>
  <title>Color-RGB</title>
  <style>
    .box {width: 200px; height: 100px;
    background-color: RGB(102, 205,170)}
  </style>
</head>
<body>
  <div class="box">box</div>
</body>

실행화면

3. HEX 값

HEX 값은 16진수 6자리 코드로 색상을 표현하는 방식입니다. 6자리 코드는 각각 2자리씩 빨간색, 녹색, 파란색에 대한 값을 표현합니다. 예를 들어 빨간색은 #FF0000, 보라색은 #800080으로 표현됩니다.


<head>
  <title>Color-HEX</title>
  <style>
    .box {width: 200px; height: 100px;
    background-color: #F08080; }
  </style>
</head>
<body>
  <div class="box">box</div>
</body>

실행화면