🎨 CSS 기초부터 시작하는 웹 스타일링 완전 정복｜초보자를 위한 스타일링 첫걸음
안녕하세요, 퍼블리셔 노미입니다!
지난 시간에는 HTML 기초 태그와 구조 잡는 법을 다뤘었죠? 오늘은 그 연장선으로 CSS(Cascading Style Sheets)에 대해 설명드릴게요.
웹페이지는 HTML만으로는 기능적일 수 있어도, 예쁘거나 사용자가 보기 좋진 않아요.
CSS는 웹페이지에 색을 입히고, 정렬하고, 반응형으로 꾸미는 핵심 언어입니다.
이 글을 읽고 나면 여러분도 "와, 나도 예쁜 웹페이지 만들 수 있겠는데?" 하는 자신감을 얻게 될 거예요 😊
📌 CSS란 무엇인가요?
CSS는 HTML로 구성된 구조에 스타일을 적용하는 언어입니다.
Cascading(계단식)이라는 이름 그대로, 우선순위와 계층 구조에 따라 스타일이 적용되는 게 특징입니다.
- HTML = 콘텐츠 구조
- CSS = 색, 크기, 배치 등 시각적 디자인
🧱 CSS를 사용하는 3가지 방법
1. 인라인 스타일
HTML 태그 내부에 직접 스타일을 작성
<p style="color: red;">빨간 문장입니다.</p>2. 내부 스타일 (Internal Style)
<head> 내부에 <style> 태그로 작성
<style>
p {
color: blue;
}
</style>3. 외부 스타일 (External Style)
가장 많이 쓰는 방식! CSS 파일을 따로 만들고 연결
<link rel="stylesheet" href="style.css">🔍 CSS 기본 문법 구조
CSS 문법은 선택자(Selector)와 속성(Property), 값(Value)으로 구성됩니다.
선택자 {
속성: 값;
}예시:
p {
color: black;
font-size: 16px;
}- 선택자: 어떤 요소에 적용할지
- 속성: 무엇을 꾸밀지 (ex. 색, 크기)
- 값: 어떤 값으로 적용할지
🎯 자주 쓰는 CSS 속성
텍스트 관련
color: 글자색;
font-size: 글자 크기;
font-weight: bold, normal 등;
text-align: left, center, right;박스 관련
width: 너비;
height: 높이;
padding: 안쪽 여백;
margin: 바깥 여백;
border: 테두리;배경 관련
background-color: 배경색;
background-image: 이미지배경;
background-size: cover, contain;정렬 및 위치
display: block, inline, flex;
position: static, relative, absolute, fixed;
top, left, right, bottom: 위치 조정;🖼️ 클래스와 아이디 활용하기
HTML 요소에 class나 id를 붙이면 CSS에서 선택해서 꾸미기 좋아요!
<p class="notice">알림 문구입니다</p>
.notice {
color: red;
font-weight: bold;
}.= 클래스 선택자 (여러 요소에 적용 가능)#= 아이디 선택자 (한 요소에만 적용)
💡 박스 모델(Box Model) 이해하기
모든 HTML 요소는 네모 상자(Box)로 구성되어 있어요.
이걸 박스 모델이라고 부르며, 꼭 이해해야 하는 핵심 개념입니다!
- Content: 내용
- Padding: 콘텐츠와 테두리 사이 여백
- Border: 테두리
- Margin: 바깥 여백 (다른 요소와 거리)
🎯 CSS 선택자 종류 정리
*: 모든 요소 선택p: p 태그 선택.box: 클래스 box 선택#main: 아이디 main 선택div > p: div 바로 아래 p 선택div p: div 안의 모든 p 선택a:hover: 마우스 오버 시 a
📱 반응형 웹을 위한 단위
- px: 고정 크기
- %: 부모 요소 기준
- em / rem: 글자 크기 기준
- vw / vh: 브라우저 너비·높이 기준
예시:
width: 100%;
font-size: 1.2rem;🧩 display: flex로 레이아웃 쉽게 만들기
CSS Flexbox는 요소들을 가로/세로로 정렬할 때 강력해요!
.container {
display: flex;
justify-content: center;
align-items: center;
}justify-content: 주축 방향 정렬 (가로)align-items: 교차축 방향 정렬 (세로)
🌈 CSS를 활용한 실전 예시
버튼 만들기
.btn {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
}카드 박스
.card {
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 20px;
border-radius: 10px;
background: #fff;
}🛠️ CSS 학습을 위한 팁
- 코드를 직접 써보고 결과를 확인해보세요
- 기초 속성을 반복해서 연습해보세요
- CodePen, JSFiddle 등 실습 툴 적극 활용
- MDN CSS 레퍼런스 자주 참고
📚 마무리하며
CSS는 여러분의 웹페이지에 생명력을 불어넣는 스타일링 언어입니다.
처음엔 생소하고 어렵지만, 꾸준히 익히면 정말 재밌고 응용도 넓어요.
다음 편에서는 반응형 웹 디자인 기초 또는 CSS Grid와 Flexbox 비교 같은 심화 주제로 이어갈게요!
#CSS기초 #웹디자인입문 #퍼블리셔노미 #스타일링첫걸음 #웹디자인배우기 #CSS선택자정리 #박스모델 #반응형웹 #HTMLCSS연동
'차근차근' 카테고리의 다른 글
| fetch API로 폼 데이터 전송하기｜JavaScript로 배우는 기본부터 실전까지 (0) | 2025.04.22 |
|---|---|
| JavaScript로 폼 유효성 검사하는 법｜기초 문법부터 실전 예제까지 (0) | 2025.04.21 |
| HTML 폼과 CSS로 만드는 실전 입력 폼 완전 정복｜회원가입부터 로그인까지 (0) | 2025.04.20 |
| 반응형 웹 디자인 완전 정복｜모바일부터 데스크탑까지 한 번에 대응하는 퍼블리싱 가이드 (0) | 2025.04.19 |
| HTML 기초 태그부터 구조 잡는 법｜완전 초보도 이해하는 웹페이지 기본 가이드 (0) | 2025.04.17 |
