CSS 기본 정리

이동근·2025년 2월 11일

목록 보기

1/6

CSS란

CSS(Cascading Style Sheets)는 HTML 또는 XML 문서의 스타일을 지정하는 데 사용되는 스타일 시트 언어입니다. CSS는 웹 페이지의 레이아웃, 색상, 폰트, 간격 등 시각적 요소를 정의하여 페이지의 디자인을 꾸미는 데 사용됩니다.

1. 문법

CSS문법은 선택자와 선언부로 구분됩니다.

선택자는 css 스타일을 적용할 html 태그(요소)를 선택하는 영역
선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역, {}중괄호 안에 넣습니다.

h1 {
	color : red;
}

h1 : 선택자 

{color : red;} 선언부

주석

css도 html처럼 코드에 주석을 남길 수 있습니다.

*/ 주석 내용 /*

CSS적용

1. 내부 스타일 시트

내부 스타일 시트는 HTML 파일 내부에 CSS 코드를 작성하는 방법입니다.

HTML에서 제공하는 태그 중에 style 태그를 이용하여 작성합니다.
보통 head 태그 안에 사용합니다. 하지만 성능상으로는 좋지 못한다는 단점이 있습니다.

<style>
	*/css 코드/*
</style>



<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내부 스타일 예시</title>
    <style>
        h1 {
            color: #333;        /* 글자 색 */
            text-align: center; /* 글자 중앙 정렬 */
        }
    </style>
</head>
<body>
    <h1>내부 스타일 시트 예시</h1>
</body>
</html>

2. 외부 스타일 시트

외부 스타일 시트는 CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS를 연결하는 방법입니다.

이 때 별도의 확장자는 css여야 합니다. 별도로 작성한 CSS파일과 HTML 문서를 연결할 때는 link 태그를 사용합니다.

<link rel = "stylesheet" href = "css 파일 경로">

rel 속성 :  링크된 리소스의 용도를 정의하는 필수 속성으로, 생략하면 브라우저가 리소스를 제대로 처리하지 못할 수 있습니다.

href 속성 : css 파일 경로를 통해 css 파일을 html 문서에 연결합니다.

3. 인라인 스타일 사용하기

인라인 스타일은 HTML 태그에서 사용할 수 있는 style 속성에 css 코드를 작성하는 방법입니다.

즉 태그에 직접 css 코드를 작성하는 방식이라서 css의 기본 문법 형식에서 선택자 부분이 필요 없습니다.

<태그 style = "css 코드"></태그>

<body>
	<h1 style = "color : red; font-szie : 24px;">인라인 스타일</h1>
</body>

CSS를 적용하는 방법 3가지 방법 중 외부 스타일 시트 방법을 가장 많이 사용합니다. 유지보수하기 편하고 성능적으로도 가장 좋기 때문입니다.

선택자 종류

1. 기본 선택자

1) 전체 선택자

전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로 *기호를 사용합니다.

* {
	*/CSS 코드/*
}

2) 요소(태그) 선택자

특정 HTML 요소를 선택하여 스타일을 적용합니다.

p {
    color: blue; /* 모든 <p> 요소의 텍스트 색을 파란색으로 설정 */
}

3) 클래스 선택자

HTML 요소에 지정된 class 속성을 기준으로 스타일을 적용합니다. .으로 시작합니다.

<P class = "aaa"> 클래스 선택자 </P>

.aaa {
    color: green; /* class가 'aaa'인 요소에 초록색 글자에 적용 */
}

4) 아이디 선택자

특정 아이디를 가진 요소를 선택하여 스타일을 적용합니다. #으로 시작합니다.

<p id = "bbb"> 아이이 선택자 </p>

#bbb {
    font-size: 24px; /* id가 'header'인 요소의 폰트 크기 설정 */
}

2. 조합 선택자

1) 자식 선택자

특정 요소의 직접적인 자식만 선택합니다. (>기호 사용)

div > p {
    color: red; /* <div>의 바로 아래 <p> 요소만 빨간색으로 */
}


<div>
    <p>이것은 빨간색 텍스트입니다.</p> <!-- 스타일 적용 -->
    <section>
        <p>이것은 빨간색이 아닙니다.</p> <!-- 스타일 적용되지 않음 -->
    </section>
</div>

2) 후손(하위) 선택자

특정 요소의 모든 후손(자식, 자식의 자식 등)을 선택합니다. (띄어쓰기로 사용)

