HTML & CSS로 간단한 웹페이지 만들기
웹 개발을 처음 시작하는 분들을 위해 HTML과 CSS를 이용해 간단한 웹페이지를 만들어보겠습니다. HTML은 웹페이지의 구조를 정의하는 언어이고, CSS는 스타일을 적용하여 디자인을 완성하는 역할을 합니다.
1. HTML 기본 구조
HTML 문서는 다음과 같은 기본 구조를 가지고 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 첫 번째 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 간단한 HTML 페이지입니다.</p>
</body>
</html>위 코드를 저장하고 브라우저에서 열면 "안녕하세요!"라는 제목과 함께 간단한 문장이 표시됩니다.
2. CSS를 이용한 스타일 적용
이제 CSS를 추가하여 웹페이지의 디자인을 개선해 보겠습니다.
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333366;
}
p {
color: #555;
font-size: 18px;
}
</style>위 스타일을 HTML 문서의 <head> 태그 안에 추가하면 배경색이 변경되고, 텍스트 색상과 크기가 조정됩니다.
3. 간단한 웹페이지 예제
이제 HTML과 CSS를 조합하여 간단한 웹페이지를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나의 첫 웹사이트</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
h1 {
color: #333366;
}
p {
color: #555;
font-size: 18px;
}
.button {
display: inline-block;
background-color: #333366;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>나의 첫 웹사이트</h1>
<p>HTML과 CSS를 사용하여 만든 간단한 웹페이지입니다.</p>
<a href="#" class="button">더 알아보기</a>
</body>
</html>위 코드를 브라우저에서 실행하면 깔끔한 디자인의 웹페이지가 표시되며, 버튼을 클릭하면 새로운 페이지로 이동하는 효과를 줄 수도 있습니다.
4. 추가 기능: 이미지와 링크 삽입
웹페이지에 이미지를 삽입하고 외부 링크를 추가하는 방법도 알아보겠습니다.
이미지 삽입
<img src="image.jpg" alt="예제 이미지" width="300">위 코드를 사용하면 웹페이지에 이미지를 삽입할 수 있습니다. src 속성에는 이미지 파일의 경로를 입력해야 합니다.
외부 링크 추가
<a href="https://www.google.com" target="_blank">구글로 이동</a>위 코드를 사용하면 클릭 시 새로운 탭에서 구글 사이트가 열립니다.
결론
이번 강의에서는 HTML과 CSS를 이용하여 간단한 웹페이지를 만드는 방법을 배웠습니다. 이를 바탕으로 직접 여러 가지 실험을 해보면서 나만의 웹사이트를 만들어 보세요!
'IT리뷰' 카테고리의 다른 글
| 비전공자를 위한 웹 개발 기초 가이드 (0) | 2025.01.30 |
|---|---|
| 2025년 인기 있는 프로그래밍 언어 TOP 5 (0) | 2025.01.30 |
| 비전공자를 위한 파이썬 기초 강의 (0) | 2025.01.30 |
| 스마트폰 발열 줄이는 방법 7가지 (아이폰 & 안드로이드) (0) | 2025.01.30 |
| 스마트폰 저장 공간 확보하는 방법 7가지 (아이폰 & 안드로이드) (0) | 2025.01.30 |
댓글