[HTML 시리즈 11-1] CSS와 HTML의 만남 — 디자인 입히기 시작
지금까지 만든 HTML 페이지는 구조적으로는 완벽했지만,어딘가 밋밋했죠?이유는 바로 “디자인”이 빠져 있었기 때문이에요.HTML이 웹페이지의 뼈대라면,CSS(Cascading Style Sheets)는 그 뼈대에 색과
ilsandaddy.tistory.com
5. 외부 스타일 시트 — 실무에서 가장 많이 쓰는 방식
1. VS Code에서 style.css 파일을 하나 새로 만듭니다.
2. 그 안에 다음과 같이 작성하세요.
결과:
이제 스타일을 수정하려면 HTML이 아니라 style.css만 수정하면 됩니다.
즉, 디자인과 구조가 완전히 분리되는 거죠.
6. CSS 선택자(Selector) 기초 이해
CSS는 “어떤 요소에 스타일을 적용할지”를 선택자(selector) 로 지정합니다.
| 태그 선택자 | 특정 태그 전체에 적용 | p { color: blue; } |
| 클래스 선택자 | 특정 그룹에만 적용 | .text { color: red; } |
| 아이디 선택자 | 단 하나의 요소에만 적용 | #title { font-size: 30px; } |
📘 예시:
💡 결과:
- 제목은 가운데 정렬된 파란색
- “CSS” 글자만 빨간색으로 강조 표시
7. 색상, 글꼴, 여백의 기본 스타일 속성
| color | 글자 색상 | color: blue; |
| background-color | 배경 색상 | background-color: lightgray; |
| font-size | 글자 크기 | font-size: 18px; |
| font-family | 글꼴 설정 | font-family: "Noto Sans KR", sans-serif; |
| text-align | 정렬 방식 | text-align: center; |
| margin | 바깥 여백 | margin: 20px; |
| padding | 안쪽 여백 | padding: 10px; |
| border | 테두리 | border: 1px solid #ccc; |
이 속성들만 익혀도 웹페이지의 전체 분위기를 바꿀 수 있습니다.
8. 실전 예제 — 나만의 소개 카드 꾸미기
이제 HTML + CSS를 함께 써서
예쁜 “자기소개 카드”를 만들어 봅시다
💡 결과 설명
- 배경은 부드러운 회색톤
- 흰색 카드가 가운데 정렬
- 그림자 효과까지 있어 깔끔한 인상
이게 바로 HTML과 CSS가 만나서 만들어내는 첫 번째 “디자인”이에요
9. 마무리 — HTML의 구조 + CSS의 감각
HTML → 내용과 구조
CSS → 색상, 폰트, 배치
둘이 만나야 진짜 웹이 완성됩니다.
이제 여러분은 단순한 코드 작성 단계를 넘어,
“콘텐츠를 시각적으로 표현할 수 있는 디자이너형 개발자”의 단계에 도달했어요
다음 시간에는
👉 [HTML 시리즈 12] 색상, 글꼴, 여백 스타일링 기본기
를 통해 CSS의 세부 속성 (color, font, margin, padding, border) 를
한눈에 정리하고 직접 꾸며볼 거예요.
있는 그대로의 나로 살아간다는 것 — 앙드레 지드의 『가을 낙엽』에서 배우는 진심의 용기
“It is better to be hated for what you are than to be loved for what you are not.” “당신이 아닌 사람으로 사랑받는 것보다,당신이 있는 그대로의 모습으로 미움받는 것이 낫다.”— André Gide, 『Autumn Leaves (가
ilsandaddy.tistory.com
진정한 사랑은 눈이 아닌 마음으로 본다 — 『어린 왕자』의 명언이 전하는 진실
“It is only with the heart that one can see rightly; what is essential is invisible to the eye.” “진정으로 중요한 것은 눈에 보이지 않는다. 오직 마음으로만 올바르게 볼 수 있다.”— Antoine de Saint-Exupéry, 『The Li
ilsandaddy.tistory.com
사랑은 말투로 드러난다 — Jess C. Scott의 『The Intern』이 전하는 진짜 따뜻함
“When someone loves you, the way they talk about you is different. You feel safe and comfortable.”“누군가 당신을 사랑할 때, 그 사람이 당신에 대해 말하는 방식이 달라집니다.그 안에서 당신은 안전하고, 편안함
ilsandaddy.tistory.com
[HTML 시리즈 1] HTML이란? 웹페이지의 뼈대를 만드는 언어
혹시 인터넷에서 보는 모든 웹사이트가 어떻게 만들어지는지 궁금했던 적 있나요?네이버, 구글, 유튜브, 그리고 여러분의 카페 페이지까지 —이 모든 사이트의 시작은 바로 HTML이라는 언어입니
ilsandaddy.tistory.com
'CODING' 카테고리의 다른 글
| React 와 Next.js 에 대하여 (0) | 2026.02.22 |
|---|---|
| [HTML 시리즈 12] 색상, 글꼴, 여백 스타일링 기본기 (0) | 2025.11.09 |
| [HTML 시리즈 11-1] CSS와 HTML의 만남 — 디자인 입히기 시작 (0) | 2025.10.31 |
| [HTML 시리즈 10] HTML 문서 구조 분석 (<head>와 <body>의 차이) (0) | 2025.10.23 |
| [HTML 시리즈 9] <div>와 <span>의 차이 완벽 이해 (0) | 2025.10.22 |