div p {
    color: orange; /* 모든 <div> 안에 있는 <p> 요소에 스타일 적용 */
}

<div>
    <p>이것은 주황색 텍스트입니다.</p> <!-- 스타일 적용 -->
    <section>
        <p>이것도 주황색입니다.</p> <!-- 스타일 적용 -->
    </section>
</div>

3.속성 선택자

HTML 요소의 특정 속성, 속성값을 기준으로 선택합니다.

a[href] {
    color: purple; /* href 속성을 가진 모든 <a> 요소에 보라색 텍스트 적용 */
}

input[type="text"]{
	color : red;
}


<a href="https://example.com">링크</a> <!-- 스타일 적용 (속성 적용) -->
<a>스타일 적용되지 않음</a> <!-- href 속성이 없어서 스타일 미적용 -->

<input type = "text"> 글자가 빨간색입니다. <!-- 속성값으로 적용 -->

4. 의사 클래스 선택자 (가상 클래스 선택자)

1) 동적 의사 클래스 선택자

a:hover {
    color: red; /* 마우스가 링크 위에 올려졌을 때 텍스트 색을 빨간색으로 변경 */
}

a:active {
    color: red; /* 마우스가 링크를 클릭하고 있는 동안 텍스트 색을 빨간색으로 변경 */
}

2) 입력 요소 의사 클래스 선택자

input:focus {
    color: red; /* 입력 요소에 커서가 활성화 되면 텍스트 색을 빨간색으로 변경 */
}

input:checked {
    color: red; /* 체크박스가 표시되면 텍스트 색을 빨간색으로 변경 */
}

input:disabled {
    color: red; /* 상호작용 요소가 비활성화되면 텍스트 색을 빨간색으로 변경 */
}

input:enabled {
    color: red; /* 상호작용 요소가 활성화 되면 텍스트 색을 빨간색으로 변경 */
}

3. 구조적 의사 클래스 선택자

div p:first-child {
    font-weight: bold; /* <div> 안에서 첫 번째 <p> 요소에만 스타일 적용 */
}

<div>
    <p>첫 번째 <p> 요소는 굵은 글씨</p> <!-- 스타일 적용 -->
    <p>두 번째 <p> 요소는 일반 글씨</p> <!-- 스타일 적용되지 않음 -->
</div>

CSS의 필수 속성

1. CSS의 특징

CSS는 우선순위라는 개념이 있는데 그 전에 알아야하는 사실이 있습니다.
웹 브라우저에는 독자적으로 기본 스타일 시트가 내장되어 있습니다. 그렇기 때문에 웹 브라우저마다 각각 굵기, 크기 등 다르게 표현됩니다.

하지만 기본 스타일 시트는 사용자가 정의한 스타일 속성보다 우선순위가 높지 않습니다.
즉 사용자 정의 스타일 시트가 기본 스타일 시트 우선순위가 높습니다.

이 말은 사용자가 정의한 스타일 시트가 웹 브라우저에 적용된다는 의미를 말하고 웹 디자인을 사용자 맞춤형으로 변경할 수 있습니다.

조금 더 자세하게 이야기하자면 기본 스타일 시트가 적용되어 있는 웹 브라우저를 사용자가 정의한 스타일 시트로 덮었다라는 표현이 정확합니다. 그렇다면 우선 순위가 같은 경우에는 어떻게 될까요??

우선 순위가 같은 경우에는 마지막에 표현된 스타일이 적용됩니다. 예시를 보시죠!

p{color : red;}

p{color : green;}

p{color : blue;}

p 태그에 빨간,초록,파랑 순으로 적용되고 마지막에는 파란색으로 적용된다.

CSS에서 우선순위(또는 우선 적용 규칙)는 여러 스타일 규칙이 동일한 요소에 적용될 때, 어떤 스타일이 실제로 적용될지를 결정하는 규칙입니다. 스타일이 충돌하는 경우, 특정 규칙이 다른 규칙보다 우선적으로 적용됩니다. 이 우선순위는 CSS 선택자의 특이성(specificity)과 선택자의 종류, 스타일 시트의 위치 등에 따라 결정됩니다.

우선 순위 규칙

우선순위	설명
요소 선택자, 의사 요소	가장 낮은 우선순위
클래스, 속성 선택자, 의사 클래스	중간 우선순위
ID 선택자	매우 구체적이고 높은 우선순위
Inline 스타일	가장 높은 우선순위
`!important`	우선순위가 강제로 높아짐

