웹 개발을 시작하려면 HTML(하이퍼텍스트 마크업 언어)와 CSS(스타일시트)의 기본 개념을 익히는 것이 중요합니다. 이 가이드를 통해 초보자도 쉽게 웹사이트를 만들 수 있습니다.
이 가이드에서는 다음 내용을 다룹니다:
- HTML과 CSS의 기본 개념
- 기초 태그 및 스타일링 기법
- 실습 예제 및 코드 샘플
- 웹 개발을 위한 추가 리소스
1. HTML이란?
HTML은 웹페이지의 구조를 정의하는 마크업 언어입니다. 모든 웹페이지는 HTML로 구성되며, 텍스트, 이미지, 링크 등을 포함할 수 있습니다.
1.1 HTML 기본 구조
HTML 문서는 다음과 같은 기본 구조로 구성됩니다:
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 HTML을 배우는 첫 단계입니다.</p>
</body>
</html>
1.2 자주 사용하는 HTML 태그
<h1> ~ <h6>- 제목 태그<p>- 문단 태그<a href="URL">- 하이퍼링크<img src="image.jpg">- 이미지 삽입<ul>, <ol>, <li>- 목록 태그
2. CSS란?
CSS는 HTML 요소의 디자인과 레이아웃을 조정하는 스타일시트 언어입니다.
2.1 CSS의 기본 문법
selector {
property: value;
}
예제:
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
2.2 CSS 적용 방법
- 인라인 스타일: HTML 태그 내
style속성 사용 - 내부 스타일:
<style>태그 내에 CSS 코드 작성 - 외부 스타일: 별도의 CSS 파일을 링크하여 적용
3. HTML과 CSS를 이용한 간단한 웹페이지 만들기
아래의 코드를 활용해 간단한 웹페이지를 만들어 보세요:
<!DOCTYPE html>
<html>
<head>
<title>나의 웹사이트</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f8f9fa; }
h1 { color: #0056b3; text-align: center; }
p { font-size: 18px; text-align: center; }
</style>
</head>
<body>
<h1>환영합니다!</h1>
<p>이것은 HTML과 CSS를 사용한 예제입니다.</p>
</body>
</html>
4. 웹 개발을 위한 추가 리소스
더 많은 학습을 위해 아래 사이트를 참고하세요: