[Week 1 · 웹 구조 기초] Day 4 / 42
CSS 기초 강의｜선택자, Margin, Padding, Display 쉽게 배우기 🎨
- CSS란? 뼈대만 있는 HTML에 색을 칠하고 여백을 잡아주는 '인테리어 도면'입니다.
- 선택자: 수많은 요소 중 "어떤 녀석"을 꾸밀지 콕 집어내는 '이름표'입니다.
- Box Model: 웹의 모든 요소는 '네모난 액자'입니다. 이 액자의 안팎 여백을 다루는 게 레이아웃의 전부입니다.
1. CSS가 HTML과 연결되는 방식
🏠 비유로 이해하기: 건물과 인테리어 도면
건물(HTML)을 다 지었다고 끝이 아닙니다. 예쁘게 꾸미려면 인테리어 업자에게 "이 도면(CSS)대로 칠해주세요!"라고 도면을 건네주어야 합니다. 그 도면을 건네주는 '연결 고리' 역할이 바로 <link> 태그입니다.HTML 파일 안에 아래처럼 <link> 태그를 한 줄 적어두면, 브라우저가 "아, 이 HTML은 저 CSS 파일을 보고 꾸미면 되는구나!" 하고 알아차립니다.
HTML 코드
<!-- HTML의 머리(<head>) 부분에 넣어서 CSS 도면을 불러옵니다 --> <link rel="stylesheet" href="./style.css">
📌 티스토리에서는 CSS를 어디에 넣나요?
티스토리는 우리가 직접
경로: 블로그 관리자 👉 꾸미기 → 스킨편집 → HTML 편집 → CSS 탭
이 CSS 탭의 맨 아래 빈 공간에 여러분이 짠 코드를 복사해서 붙여넣기만 하면 곧바로 내 블로그 디자인이 바뀝니다!
티스토리는 우리가 직접
<link> 태그를 쓸 필요 없이 이미 다 연결해 두었습니다.경로: 블로그 관리자 👉 꾸미기 → 스킨편집 → HTML 편집 → CSS 탭
이 CSS 탭의 맨 아래 빈 공간에 여러분이 짠 코드를 복사해서 붙여넣기만 하면 곧바로 내 블로그 디자인이 바뀝니다!
2. 대상 콕 집어내기: 선택자(Selector) 3대장
🗣️ 비유로 이해하기: 운동장에서 학생들 부르기
명령(스타일)을 내리려면 "누구한테" 내릴지 정확히 불러야겠죠?- 태그 (학년): "1학년들(p) 전부 파란 체육복 입어!" (범위가 가장 넓음)
- 클래스 (동아리): "축구부(.soccer)만 노란 조끼 입어!" (특정 그룹 묶기)
- 아이디 (학번): "1번 학생(#student1)만 빨간 모자 써!" (단 한 명만 지정)
① 태그 (Tag)
p, div, a처럼 태그 이름을 그대로 적습니다. 범위가 너무 커서 주로 블로그 전체의 글씨체나 기본 색상을 정할 때만 씁니다.
p { color: black; }② 클래스 (Class)
이름 앞에 점(.)을 붙입니다. 티스토리 글상자, 버튼 등 비슷하게 생긴 것들을 묶어서 디자인할 때 가장 많이 씁니다. (실무 사용률 90%)
.btn { color: blue; }③ 아이디 (ID)
이름 앞에 우물정(#)을 붙입니다. 한 페이지에 딱 하나만 있어야 합니다. 주로 헤더, 푸터 같은 큼직한 구역을 통째로 잡을 때 씁니다.
#header { color: red; }🎯 CSS 힘의 크기 (우선순위)
좁고 구체적으로 부를수록 힘이 더 셉니다.
태그 < 클래스 < ID 순으로 힘이 세기 때문에, 똑같은 곳에 색칠을 지시하면 힘이 센 ID의 색상으로 덮어씌워집니다.
좁고 구체적으로 부를수록 힘이 더 셉니다.
태그 < 클래스 < ID 순으로 힘이 세기 때문에, 똑같은 곳에 색칠을 지시하면 힘이 센 ID의 색상으로 덮어씌워집니다.
⚠️ 티스토리 실전 팁: 안 바뀐다고 !important 남발 금지
내 맘대로 디자인이 안 바뀐다고 무적 치트키인
내 맘대로 디자인이 안 바뀐다고 무적 치트키인
color: red !important;를 자꾸 쓰면 나중에 디자인이 꼬여서 수정이 아예 불가능해집니다. 안 바뀐다면 우선순위에서 밀린 것이므로 대상을 더 구체적으로 지목(계층 선택자)해야 합니다. (아래 7번 참고)3. 초보자 1위 실수: Padding vs Margin (박스 모델)
🖼️ 비유로 이해하기: 벽에 걸린 '액자'
웹사이트의 모든 글자, 이미지, 버튼은 눈에 보이지 않는 네모난 액자 안에 들어있습니다. 초보자는 액자 안쪽 여백과 바깥쪽 여백을 가장 많이 헷갈립니다.
- Content (사진): 액자 안에 들어갈 실제 사진이나 글자입니다.
- Padding (사진과 틀 사이의 여백): 사진을 돋보이게 하려고 사진과 나무틀 사이에 두는 하얀색 여백(매트)입니다. (액자 안쪽 공간)
- Border (나무 틀): 액자를 두르고 있는 단단한 테두리입니다.
- Margin (벽에 걸린 액자 사이의 간격): 벽에 여러 액자를 걸 때, 내 액자와 옆 액자가 떨어져 있는 거리입니다. (액자 바깥 공간)
Margin (옆 액자와의 거리)
Border (액자 테두리) Padding (안쪽 여백)
Content (실제 사진/글자)
💡 초보자 필수 암기: 상자(버튼)를 뚱뚱하게 만들려면 Padding! 상자(버튼)를 남과 띄워놓으려면 Margin!
⚠️ 나중에 반드시 만나게 될 함정: Margin 겹침 (Collapse)
위 액자가
위 액자가
margin-bottom: 50px;을 가지고, 아래 액자가 margin-top: 50px;을 가지면 총 100px이 떨어질 것 같죠? 아닙니다! 위아래 마진이 만나면 더 큰 값 하나(50px)로 겹쳐버립니다. "어? 왜 간격이 내가 더한 것만큼 안 벌어지지?" 할 때 이 현상을 의심하세요.4. 삽질 방지 치트키: box-sizing
📏 비유로 이해하기: 30cm짜리 수납장 사기
방 구석에 가로 30cm짜리 빈 공간이 있어서 딱 맞는 30cm짜리 수납장을 주문했습니다. 그런데 배송 온 걸 보니 수납장 나무판자 두께가 양옆으로 2cm씩 튀어나와서, 실제 크기가 34cm가 되어버렸습니다. 방에 안 들어가겠죠?브라우저도 똑같습니다. "가로 300px 박스 만들어줘" 하면, 브라우저는 안에 들어가는 물건(Content)만 300px로 맞추고, 여백(Padding)과 테두리(Border) 두께는 그 밖으로 살을 덧붙여 박스를 뚱뚱하게 만들어 버립니다. 그래서 웹사이트 레이아웃이 다 깨지는 겁니다.
우리가 상식적으로 생각하는 크기, 즉 "테두리 두께까지 몽땅 합쳐서 딱 300px로 만들어!"라고 브라우저에게 명령하는 코드가 바로 box-sizing: border-box; 입니다.
CSS 예제
/* CSS 파일 최상단에 항상 넣는 필수 초기화(Reset) 코드 */ *, *::before, *::after { box-sizing: border-box; /* 테두리까지 합쳐서 크기를 계산하라는 선언! */ } body { margin: 0; /* 브라우저가 몰래 넣어두는 기본 바깥 여백 없애기 */ padding: 0; }
☕ 여기까지 이해하셨다면 웹 디자인의 가장 큰 고비를 넘긴 겁니다! 기지개 한번 켜고 갈까요?
5. 왜 크기가 안 먹히지? (Display 개념)
"폭을 300px로 줬는데 왜 안 변하지?", "왜 위아래로 간격이 안 떨어지지?" 입문자들이 하루 종일 머리를 쥐어뜯는 원인 1순위는 바로 태그가 가진 '성격(Display)'을 몰라서입니다.
💡 핵심 비유: Block은 '무조건 혼자 앉는 독방'이고, Inline은 '다닥다닥 붙어 앉는 합석'입니다.
| 성격 (Display) | 특징 비유 | 크기/여백 조절 |
|---|---|---|
| Block (블록) | 독방 VIP석. 자기 내용물이 작아도 무조건 가로 한 줄을 통째로 혼자 씁니다. (예: div, p) | ✅ 너비(width), 상하좌우 여백(margin) 모두 맘대로 조절 가능 |
| Inline (인라인) | 일반 합석. 딱 자기 글자 크기만큼만 자리를 차지하고, 옆에 다른 애가 와도 나란히 붙어 앉습니다. (예: span, a) | ❌ 너비 조절 불가능! 위아래 여백(margin)도 무시됨! |
| Inline-block | 혼종. 옆 사람과 나란히 붙어 앉으면서도(Inline 특징), 내 마음대로 덩치(크기)는 키울 수 있는(Block 특징) 성격입니다. | ✅ 옆에 나란히 서면서 + 크기 조절도 다 됨 |
❓ 인터넷에서 찾은 코드를 넣었는데 크기가 안 커져요!
초보자가 가장 많이 하는 질문입니다. 링크를 거는 <a> 태그나 글자색을 바꾸는 <span> 태그에 아무리 너비(width)와 위 여백(margin-top)을 줘봐야 아무 일도 일어나지 않습니다. 태생이 '합석(Inline)'이라서 그렇습니다.
해결 코드
span { /* ❌ Inline 성격이라 무시당하는 코드 */ width: 300px; margin-top: 50px; /* ✅ 해결: 성격을 바꿔주면 무시당하던 코드가 즉시 적용됨! */ display: inline-block; }
6. 실전 필수: 가운데 정렬 3가지 패턴
가운데 정렬은 상황(어떤 태그 성격인지)에 따라 쓰는 문법이 전혀 다릅니다. 이 3가지만 기계적으로 외워두세요.
CSS 예제
/* 1. 박스(Block 요소) 자체를 통째로 가운데로 보낼 때 */ .box { width: 300px; /* 너비가 정해져 있어야 함 */ margin: 0 auto; /* 좌우 여백을 반반씩 자동으로 남기라는 뜻 = 가운데 정렬 */ } /* 2. 글자나 작은 요소(Inline 요소)를 가운데로 보낼 때 */ .text-area { text-align: center; } /* 3. 요즘 가장 많이 쓰는 '완벽한 상하좌우' 중앙 정렬 (Day 5 예고편) */ .parent { display: flex; justify-content: center; /* 가로 중앙 */ align-items: center; /* 세로 중앙 */ }
7. 티스토리 정밀 타겟팅: 계층 선택자
🔍 비유로 이해하기: 주소 좁혀가기
"123번지"라고만 부르면 전국에 있는 수많은 123번지 중 어디인지 모릅니다. "서울시 > 강남구 > 역삼동 > 123번지"처럼 부모부터 좁혀가면서 대상을 명확히 찍어주는 기술입니다. 티스토리 스킨의 기존 디자인을 이기려면 이렇게 구체적으로 불러야 합니다.CSS 예제
/* 공백(띄어쓰기) = "~안에 있는 모든 자손" */ .sidebar p { color: #333333; /* 사이드바 안에 있는 모든 p태그의 색을 바꿔라 */ } /* 꺾쇠(>) = "~바로 밑에 있는 자식만" */ .menu > li { font-size: 16px; /* 메뉴 바로 아래에 있는 1차 항목만 바꿔라 (더 깊은 곳은 무시) */ }
8. 오늘의 실습: F12 확인 및 복붙 실습
1 내 티스토리 블로그를 열고 F12(개발자 도구)를 누릅니다.
2 좌측 상단의 커서(↖) 아이콘을 클릭하고, 디자인을 바꾸고 싶은 곳(예: 글 제목)을 클릭합니다.
3 오른쪽 Styles 패널 맨 아래로 스크롤을 내려 네모난 박스 모델(Margin, Padding) 그림을 확인합니다.
💻 3분 복붙 실습: 내 블로그에 직접 넣어보기
블로그 관리자 → 스킨편집 → HTML 편집 → CSS 탭 맨 아래에 아래 코드를 그대로 복사해서 붙여넣고 '적용'을 눌러보세요.
CSS 예제
.practice-card { background: white; padding: 24px; margin-bottom: 20px; border: 1px solid #e2e8f0; border-radius: 12px; }
padding숫자를 50px로 바꿔보세요. 박스 안쪽이 뚱뚱해집니다.border-radius숫자를 50px로 바꿔보세요. 모서리가 둥글게 변합니다.
🛠️ 왜 내가 쓴 코드만 적용이 안 될까? (디버깅)
F12 창 오른쪽(Styles 패널)에 나타난 내 코드를 자세히 보세요.
F12 창 오른쪽(Styles 패널)에 나타난 내 코드를 자세히 보세요.
color: red;(가운데 줄이 쭉 그어져 있다) 👉 원래 있던 스킨 코드보다 내 코드의 '힘(우선순위)'이 약해서 졌다는 뜻입니다. 계층 선택자로 주소를 더 길게 적어주세요.- (내가 쓴 코드가 아예 안 보인다) 👉 클래스 이름 앞에 점(.)을 빼먹었거나 오타가 난 겁니다.
☑️ Day 4 완료 체크리스트
☐
선택자의 힘은 태그 < 클래스(.) < ID(#) 순서라는 걸 안다.
☐
박스 안쪽을 찌우는 건 Padding, 바깥을 띄우는 건 Margin임을 구분할 수 있다.
☐
box-sizing: border-box를 쓰면 상자 크기 맞추기가 훨씬 쉬워진다는 걸 설명할 수 있다.☐
inline 요소(합석)에는 크기나 상하여백을 줘봤자 무시당한다는 사실을 이해했다.
❓ 초보자가 가장 많이 하는 질문 (FAQ)
Q. CSS 코드를 바꿨는데 왜 제 블로그엔 적용이 안 돼요?
A. 4가지 중 하나일 확률이 99%입니다.
1. 캐시 문제: 브라우저가 옛날 디자인을 붙잡고 있습니다. (해결: 강력 새로고침 Ctrl+Shift+R)
2. 선택자 오타: 클래스 이름 앞의 점(.)을 빼먹었거나 스펠링을 틀렸습니다.
3. 우선순위 밀림: 기존 스킨의 CSS가 힘이 더 세서 내 명령이 먹히지 않았습니다. (해결: 계층을 더 길게 써보세요)
4. Display 성격: inline 요소에 크기나 위아래 여백을 주려 했습니다. (해결:
A. 4가지 중 하나일 확률이 99%입니다.
1. 캐시 문제: 브라우저가 옛날 디자인을 붙잡고 있습니다. (해결: 강력 새로고침 Ctrl+Shift+R)
2. 선택자 오타: 클래스 이름 앞의 점(.)을 빼먹었거나 스펠링을 틀렸습니다.
3. 우선순위 밀림: 기존 스킨의 CSS가 힘이 더 세서 내 명령이 먹히지 않았습니다. (해결: 계층을 더 길게 써보세요)
4. Display 성격: inline 요소에 크기나 위아래 여백을 주려 했습니다. (해결:
display: inline-block; 추가)'코딩 > 웹디자인' 카테고리의 다른 글
| AI를 이용한 티스토리 웹디자인 공부 - [DAY 3] HTML → Tistory 연결 (0) | 2026.04.23 |
|---|---|
| AI를 이용한 티스토리 웹디자인 공부 - [DAY 2] DOM 트리와 시맨틱 태그 (0) | 2026.04.20 |
| AI를 이용한 티스토리 웹디자인 공부 - [DAY 1] HTML 가이드 (0) | 2026.04.16 |