2. 단위

1) 절대 단위

절대 단위란 화면 크기나 해상도와 관계없이 일정한 크기를 유지하는 단위입니다.

ex) px (픽셀) : css에서 사용할 수 있는 크기 단위 중 가장 기본 단위

2) 상대 단위

% : 부모 요소의 상대적인 크기를 가지는 상대 단위
ex) 자식의 요소의 크기 = 부모의 요소크기 * (자식 백분율/100)

em : 부모 요소의 글꼴 크기를 기준으로 하는 상대 단위
ex) 부모 요소 글꼴의 크기 16px -> 1em = 16px, 2em = 32px

rem : 루트 요소(html)의 글꼴 크기를 기준으로 상대 단위
ex) html 요소의 글꼴의 크기 16px -> 1rem = 16px, 3rem = 48px

vw : 뷰포트의 너비를 기준으로 한 상대 단위
ex) 1vw = 뷰포트 너비 1/100

vh : 뷰포트의 높이를 기준으로 한 상대 단위
ex) 1vh = 뷰포트 높이 1/100

상대 단위는 반응형 웹 디자인에서 유용하게 사용되며 다양한 화면 크기와 해상도에 따라 요소를 유동적으로 조절할 수 있다.

ex) padding, margin, font-size 등 다양한 속성에서 사용 가능

3. 색상 표기법

키워드 표기법

색상의 영문명을 속성값으로 사용하는 방법

h1 {
	color : red;
}

RGB 색상 표기법

Red(빨강), Green(초록), Blue(파랑) 세 가지 색상의 조합으로 색상을 표현하는 방법 (0~255)
추가로 알파값을 통해 색의 투명도를 의미 할 수 있습니다.

h2 {
	color : rgba(0,255,0,0.5)
}

HEX 표기법

HEX는 16진수로 색상을 표현하는 방법 (00~FF)
앞에 #이 붙으며, RGB 값을 16진수로 변환하여 사용한다.

h3 {
	color : #FF0000; 
}

텍스트 속성

1. font-family

font-family를 사용하면 글꼴을 지정할 수 있고 속성값으로 글꼴명을 적고 쉼표로 구분하며 1개 이상의 글꼴을 나열해 지정합니다.

font-fmaily : Batangche, "Times New Roman";

구글 폰트 : 다양한 글꼴을 무료로 제공하는 서비스 웹 페이지

2. font-size

텍스트의 크기를 변경하고 싶을 때 사용하는 속성

font-size : 15px;

3. font-weight

텍스트의 굵기를 지정하는데 사용하는 속성
속성값에는 숫자표기법(100~900), 키워드표기법(normal, bold, bolder) 사용합니다.

font-weight : 900px; 
font-weight : bold;

4. font-style

글꼴의스타일을 지정할 때 사용하는 속성
속성값은 normal, italic, oblique, inherit 4가지가 존재한다.

font-style : normal;

5. text-align

텍스트를 정렬할 때 사용하는 속성
속성값으로 left, center, right, justify 4가지가 존재한다.

text-align : center;

6. text-decoration

텍스트에 선을 긋기 위해 사용하는 속성 (a 태그에서 많이 사용된다.)
속성값으로 none, line-through, overline, underline 4가지가 존재한다.

text-decoration : none;

7. letter-spacing

글자사이의 간격을 조절할 때 사용하는 속성 (자간)

letter-spacing : normal;
letter-spacing : 15px;

8. line-height

텍스트의 한 줄의 높이를 지정할 때 사용하는 속성 (행간)
텍스트의 height값과 같으면 중앙에 위치

line-height : 10px;

박스 모델을 구성하는 속성

박스모델 : 모든 HTML 요소가 사각형의 박스로 둘러 쌓여 있다는 개념
박스형태의 요소들을 하나씩 원하는 곳에 배치하여 원하는 모양으로 만드는 것이 웹 페이지 만드는 방법입니다.

margin : 요소의 외부 여백을 의미합니다.
border : 요소의 테두리(경계선)를 의미합니다. (border: 테두리 굵기, 모양, 색상)
padding : 요소의 내부 여백을 의미합니다.
content : 요소의 내용을 의미합니다.

margin, border, padding 은 각 방향에 대한 독립적으로 존재합니다.

ex) margin-left, margin-right, margin-top, margin-bottom

