경제
HTML & CSS 기초 배우기: 내 손으로 웹사이트 만들기
happy rose
2025. 3. 14. 16:00
HTML과 CSS는 웹사이트를 만들기 위한 필수 언어입니다. 이 글에서는 HTML과 CSS의 기본 개념부터 간단한 웹페이지 제작까지 배워봅니다.
1. HTML과 CSS란?
HTML과 CSS는 웹 개발의 기초가 되는 언어입니다.
- HTML (HyperText Markup Language) – 웹페이지의 구조를 만드는 언어
- CSS (Cascading Style Sheets) – 웹페이지의 디자인과 스타일을 정하는 언어
2. HTML 기본 문법
HTML은 여러 태그(tag)로 구성됩니다. 아래는 가장 기본적인 HTML 문서 구조입니다.
<!DOCTYPE html>
<html>
<head>
<title>내 첫 번째 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 나의 첫 번째 웹페이지입니다.</p>
</body>
</html>
3. CSS 기본 문법
CSS는 HTML 요소의 스타일을 지정하는 역할을 합니다.
예를 들어, HTML 요소의 색상과 글꼴을 변경하려면 다음과 같이 작성합니다.
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
font-family: Arial, sans-serif;
}
4. HTML과 CSS를 활용한 간단한 웹페이지 만들기
이제 HTML과 CSS를 결합하여 간단한 웹페이지를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나만의 웹사이트</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
}
h1 {
color: #333366;
}
p {
color: #555;
}
</style>
</head>
<body>
<h1>내 첫 번째 웹페이지</h1>
<p>HTML과 CSS를 사용하여 만든 간단한 웹사이트입니다!</p>
</body>
</html>
5. 웹사이트를 로컬에서 실행하는 방법
웹사이트를 실행하려면 아래 단계를 따라보세요.
- 메모장 또는 VS Code 같은 텍스트 에디터를 엽니다.
- 위의 HTML 코드를 복사하여 붙여넣습니다.
index.html로 저장합니다.- 브라우저(Chrome, Edge 등)에서 파일을 열어 확인합니다.
6. 무료 웹 개발 학습 사이트 추천
더 깊이 배우고 싶다면 아래 웹사이트를 참고하세요.
- W3Schools - HTML & CSS 기초 학습
- MDN Web Docs - HTML & CSS 공식 문서
- CodeAcademy - 웹 개발 코딩 연습
7. 다음 단계는?
HTML과 CSS를 배웠다면 이제 더 발전된 기능을 추가할 차례입니다.
- 반응형 웹 디자인 배우기 (CSS Flexbox, Grid 활용)
- 자바스크립트(JavaScript)로 동적인 기능 추가
- 웹사이트를 실제 서버에 업로드하여 배포하기
결론
HTML과 CSS를 배우면 누구나 간단한 웹사이트를 만들 수 있습니다. 꾸준히 연습하면서 다양한 프로젝트를 만들어보세요!
다음 글에서는 "자바스크립트(JavaScript) 기초: 웹 개발을 위한 첫걸음"을 소개하겠습니다!