프론트

CSS 기초

hyeppyday 2025. 4. 29. 10:00

 

HTML에 대해 저번에 배웠으니 이젠 CSS에 대해 알아보도록 하겠다.

 

CSS(Cascading Style Sheets)는 웹사이트의 외관을 장식할 때 사용한다.

 

1. CSS 적용 방법

가장 기본적인 방법부터 소개하겠다.

 

1.1 CSS 파일을 읽어 들여 적용하기

".css"라는 확장자의 파일을 만든 후에 이를 HTML 파일에서 읽어 들여 적용하는 방법으로 CSS를 적용하는 방법이 있다. 이는 하나의 CSS 파일을 여러 HTML 파일에서 읽어 들여서 한 번에 관리할 수 있다. 수정이 필요한 경우에도 CSS 파일 하나만 수정하면 되므로 굉장히 편리하다.

 

HTML 파일의 <head> 내부에  <link> 태그를 사용해서 CSS 파일을 저장한다, rel 속성에 "stylesheet", href 속성에 CSS 파일을 지정하면 CSS 파일에 작성된 장식을 적용할 수 있다.

 

<!DOCTYPE html>
<html lang="ko">
 <head>
   <meta charset="UTF-8">
   <title>CSS 공부 기록</title>
   <meta name="description" content="안녕하세요">
   <link rel="stylesheet" href="style.css"> // 필수적
 </head>

<body>
    <h1>프론트</h1>
    <p>프론트 공부를 하자!</p>
</body>
</html>

 

 

1.2 HTML 파일의 <head> 내부에 <style> 태그를 넣어 지정하기

