Front_End

프론트엔드 CSS 기초 완벽 정리 – 웹 디자인의 시작

fitcoder 2025. 3. 19. 14:05

프론트엔드를 공부할 때 HTML이 웹의 뼈대(Structure)를 만든다면,

CSS는 이 구조에 스타일(Style)을 입혀 색상, 폰트, 레이아웃, 애니메이션 등을 적용하는 역할을 합니다.

이번 글에서는 CSS의 개념, 기본 문법, 주요 속성, 스타일 적용 방식, 레이아웃 구성 방법, 반응형 디자인까지 CSS 기초를 자세히 정리해보겠습니다! 🚀

1. CSS란?

✅ CSS의 정의

CSS (Cascading Style Sheets, 종속형 스타일 시트)
→ HTML 요소에 디자인(색상, 크기, 위치, 여백 등)을 적용하는 스타일 언어

✔ 웹사이트의 디자인을 담당
✔ HTML과 분리하여 유지보수 편리
✔ 반응형 디자인을 적용할 수 있음

💡 CSS를 배워야 하는 이유?
👉 CSS 없이 HTML만 사용하면 웹사이트가 기본적인 흰 배경, 검은 글씨의 밋밋한 형태가 됨
👉 CSS를 적용하면 더 직관적이고, 보기 좋은 디자인을 만들 수 있음!

2. CSS 기본 문법 & 스타일 적용 방법

✅ 1) CSS를 적용하는 3가지 방법

CSS는 HTML 요소에 스타일을 적용하는 방식에 따라 3가지 방식이 있습니다.

✔ (1) 인라인 스타일 (Inline Style)

HTML 태그 내부에서 style 속성을 사용하여 적용하는 방식

 

<p style="color: blue; font-size: 18px;">이것은 파란색 글자입니다.</p>

 

💡 단점: HTML 코드가 복잡해지고, 유지보수가 어려움

✔ (2) 내부 스타일 (Internal Style)

HTML 문서 내 <style> 태그 안에서 CSS를 작성하는 방식

 
<head>
    <style> p { color: red; font-size: 18px; } </style>
</head>
<body>
    <p>이것은 빨간색 글자입니다.</p>
</body>

 

💡 단점: HTML과 CSS가 분리되지 않아 코드가 지저분할 수 있음

✔ (3) 외부 스타일 (External Style)

CSS 파일을 따로 만들어서 연결하는 방식 (가장 권장되는 방식)

 
styles.css
p { color: green; font-size: 20px; }
 
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>이것은 초록색 글자입니다.</p>
</body>
 

💡 장점: HTML과 CSS를 분리하여 유지보수 & 확장성이 좋음!

3. CSS 기본 선택자 (Selector)

CSS에서 특정 HTML 요소를 선택하여 스타일을 적용하려면 **선택자(Selector)**를 사용해야 합니다.

✅ 1) 주요 CSS 선택자 정리

 
선택자설명예제
  전체 선택자 (모든 요소에 스타일 적용) { margin: 0; padding: 0; }
태그 선택자 특정 HTML 태그를 선택 p { color: blue; }
.클래스 선택자 특정 클래스를 가진 요소 선택 .title { font-size: 24px; }
#아이디 선택자 특정 ID를 가진 요소 선택 #header { background: gray; }
자식 선택자 (>) 바로 아래 자식 요소만 선택 div > p { color: red; }
하위 선택자 (공백) 특정 요소 내부의 모든 하위 요소 선택 div p { color: red; }
그룹 선택자 (,) 여러 요소에 동일한 스타일 적용 h1, h2, h3 { font-weight: bold; }
👉 클래스(.) 선택자는 여러 요소에 적용 가능,
👉 ID(#) 선택자는 한 개의 요소에만 적용하는 것이 원칙!

4. CSS 주요 속성 (기본 스타일 적용하기)

CSS에서 가장 많이 사용하는 기본 속성을 정리해볼게요.

✅ 1) 텍스트 관련 속성

p { color: blue; (글자 색상)
     font-size: 16px; (글자 크기)
     font-weight: bold; (글자 굵기)
     text-align: center; (글자 정렬)
     line-height: 1.5; (줄 간격)
}

✅ 2) 박스 모델 (Box Model) – 여백 & 크기 조절

HTML 요소는 기본적으로 박스 모델(Box Model)로 구성됩니다.
크기(width, height), 안쪽 여백(padding), 테두리(border), 바깥 여백(margin)을 조정할 수 있습니다.

 
.box {
     width: 200px; (박스 가로 크기)
     height: 100px; (박스 세로 크기)
     padding: 20px; (안쪽 여백)
     border: 2px solid black; (테두리)
     margin: 10px; (바깥 여백)
}

✅ 3) 배경 & 테두리 스타일

.box {
     background-color: lightgray; (배경색)
     border: 3px dashed blue; (점선 테두리)
     border-radius: 10px; (테두리 둥글게)
}

✅ 4) 레이아웃 정렬 (display, position, flexbox)

CSS로 가로 배치, 정렬, 위치 조정을 할 때 가장 중요한 속성!

✔ (1) display 속성

요소의 배치 방식 지정

 
.block { display: block; } (블록 요소)
.inline { display: inline; } (인라인 요소)
.flex { display: flex; } (가로/세로 정렬)

✔ (2) position 속성

요소의 위치 지정

 
.absolute {
    position: absolute; top: 50px; left: 30px;
}
.fixed {
position: fixed; bottom: 0; right: 0;
}

✔ (3) flexbox 활용 (가운데 정렬)

.container {
display: flex; justify-content: center; (가로 정렬)
align-items: center; (세로 정렬)
height: 100vh; }

5. 반응형 웹 디자인 – 미디어 쿼리 (Media Query)

📌 반응형 디자인이란?
화면 크기에 따라 스타일을 변경하는 기법

 
@media (max-width: 768px) { body { background-color: lightblue; } }

💡 Tip: 브라우저 크기를 조절하면 배경색이 자동으로 변경됨!

🔥 결론: CSS를 배우면 웹 디자인이 가능해진다!

✔ CSS는 HTML을 꾸며주는 스타일 언어
✔ 선택자 & 속성을 이해하면 스타일링 가능
✔ 박스 모델 & 레이아웃을 활용하면 배치 조절 가능
✔ 반응형 웹을 적용하면 모바일에서도 최적화 가능!

👉 이제 CSS를 활용해 웹사이트 스타일을 직접 만들어보세요! 🚀💻