1. HTML 기본 개념 이해하기
- 웹페이지란 인터넷을 통해 정보를 공유하기 위해 만든 문서다.
- HTML(하이퍼텍스트 마크업 언어)는 웹페이지의 구조와 내용을 정의하는 언어다.
- HTML은 태그(tag)로 이루어져 있으며, 태그는 <> 꺽쇠로 감싸져 있다.
- 요소(element)는 시작 태그와 종료 태그 사이에 있는 부분을 의미한다.
- 속성(attribute)은 태그의 세부 정보를 정의하며, 시작 태그에 추가된다.
- 웹페이지 작성시 HTML은 텍스트 에디터를 이용하여 만들어진다.
2. HTML 문서 구조 작성하기
```html
웹 페이지의 제목
웹 페이지는 일종의 문서이며, 모든 HTML 파일은 로 시작해야 합니다.
기본적인 HTML 구조
- HTML 문서는 html 태그로 시작해서 html 태그로 끝납니다.
- head 태그 안에는 문서의 메타데이터를 넣고, body 태그 안에 실제 내용을 넣습니다.
- head 태그 내에서는 title, link, script 등의 태그를 사용할 수 있습니다.
- body 태그에는 화면에 나타낼 내용들을 작성하며, 텍스트, 이미지, 비디오 등을 포함할 수 있습니다.
예시
아래는 간단한 HTML 문서의 구조 예시입니다.
<!DOCTYPE html>
<html>
<head>
<title>나의 웹 페이지</title>
</head>
<body>
<h1>안녕, 세상아!</h1>
<p>첫 웹 페이지를 만들어 봅시다.</p>
</body>
</html>
3. 텍스트 요소 추가하기
```html
- 웹 페이지에 헤딩 텍스트 추가하기
- 내용을 강조할 때 강조 텍스트 사용하기
- 문단을 구분짓는 단락 요소 활용하기
4. 이미지 및 링크 삽입하기
" style="width:100%;" />
- 이미지를 삽입하려면 img 태그를 사용한다.
- src 속성에 이미지 파일의 경로를 지정한다.
- alt 속성으로 이미지의 대체 텍스트를 지정할 수 있다.
- 링크를 삽입하려면 a 태그를 사용한다.
- href 속성에 링크할 주소를 지정한다.
- 이미지를 링크로 만들고 싶다면 a 태그 안에 img 태그를 넣는다.
5. 목록과 표 작성하기
- HTML 태그 학습
- 웹 사이트 구조 만들기
- 이미지 및 링크 넣기
- 텍스트 포맷팅
| 목차 | 페이지 수 |
|---|---|
| 1. HTML 기초 | 10 |
| 2. CSS 스타일 | 15 |
| 3. JavaScript 소개 | 20 |
6. 폼 요소 만들기
- 제 텍스트 입력을 위한 입력 창은 <input type="text">로 만든다.
- 문장을 입력할 때 여러 줄을 입력할 수 있는 텍스트 영역은 <textarea> 태그를 사용하면 만들 수 있다.
- 예/아니오 등 둘 중 하나를 선택하는 라디오 버튼은 <input type="radio">로 생성한다.
- 여러 항목 중 여러 개를 선택 가능한 체크박스는 <input type="checkbox">로 만들어진다.
- 옵션 목록 중 하나를 선택할 수 있는 드롭다운 메뉴는 <select>와 <option> 태그로 만든다.
- 제출 버튼은 <input type="submit">을 이용해 만들 수 있다.
7. 웹 페이지 스타일링하기 (CSS 소개)
- CSS(Cascading Style Sheets)란 웹 페이지의 디자인과 레이아웃을 담당하는 언어로, HTML로 작성된 내용을 꾸며주는 역할을 한다.
- CSS를 사용하면 글자의 크기와 색상, 배경색, 여백과 간격 등을 세밀하게 조절할 수 있다.
- 웹 페이지에서 모든 요소는 CSS 속성에 의해 스타일링되며, CSS는 HTML 문서 내부에 포함될 수도, 외부 스타일 시트로 분리해서 적용될 수도 있다.
'일상정보집' 카테고리의 다른 글
| 투 믹스 웹툰 - 다양한 이야기가 만나는 인기 웹툰 소개 (0) | 2024.08.05 |
|---|---|
| 웹 사이트 만들기 - 초보자를 위한 단계별 가이드 (0) | 2024.08.05 |
| 유튜브 채널 분석 - 성공을 위한 핵심 전략 (0) | 2024.08.01 |
| 2022 추석 선물 세트 - 선물 추천 및 구매 가이드 (0) | 2024.08.01 |
| 붉은 오름 자연 휴양림 소개와 관광 정보 (0) | 2024.07.31 |