.example {
  margin-top: 10px;    /* 위쪽에 10px 여백 */
  margin-right: 15px;  /* 오른쪽에 15px 여백 */
  margin-bottom: 20px; /* 아래쪽에 20px 여백 */
  margin-left: 25px;   /* 왼쪽에 25px 여백 */
}


.example {
  padding-top: 5px;    /* 위쪽에 5px 내부 여백 */
  padding-right: 10px; /* 오른쪽에 10px 내부 여백 */
  padding-bottom: 15px; /* 아래쪽에 15px 내부 여백 */
  padding-left: 20px;   /* 왼쪽에 20px 내부 여백 */
}


.example {
  border-top: 1px dashed red;    /* 위쪽에 1px 두께의 빨간 점선 테두리 */
  border-right: 2px dotted blue; /* 오른쪽에 2px 두께의 파란 점선 테두리 */
  border-bottom: 3px double green; /* 아래쪽에 3px 두께의 초록 이중선 테두리 */
  border-left: 4px groove yellow;  /* 왼쪽에 4px 두께의 노란 홈선 테두리 */
}

1. width, height

content 영역의 너비와 높이를 지정하는데 사용하는 속성

.example{
	width : 10px;
    height : 10px;
}

2. box-sizing

요소의 너비(width)와 높이(height)를 계산할 때 padding, border를 포함할지 말지의 여부를 결정하는 속성

속성값 : content-box, border-box (기본값 : content-box)

content-box : width,height 값이 content 영역까지 설정된다.
border-box : width,height 값이 border 영역까지 설정된다

.box{
	width : 100px;
    height : 100px;
    padding : 10px;
    border : 5px solid black;
    box-sizing : content-box
}

<!-- content-box 전체 너비 : 100px + 10px +10px +5px +5px = 130px -->

.box{
	width : 100px;
    height : 100px;
    padding : 10px;
    border : 5px solid black;
    box-sizing : border-box
}

<!-- border-box 전체 너비 : 100px-->

1. display 속성

display 속성은 요소가 웹 페이지에서 어떻게 표시되고 레이아웃에 참여할지를 결정하는 핵심적인 역할을 합니다.

주요 display 속성 값:

block: 요소를 블록 레벨 요소로 설정합니다. 이렇게 설정된 요소는 새로운 줄에서 시작하며, 가능한 한 전체 너비를 차지합니다. 예를 들어, <div>, <p>, <h1> 등의 요소가 기본적으로 block 속성을 가집니다. 


inline: 요소를 인라인 요소로 설정합니다. 이렇게 설정된 요소는 줄 바꿈 없이 다른 요소들과 같은 줄에 배치되며, 너비와 높이를 설정할 수 없습니다. 예를 들어, <span>, <a> 등의 요소가 기본적으로 inline 속성을 가집니다. 


inline-block: inline과 block의 특성을 모두 갖는 요소로 설정합니다. 이렇게 설정된 요소는 줄 바꿈 없이 다른 요소들과 같은 줄에 배치되며, 동시에 너비와 높이를 설정할 수 있습니다. 


none: 요소를 렌더링하지 않도록 설정합니다. 이렇게 설정된 요소는 화면에 표시되지 않으며, 레이아웃에서 공간을 차지하지 않습니다.

2.배경 속성 (Background)

1) background-color

요소의 배경에 색상을 넣는 속성 -> 속성값은 색상값을 사용

div{
	width : 100px;
    height : 100px;
    background-color : red ;
}

2) background-image

요소의 배경에 이미지를 넣는 속성 -> 속성값은 삽입할 이미지의 경로를 지정

div {
	width : 160px;
    height : 120px;
	background-image : url('이미지 경로');
}

3) background-repeat

배경 이미지의 반복 방식을 설정하는 CSS 속성
속성값 : no-repeat, repeat-x, repeat-y, repeat, round, space

no-repeat : 이미지를 반복하지 않습니다.
repeat-x : 이미지를 가로 방향으로 반복합니다.
repeat-y : 이미지를 세로 방향으로 반복합니다.
repeat : 이미지를 가로, 세로 방향으로 반복합니다.
round : 이미지를 반복하되 이미지가 요소에 딱 맞도록 크기를 조절합니다.
space : 이미지가 잘리지 않도록 반복합니다.

4) background-size

배경 이미지의 크기를 조정하는 CSS 속성
속성값 : auto, cover, contain, 직접 입력