HTML 파일의 <head> 내부에 CSS를 작성하는 방법이다. 이전의 적용 방식과 다르게 다른 파일에 CSS가 적용되지 않는다. 특정 페이지만 디자인을 변경하고 싶은 경우 등에 사용한다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 공부 기록</title>
  <meta name="description" content="안녕하세요">
  <style>                              // CSS 코드를 HTML 코드 내에 작성
    h1 {color: #f00;}
    p {font-size: 18pz;}
  </style>
</head>

<body>
    <h1>프론트</h1>
    <p>프론트 공부를 하자!</p>
</body>
</html>

 

 

1.3 HTML 태그 내부에 style 속성 지정하기

HTML 태그에 직접 CSS를 작성하는 방법이다. 하나하나 태그에 지정하는 것이 번거롭고, 유지 보수도 어려워서 잘 사용하지는 않는다. 하지만 다른 지정 방법보다 CSS를 적용하는 우선순위가 높아서 CSS를 덮어씌우고 싶은 경우 등 일부 디자인만 변경하고 싶을 때 사용한다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 공부 기록</title>
  <meta name="description" content="안녕하세요">
</head>

<body>
    <h1 style="color: #f00;">프론트</h1>
    <p style="18pz;">프론트 공부를 하자!</p>
</body>
</html>

 

 

 

2. CSS 파일 만들기

다음과 같이 CSS 파일을 만들어 보자. 파일 이름은 style.css라 한다.

@charset "utf-8";
body {
    background-color: #fffeee;
}
h1 {
    color: #0bd;
}
p {
    font-size: 20px;
}

→ CSS 파일이 읽어들일 index.html 파일도 같은 위치에 저장해야 한다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 공부 기록</title>
  <meta name="description" content="안녕하세요">
  <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1> 프론트</h1>
    <p>프론트 공부를 하자!</p>
</body>
</html>

→ index.html 파일 내 코드

 

브라우저에서 실행할 시 다음과 같은 화면이 나온다.

 

3. CSS 기본 작성 방법

CSS는 선택자, 속성, 값이라고 부르는 3개의 요소를 조합해서 어떤 부분의 무엇을 어떻게 변경할 것인가를 지정한다.

예를 들어서 다음과 같은 코드가 있을 때 h1이 선택자, color가 속성, #0db가 값이다.

h1 {
    color: #0bd;
}

 

선택자로 어떤 것을 장식할 것인지 지정한다. HTML 태그의 이름, 클래스, ID 등을 사용해서 변경 대상을 작성한다. 선택지 뒤에는 속성과 값을 중괄호로 감싸 입력한다.

속성은 선택자로 지정한 부분의 무엇을 변경할지 작성한다. 예를 들어 문자색을 변경하고, 문자 크기를 변경하고, 배경 이미지를 추가하는 등이다. 속성과 값 사이에는 콜론(:)을 써서 구분한다.

값으로 외관을 어떻게 변경할지 작성한다. 어떤 색으로 문자색을 변경할 것인지, 배경에 이미지를 배치한다면 어떤 이미지를 배치할 것인가 등의 구체적인 내용을 지정한다. 여러개의 속성과 값을 지정할 때는 값 뒤에 세미콜론을 넣는다.

값에는 경우에 따라 단위를 뒤에 붙인다. (px, %, rem)

 

헷갈릴만한 작성 방법을 밑에 정리해두었다. 예시를 들어 쉽게 설명해보겠다.

3.1 여러 개의 선택자 지정하기

h1, p {color:red;}

 

여러 개의 선택자에 같은 장식을 지정할 때는 쉼표로 선택자를 구분해서 입력한다.

 

3.2 여러 개의 장식 지정하기

h1 {color:red; font-size:20px;}

 

1개의 선택자에 여러 개의 장식을 지정할 때는 값 뒤에 세미콜론을 추가해 속성을 구한다.

(속성을 하나만 입력할 때는 마지막에 세미콜론을 입력하지 않아도 된다.)

 

3.3 요소 내부의 요소 지정하기

예를 들어 <div> 태그 내부에 <p> 태그가 있다고 치자.

div p {
	color:red;
}

 

이렇게 여러 개의 선택자를 띄어쓰기로 구분하여 작성한다.

 

4. 문자와 문장 장식하기

 

4.1 font-size 속성

이는 문자의 크기를 변경하는 속성이다. 우선 주로 사용되는 방법의 표를 보여주겠다.

지정 방법 설명
숫자 숫자에 "px", "rem", "%" 등의 단위를 붙인다. (px는 절대 단위, rem, %는 상대 단위)
키워드 xx-small, x-small, small, medium, large, x-large, xx-large라는 7단계를 지정합니다. medium이 표준 크기이다.

 

절대 단위와 상대 단위에 대해 간략하게 설명하자면 예를 들어 퍼센트로 단위를 지정했을 경우에는 사용자 브라우저에 설정한 크기를 기준으로 상댓값을 지정할 수 있고, px로 지정하면 크기는 기준 크기와 관계없이 절댓값으로 설정할 수 있다.

 

본문의 적당한 문자의 크기는 14px ~ 18px 정도로 설정하는 것이 일반적이다.

 

4.2 font-family 속성

이는 폰트의 종류를 지정하는 속성이다. 지정한 폰트가 사용자의 컴퓨터에 없다면 웹 브라우저의 디폴트 폰트로 출력한다.

여러 폰트를 쉼표를 이용해 지정하는데, 앞쪽부터 사용자 컴퓨터에 있는 것을 찾아 폰트를 지정한다.

 

우리는 웹 폰트라는 기술을 사용해서 텍스트를 출력한다. 이를 활용하면 폰트 파일이 웹 서버에 있으므로 사용자가 별도로 설치하지 않아도 폰트를 출력할 수 있다.

 

1st. Google Fonts 웹 사이트에 들어가기
2nd. 사용하고 싶은 폰트 검색 후 선택하기 (SELECT THIS FONT를 클릭한다.)
3rd. Embed Font 부분에 적혀 있는 코드 복사 후 HTML 파일의 <head> 부분에 붙여넣기
4th. CSS 코드에 font-family 속성을 이용해 적용하기

 

4.3 font-weight 속성

이는 문자의 두께를 바꾸는 속성이다.

지정 방법 설명
숫자 1~1000 사이의 값
키워드 normal(표준), bold(두꺼운 글자), lighter(얇은 글자), bolder(많이 두꺼운 글자)

→ 두꺼운 글자와 얇은 글자를 지원하지 않는 폰트는 속성을 적용해도 변하지 않는다.

 

4.4 line-height 속성

줄 높이(행간)를 지정하는 속성이다. 줄 높이가 문자 크기보다 작으면 줄이 중첩되는 문제가 발생할 수 있으니 주의하자.

1.5 ~ 1.9 정도의 줄 간격을 추천한다.

 

4.5 text-align 속성

텍스트의 맞춤을 지정할 수 있다.

지정 방법 설명
left 왼쪽 맞춤
right 오른쪽 맞춤
center 가운데 맞춤
justify 양쪽 맞춤

 

 

5. 색 넣기

문자색과 배경색을 CSS로 지정할 때는 3가지 방법을 사용할 수 있다. 문자색을 지정하는 속성은 "color"이다.

배경에 색을 지정하는 속성은 "background-color" 속성이다. 페이지 전체 배경에 색을 지정할 때는 <body> 태그에 지정한다. 배경에 관해서는 좀 이따 다루겠다.

 

5.1 색상 코드 지정하기

색상 코드라고 부르는 6자리의 알파벳과 숫자를 지정하는 방법이다. 이는 해시(#)로 시작한다.
이는 16개의 문자 "0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f"를 사용하여 16진수로 구성한다. 0에 가까울수록 어두운 색이 되며, f와 가까워질수록 밝은색이 된다.

 

추가로 같은 숫자가 연속되는 경우에는 색상 코드를 3자리로 생략할 수 있다. 예를 들어 흰색을 나타내는 #ffffff는 #fff로 나타낼 수 있다.

 

5.2 RGB 값 지정하기

RGB란 빨강, 초록, 파랑을 의미한다. 예를 들어 rgb(255, 255, 255)가 흰색이다. 추가로 이 방법은 투명도 또한 나타낼 수 있다. 투명도는 rgba 형태로 작성한다. 투명도는 0 ~ 1의 값을 입력한다.

p {
	color: rgba(10, 130, 165, .5);
}

→ 예시 코드이다.

 

5.3 색상 이름으로 지정하기

말 그대로 빨간색이면 red, 파란색이면 blue 이런식으로 색을 지정하는 방법이다.

 

 

6. 배경 넣기

아까는 배경에 색을 채우는 방식을 알아봤다면 이번엔 그 외에 배경을 꾸미는 방법을 알아보겠다.

 

6.1 background-image 속성

배경에 이미지를 배치하는 속성이다.

지정 방법  설명
url 이미지 파일 지정
none 배경 이미지를 사용하지 않음

 

body {
	background-color: #f5f2e5;
	background-image: url(images/bg.png);
}

→ 배경 이미지를 제대로 읽어 들이지 못한 경우도 고려해 배경 이미지와 함께 비슷한 색상 조합의 배경 색상을 넣는 것도 좋다.

 

6.2 background-repeat 속성

CSS는 디폴트로 배경 이미지를 가로세로 방향으로 반복해 출력함으로써 화면을 꽉 채운다. 이를 어떤 방향으로 반복할지 정하는 속성이 이 속성이다.

 

지정 방법 설명
repeat 가로세로 방향 모두 반복해서 출력
repeat-x 가로 방향으로 반복해서 출력
repeat-y 세로 방향으로 반복해서 출력
no-repeat 반복하지 않음

 

 

body {
	background-image: url(images/bg.png);
	background-repeat: repeat-x;
}

 

6.3 background-size 속성

이미지의 크기를 지정한다.

값으로 앞에 소개했던 단위를 붙이거나 cover, contain을 붙인다.

cover를 사용하면 이미지의 가로세로 비율을 유지하면서 출력 영역을 채우도록 설정한다. 출력 영역보다 이미지가 큰 경우에는 이미지가 잘린다.

 

contain을 사용하면 아미지의 가로세로 비율을 유지한 상태로 이미지가 모두 출력되게 만든다. 출력 영역이 이미지보다 크면 여백이 발생한다.

 

6.4 background-position 속성

배경 이미지를 출력하는 시작 위치를 지정하는 속성이다. 기본적으로는 가로세로 방향 순서로 띄어씌기로 구분해서 작성한다. 디폴트는 왼쪽 위(left top)가 출력 시작 위치이다.

 

지정 방법 설명
숫자 숫자에 단위 붙인다.
키워드 가로 방향은 left, right, center
세로 방향은 top, center, bottom

 

6.5 background 속성

이를 사용하면 한번에 배경과 관련된 모든 값을 지정할 수 있다.

여기서 background-size의 값은 background-position 바로 뒤에 슬래시를 붙이고 넣어야한다.

background: #702dc url(image/pa.jpg) no-repeat conter bottom/cover;

→ 모든 속성을 작성할 필요는 없다. 작성하지 않은 속성은 디폴트 값으로 출력된다.

 

 

6.6 너비와 높이 지정하기

너비와 높이는 각각 width 속성, height 속성으로 요소의 크기를 지정할 수 있다. 직접 텍스트를 감싸는 <a> 태그와 <span> 태그 등 인라인 요소라고 불리는 태그는 너비와 높이를 지정해도 크기가 변경되지 않으니 주의하자.

 

CSS에서는 px, %, em 등의 단위를 사용해 요소의 크기를 지정할 수 있고, auto 값을 사용해 브라우저가 자동으로 너비나 높이를 계산하도록 할 수도 있다.

 

 

7. 여백 조정하기

여백 속성에는 margin과 padding이 있다. 요소를 사각형이라고 생각했을 때 margin은 해당 상자에서 다른 상자까지의 거리, padding은 상자의 가장자리에서 내용물까지의 거리입니다. 추가로 margin과 padding 사이의 테두리 선을 border라고 부른다.

 

margin과 padding을 사용할 때 둘다 top, bottom, left, right를 사용하여 각각의 여백을 지정할 수 있다. 또한 여러 방향으로 지정하고 싶을 시에 공백으로 구분해서 한 번에 지정해준다. 또한 위, 오른쪽, 아래, 왼쪽(시계 방향) 순서로 일괄 지정도 가능하다.

div {
	margin: 30px 0 0 100px;
	padding-top: 40px;
}

 

 

 8. 선 긋기

8번에 나오는 속성들은 모두 속성을 하나만 지정하면 모든 모서리에 적용된다. 따라서 "border" 속성을 제외하고는 모서리마다 다르게 적용하고 싶을 때에는 공백으로 구분해 위, 오른쪽, 아래, 왼쪽(시계 방향)의 순서로 지정한다. 이후에 설명하는 "border-style"의 초깃값은 none이므로 출력을 확인하려면 이를 함께 지정해야한다.

 

 

8.1 border-width 속성

선의 두께를 지정하는 속성이다.

 

지정 방법 설명
키워드 thin(얇은 선), medium(보통 두께), thick(두꺼운 선)
숫자 숫자에 px, rem, % 등의 단위를 붙인다.

 

 

8.2 border-style 속성

선의 장식 방법을 지정하는 속성이다.

지정 방법 설명
none 선을 출력하지 않음
solid 1개의 실선
double 2개의 실선
dashed 파선
dotted 점선
groove 입체적으로 파인 선
ridge 입체적으로 튀어나온 선
inset 감싼 부분이 안쪽으로 들어간 것처럼 보이는 선
outset 감싼 부분이 튀어나온 것처럼 보이는 선

 

p {
	border-width: 1px;
	border-style: double dotted solid ridge;
}

→ 위가 2개의 실선, 오른쪽이 점선, 아래가 실선, 왼쪽이 입체이다.

 

 

8.3 border-color 속성

선의 색을 지정하는 속성이다. 위에서 설명했던 색상 코드, 색상 이름, RGB 값으로 지정한다.

 

8.4 border 속성

"border-width", "border-style", "border-color"를 한꺼번에 지정할 수 있는 속성이다. "border"를 사용하면 모든 변에 적용되므로 한변에만 적용하고 싶을 땐 top, right, left, bottom을 같이 쓴다.

 

p {
	border-bottom: 2px solid #0bd;
}

div {
	border: 5px dotted tomato;
}

 

 

9. 리스트 장식하기

리스트 항목 앞에 출력되는 마커를 "리스트 마커"라고 부른다. 따로 지정하지 않으면 순서 없는 리스트는 검은색 점(disc), 순서 있는 리스트는 숫자(decimal)로 출력된다.

 

9.1 list-style-type 속성

이는 위에서 설명한 리스트 마커의 출력 방법을 변경하는 속성이다.

 

지정 방법 설명
none 리스트 마커를 출력하지 않음
disc 검은색 점
circle 흰색 점
square 검은색 사각형
decimal 숫자
decimal-leading-zero 앞에 0이 붙어있는 숫자
lower-roman 소문자 로마 숫자
upper-roman 대문자 로마 숫자
cjk-ideographic 한자 숫자
hangul 한글
lower-alpha, lower-latin 소문자 알파벳
upper-alpha, upper-latin 대문자 알파벳
lower-greek 소문자 그리스 문자

 

9.2 list-style-position 속성

리스트 마커의 위치를 항목을 기준으로 안쪽에 위치시킬지 바깥쪽에 위치시킬지 지정하는 속성이다.

 

지정 방법 설명
outside 박스의 바깥쪽에 출력
inside 박스의 안쪽에 출력

 

 

9.3 list-style-image 속성

이미지로 리스트 마커를 지정하는 속성이다.

ul {
	list-style-image: url(image/star.png);
}

 

9.4 list-style 속성

계속 이 글을 읽어봤다면 눈치챘을 것이다. 이 속성은 여태까지 나온 리스트의 속성을 한꺼번에 사용할 수 있는 속성이다.

 

ul {
	list-style: square url(image/star.png) outside;
}

→ 이미지 지정이 우선되며 작성 순서는 상관없다.

 

 

10. 클래스와 ID를 사용한 지정 방법

클래스(class)와 아이디(id)는 HTML 요소에 이름표를 붙여서, CSS나 JavaScript에서 쉽게 선택하고 다룰 수 있게 해주는 "이름표" 같은 것이다.

 

10.1 클래스(class)

여러 요소에 공통적으로 적용할 수 있는 이름이다. 하나의 클래스 이름은 여러 요소에 중복 사용 가능하다. CSS에서 .(점)을 붙여서 선택한다.

<p class="highlight">이 문장은 강조된 문장입니다.</p>
<div class="highlight">이 div도 강조!</div>

→ HTML 작성 코드

.highlight {
  color: red;
}

→ CSS 작성 코드

 

 

 

10.2 아이디(id)

딱 하나의 요소에만 사용(고유함)하며, 하나의 HTML 문서 안에서 같은 id 값을 가진 요소는 하나만 있어야한다. CSS에서 #(샵)을 붙여서 선택한다. ID는 페이지 내부에서 같은 ID 이름을 여러 번 사용 할 수 없다.

 

<h1 id="main-title">메인 제목</h1>

→ HTML 작성 코드

#main-title {
  font-size: 40px;
}

→ CSS 작성 코드

 

 

10.3 태그 이름과 함께 클래스오 ID를 사용하는 작성 방법

<h1 class="blue"> </h1>
<p class="blue"> </p>

→ HTML 작성 코드

p.blue {
	color: #0bd;
}

→ CSS 작성 코드

 

위와 같이 작성하면 "<p class="blue"> </p>" 부분만 파란색이 적용된다.

또한 한 태그에 여러 개의 ID와 클래스를 붙일 수 있다. 띄어쓰기로 구분해 작성한다.

 

 

11. 레이아웃 만들기

우리는 최신 환경에 맞추어 Flexbox를 사용할 예정이다.

 

Flexbox 레이아웃의 기본적인 작성 방법을 간단히 설명해 보겠다. Flex 컨테이너라고 부르는 부모 요소 내부에 Flex 아이템이라는 자식 요소를 넣어 HTML을 만든다. 이번엔 코드 전체로 보여주겠다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="ex.css">
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

→ HTML 작성 코드

.item {
    background: #0bd;
    color: #fff;
    margin: 10px;
    padding: 10px;
}

→ CSS 작성 코드

 

출력 화면

 

.container {
    display: flex;
}

→ CSS에 다음과 같이 추가하면

추가 시 출력화면

 

11.1 flex-direction 속성

자식 요소를 어느 방향으로 배치할지 지정하는 속성이다.

값 설명
row(초깃값) 자식 요소를 왼쪽에서 오른쪽으로 배치한다.
row-reverse 자식 요소를 오른쪽에서 왼쪽으로 배치한다.
column 자식 요소를 위에서 아래로 배치한다.
column-reverse 자식 요소를 아래에서 위로 배치한다.

 

.container {
    display: flex;
    flex-direction: row-reverse;
}

 

 

11.2 justify-content 속성

부모 요소에 빈 공간이 있는 경우 자식 요소의 수평 정렬 상태를 어떻게 할지 지정한다. 쉽게 말해 정렬이다.

값 설명
flex-start(초깃값) 줄의 시작 지점에 배치한다. 왼쪽 맞춤
flex-end 줄의 끝부분에 배치한다. 오른쪽 맞춤
center 가운데 맞춤
space-between 왼쪽과 오른쪽 끝에 있는 요소를 끝에 붙이고, 남은 부분들은 균등한 공간을 형성할 상태로 배치한다.
space-round 왼쪽과 오른쪽 끝에 있는 공간도 포함해서 균등한 여백을 형성한 상태로 배치한다.

 

 

11.3 CSS 그리드

CSS 그리드를 사용하려면 부모 요소와 자식 요소가 필요하다. 이는 그리드 컨테이너라고 부르는 부모 요소로 전체를 감싸고, 내부에 실제로 정렬할 그리그 아이템(자식 요소)을 배치한다. 추가로 그리드 아이템 사이의 여백을 그리드 갭이라고 부른다.

 

.container {
    display: grid; // 위에서는 flex였음
    gird-template-column: 200px 200px 200px;
    gap: 10px;
}

 

→ gird-template-column 속성을 추가해 각 그리드 아이템의 너비를 지정해서 수평 정렬하게 만들 수 있다.
→ gap 속성을 이용해 아이템 사이의 여백을 설정한다.