처음 웹 개발을 배우는 사람이라면 반드시 거쳐야 하는 두 언어가 있다.
바로 HTML과 CSS다.
HTML은 웹의 ‘뼈대(구조)’를 만들고,
CSS는 그 뼈대에 ‘디자인(스타일)’을 입히는 역할을 한다.
이 글에서는 단 하루 만에 웹페이지 기본 구조를 이해하고 직접 만들어볼 수 있는 HTML·CSS 기초 가이드를 정리했다.
#HTML기초 #CSS기초 #웹개발입문
🧱 1. HTML이란? — 웹의 뼈대를 만드는 언어
HTML은 HyperText Markup Language의 약자로,
웹페이지의 구조를 정의하는 언어다.
쉽게 말해, HTML은 “무엇을 보여줄지”를 정한다.
예를 들어 제목, 본문, 이미지, 버튼 등이 모두 HTML 태그로 구성된다.
<h1>안녕하세요!</h1>
<p>이것은 나의 첫 번째 웹페이지입니다.</p>
<img src="profile.jpg" alt="프로필 사진">
- <h1> ~ <h6>: 제목(Heading)
- <p>: 문단(Paragraph)
- <img>: 이미지(Image)
- <a href="">: 링크(Link)
💡 Tip: HTML은 문법이 단순하지만, 태그의 의미(semantic) 를 이해하면 SEO(검색엔진최적화)에도 유리하다.
🎨 2. CSS란? — 웹에 디자인을 입히는 언어
CSS는 Cascading Style Sheets의 약자이며,
HTML 요소의 색상, 크기, 간격, 배치 등을 조정하는 역할을 한다.
h1 {
color: #3498db;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.6;
}
위 예시는 제목(h1)의 색상을 파란색으로 바꾸고,
문단(p)의 글자 크기와 줄 간격을 조정한 것이다.
⚙️ 3. HTML + CSS 함께 쓰기
HTML과 CSS는 항상 함께 쓰인다.
HTML은 구조를 만들고, CSS는 그 구조를 꾸며준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 첫 웹페이지</title>
<style>
body { background-color: #f5f5f5; font-family: Arial; }
h1 { color: #2ecc71; }
</style>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 나의 첫 웹페이지입니다.</p>
</body>
</html>
위 코드를 복사해 메모장에 붙여넣고 index.html로 저장한 뒤
브라우저에서 열면 바로 나만의 웹페이지가 완성된다.
🧩 4. 자주 쓰는 HTML 태그 정리
태그 역할 예시
| <h1> | 제목 | <h1>제목</h1> |
| <p> | 본문 문단 | <p>내용</p> |
| <a> | 하이퍼링크 | 구글 |
| <img> | 이미지 삽입 | <img src="image.jpg" alt="사진"> |
| <ul>, <li> | 목록 생성 | <ul><li>항목</li></ul> |
| <div> | 구역 구분(레이아웃용) | <div>내용</div> |
💅 5. 기본 CSS 속성 예시
속성 설명 예시
| color | 글자 색상 | color: red; |
| background-color | 배경색 | background-color: #eee; |
| font-size | 글자 크기 | font-size: 18px; |
| margin | 외부 여백 | margin: 10px; |
| padding | 내부 여백 | padding: 15px; |
| border | 테두리 | border: 1px solid black; |
💡 Tip: CSS는 순서대로 읽히기 때문에, 나중에 선언한 스타일이 우선 적용된다.
📱 6. HTML + CSS로 간단한 웹페이지 만들기
Welcome to My Page
이 페이지는 HTML과 CSS로 만들어졌습니다.
👉 브라우저에서 이 코드를 실행해보면,
글자색·배경·링크 스타일이 적용된 기본 웹페이지가 완성된다.
🔍 7. 마무리 — “기초를 이해하면, 디자인은 자연스럽게 따라온다”
HTML과 CSS는 단순하지만,
이 둘만 제대로 이해해도 웹의 80%는 이미 이해한 셈이다.
- HTML로 구조를 설계하고
- CSS로 감각을 더하고
- 이후에는 JavaScript로 기능을 추가한다.
처음엔 단순히 색상, 크기, 정렬만 조정해도 된다.
작은 변화를 직접 눈으로 보는 순간,
코딩이 ‘어렵다’는 생각은 사라질 것이다.
'frontend' 카테고리의 다른 글
| ⚙️ Next.js로 웹사이트 만드는 과정 한눈에 보기 (0) | 2025.11.04 |
|---|---|
| ⚔️ React vs Vue vs Svelte — 어떤 프레임워크를 배워야 할까? (0) | 2025.11.04 |