초보자를 위한 웹사이트 제작 가이드: HTML과 CSS로 간단한 웹페이지 만들기
웹사이트 제작은 생각보다 간단합니다. 이 글에서는 초보자도 따라 할 수 있도록 HTML과 CSS를 활용한 기본 웹사이트 제작 과정을 단계별로 자세히 설명하겠습니다. 코드 작성부터 결과물 확인까지 쉽게 따라오세요!
---
1. 웹사이트 제작의 기본 개념 이해하기
HTML: 웹페이지의 구조를 정의하는 언어입니다. 예를 들어, 제목, 문단, 이미지 등을 추가합니다.
CSS: 웹페이지의 디자인(색상, 글꼴, 레이아웃 등)을 꾸미는 언어입니다.
HTML과 CSS 역할 예시:
<!DOCTYPE html>
<html>
<head>
<title>내 첫 웹사이트</title>
<style>
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
color: gray;
}
</style>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 제가 만든 첫 번째 웹사이트입니다.</p>
</body>
</html>
위 코드를 실행하면 파란색 제목과 회색 문장이 포함된 간단한 웹페이지가 만들어집니다.
---
2. 준비물
1. 텍스트 에디터
추천: Visual Studio Code(무료)
Visual Studio Code 다운로드
기본 제공 에디터: Windows는 메모장, Mac은 TextEdit.
2. 웹 브라우저
Chrome, Edge, Firefox 등.
3. 폴더 만들기
MyWebsite라는 이름으로 폴더를 생성해 작업 파일들을 저장합니다.
---
3. 첫 번째 웹페이지 제작
1. HTML 파일 작성
텍스트 에디터를 열고 아래 코드를 입력합니다:
<!DOCTYPE html>
<html>
<head>
<title>내 블로그</title>
</head>
<body>
<h1>내 첫 블로그</h1>
<p>HTML로 만든 간단한 웹페이지입니다.</p>
</body>
</html>
파일 이름을 index.html로 저장합니다. (반드시 .html 확장자 사용)
2. 결과 확인
저장한 파일을 브라우저에서 열어보세요. 간단한 텍스트로 구성된 웹페이지를 볼 수 있습니다.
---
4. CSS로 디자인 추가하기
1. CSS 파일 작성
텍스트 에디터를 열고 아래 내용을 작성합니다:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
padding: 20px;
}
p {
color: #666;
text-align: center;
font-size: 18px;
}
파일 이름을 style.css로 저장합니다.
2. CSS 파일 연결
HTML 파일에 아래 코드를 <head> 안에 추가합니다:
<link rel="stylesheet" href="style.css">
3. 결과 확인
HTML 파일을 다시 브라우저에서 열어보면, CSS가 적용된 깔끔한 웹페이지를 볼 수 있습니다.
---
5. 이미지와 링크 추가하기
1. 이미지 추가
HTML 파일의 <body>에 아래 코드를 추가합니다:
<img src="example.jpg" alt="예시 이미지" style="width: 100%; max-width: 600px;">
example.jpg는 프로젝트 폴더에 저장된 이미지 파일이어야 합니다.
2. 링크 추가
아래 코드를 <p> 태그 아래에 추가합니다:
<a href="https://www.tistory.com" target="_blank">티스토리 방문하기</a>
---
6. 완성된 웹사이트의 코드 구조
최종적으로 작성된 index.html 파일은 다음과 같습니다:
<!DOCTYPE html>
<html>
<head>
<title>내 첫 웹사이트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>내 첫 블로그</h1>
<p>HTML과 CSS를 활용한 간단한 웹페이지입니다.</p>
<img src="example.jpg" alt="예시 이미지" style="width: 100%; max-width: 600px;">
<a href="https://www.tistory.com" target="_blank">티스토리 방문하기</a>
</body>
</html>
---
7. 웹사이트 업로드 (선택 사항)
1. GitHub Pages
무료로 웹사이트를 호스팅할 수 있는 서비스.
GitHub Pages 시작하기
2. 로컬 서버 사용
파일을 직접 열어도 작동하지만, Node.js나 Python을 설치하면 로컬 서버에서 더 안정적으로 실행할 수 있습니다.
---
8. 마무리
이 가이드만 따라 하면 누구나 간단한 웹페이지를 만들 수 있습니다.