반응형
처음 웹 개발을 배울 때 가장 많이 하는 고민이 있죠.
“어디서부터 시작해야 하지?”
그럴 땐 걱정하지 말고, 가장 기본인 HTML과 CSS부터 차근차근 시작해보세요.
이 글에서는 처음 웹페이지를 만드는 방법을 HTML과 CSS를 활용해 아주 쉽게 설명해드립니다.
처음 보는 분들도 따라 할 수 있게 구성했으니, 하나씩 차근차근 따라와 보세요! 😊
🧱 HTML이란 무엇인가요?
HTML은 웹페이지의 뼈대를 구성하는 언어입니다.
HTML은 HyperText Markup Language의 줄임말로, 문서 구조를 만들 때 사용되죠.
쉽게 말해 "이건 제목이다", "이건 문단이다", "여긴 이미지가 들어간다" 같은 정보를 컴퓨터에게 알려주는 역할을 해요.
📌 아래는 가장 기본적인 HTML 구조예요:
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>처음 만든 웹페이지입니다.</p>
</body>
</html>💡 설명
- <!DOCTYPE html>: HTML5 문서임을 알려줍니다.
- <html>: 전체 HTML 문서를 감쌉니다.
- <head>: 문서 정보(제목, 스타일 등)가 들어가는 공간입니다.
- <body>: 사용자에게 보여지는 실제 콘텐츠가 들어가는 영역입니다.
- <h1>: 제목을 표시합니다.
- <p>: 문단을 작성할 때 사용합니다.
🎨 CSS란 무엇인가요?
HTML로 구조를 만들었다면, 이제는 웹페이지를 더 보기 좋게 꾸며야겠죠?
CSS는 웹사이트의 스타일을 지정하는 언어입니다. 글씨 색깔, 배경 색, 글꼴, 위치 등을 지정할 수 있어요.
<style>
body {
background-color: #f0f0f0;
font-family: sans-serif;
text-align: center;
}
h1 {
color: #007BFF;
}
</style>📌 이렇게 하면
- 전체 배경이 연회색이 되고,
- 글꼴이 부드러운 산세리프로 바뀌며,
- 제목의 색이 파란색으로 바뀝니다!
💡 CSS는 <style> 태그로 감싸서 <head> 안에 넣을 수 있고, 나중에는 외부 .css 파일로도 관리할 수 있어요.
🧩 HTML + CSS를 함께 사용해보기
지금까지 배운 HTML 구조와 CSS 스타일을 합쳐서 하나의 완성된 웹페이지를 만들어볼까요?
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹페이지</title>
<style>
body {
background-color: #fff8e1;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #ff5722;
}
p {
color: #333;
}
</style>
</head>
<body>
<h1>안녕하세요!</h1>
<p>처음 만든 웹페이지입니다. 😊</p>
</body>
</html>📂 이 코드를 어떻게 사용하나요?
- 메모장을 열고 코드를 복사해 붙여넣기
- index.html로 저장
- 크롬, 엣지 같은 브라우저로 열기
→ 나만의 첫 웹페이지 완성! 🎉
🧠 정리해볼까요?
항목설명
| HTML | 웹페이지의 구조(제목, 문단, 이미지 등)를 담당 |
| CSS | 색상, 폰트, 정렬 등 디자인을 담당 |
| <h1>, <p> | 각각 제목과 문단을 표시하는 태그 |
| <style> | CSS 코드를 작성하는 공간 |
처음에는 다소 생소할 수 있지만, 직접 코드를 손으로 작성해보면 금방 익숙해져요.
웹 개발의 세계는 생각보다 훨씬 재미있고, 창의적이에요! 🙌
반응형
'웹 & 인터넷 기초' 카테고리의 다른 글
| 📱 반응형 웹 디자인 기초: 모바일에 최적화된 사이트 만들기 (1) | 2025.04.23 |
|---|---|
| React 입문 튜토리얼: ToDo 리스트 앱으로 배우는 기본 개념 (0) | 2025.04.21 |
| 토큰이냐 세션이냐, 그것이 인증의 문제로다! 🔐 인증 방식 쉽게 비교하기 (0) | 2025.04.12 |
| QR코드는 어떻게 정보를 담을까? (0) | 2025.04.10 |
| 클라우드 컴퓨팅, 도대체 어떻게 돌아가는 걸까? ☁️ (2) | 2025.04.08 |