div {
  background-image: url('image.jpg');
  background-size: cover; /* 요소를 덮도록 이미지 크기 조정 */
}

div {
  background-image: url('image.jpg');
  background-size: contain; /* 요소 안에 이미지가 완전히 들어가도록 크기 조정 */
}

div {
  background-image: url('image.jpg');
  background-size: 200px 300px; /* 이미지 크기를 200px x 300px로 설정 */
}

5) background-position

배경 이미지의 위치를 설정하는 CSS 속성
속성값 : left, center, right (가로 위치), top, center, bottom (세로 위치), 직접입력

div {
  background-image: url('image.jpg');
  background-position: top left;  /* 이미지가 요소의 왼쪽 위에 배치 */
}

div {
  background-image: url('image.jpg');
  background-position: center center;  /* 이미지가 요소의 중앙에 배치 */
}

div {
  background-image: url('image.jpg');
  background-position: 50% 50%;  /* 요소의 정확한 중앙에 배경 배치 */
}

6) background-attachment

배경 이미지가 스크롤될 때 어떻게 동작할지를 결정하는 CSS 속성
속성값 : local, scroll, fixed

div {
  background-image: url('image.jpg');
  background-attachment: scroll;  /* 배경 이미지가 스크롤에 따라 이동 */
}

div {
  background-image: url('image.jpg');
  background-attachment: fixed;  /* 배경 이미지는 고정되어 스크롤과 관계없음 */
}

div {
  background-image: url('image.jpg');
  background-attachment: local;  /* 요소 내부 스크롤에 맞춰 배경 이미지 이동 */
}

위치 속성

1. position 속성

기본흐름에 벗어나 좌표값에 따라 배치할 때 사용되는 속성
속성값 : relative, absoulute, fixed, sticky

releative : 요소의 기본위치를 기준으로 이동시킬수 있습니다. (top,bottom,left,right)으로 이동시킨다.

.box {
            width: 100px;
            height: 100px;
        }

        .red-box{
            background-color: red;
        }

        .green-box{
            background-color: green;
            position: relative;
            left: 100px;
            top : 100px;
        }

        .blue-box{
            background-color: blue;
        }

absolute : 부모 요소는 position 속성의 releative, absolute, fixed 중 하나를 사용하고 있어야하고 이것이 기준이 되어 이동시킬수 있습니다. (top,bottom,left,right)으로 이동시킨다.

 .box {
            width: 100px;
            height: 100px;
        }

        .red-box{
            background-color: red;
        }

        .green-box{
            background-color: green;
            position: absolute;
            left: 100px;
        }

        .blue-box{
            background-color: blue;
        }

2. z-index 속성

z-index : 요소의 쌓이는 순서를 제어하는 속성, z-index 값이 크면 그 요소가 더 위에 표시됩니다.

.orange-box{
        width: 100px;
        height: 100px;
        background-color: orange;
        position: relative;
        z-index: 10;
    }

    .purple-box{
        width: 90px;
        height: 90px;
        background-color: purple;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    
<body>
    <div class="box orange-box"></div>
    <div class="box purple-box"></div>
</body>

3. float 속성

float 속성 : 요소를 왼쪽이나 오른쪽으로 띄워서, 다른 콘텐츠가 그 주위를 흐르도록 만드는 속성입니다. 주로 텍스트나 이미지를 배치할 때 사용됩니다.

속성값 : left, right

css
img{
   float: left;
   margin-right: 1rem;
}
    
    
html        
<img src="../../img/night-3078326_180.jpg" alt="이미지">
<p style="color: black">
    lorem ipsum dolor sit amet consectetur lorem ipsum dolor sit amet consectetur lorem ipsum dolor sit amet consectetur lorem ipsum dolor sit amet consecteturlorem ipsum dolor sit amet consecteturlorem ipsum dolor sit amet consecteturlorem ipsum dolor sit amet consecteturlorem ipsum dolor sit amet consecteturlorem ipsum dolor sit amet consecteturlorem ipsum dolor sit amet consectetur
</p>

4. clear 속성

float 속성을 해제할 때 사용하는 속성입니다.
float 속성이 대상 요소의 다음 요소에 영향을 주기 때문에 다음 요소가 영향 받지 않기 위해서 clear 속성을 사용합니다.

속성값 : left, right, both

이동근

안녕하세요

다음 포스트