1.HTML 문서의 구조
HTML의 기본 문서 구조는 <!DOCTYPE html>, <html>, <head>, <title>, <body>로 기본적으로 구성되어 있다.
태그는 시작 태그(<태그>)와 종료 태그(</태그>)로 한 쌍으로 이룬다. ex) <head> ~ </head>
- <!DOCTYPE html> - HTML5 문서 선언하는 구문
- <html> - HTML5 문서의 시작과 종료를 알린다. 문서의 root 요소이며 언어(lang) 값을 설정할 수 있다.
- <head> - 웹 페이지 정보를 정의하는 공간이다. <title>, JS, CSS 등을 정의한다.
- <meta> - 문서의 메타데이터 표시, 자주 쓰이는 <meta charset="UTF-8">은 문자의 인코딩 설정
- <tilte> - 웹 브라우저의 제목 표시한다
- <body> - HTML5 문서의 본문을 작성하는 공간이다.
<!DOCTYPE html>
<html>
<head>
<title>웹페이지 제목</title>
<meta charset="UTF-8">
</head>
<body>
<h1>제목</h1>
<p>문단</p>
</body>
</html>2. 기본적인 HTML 태그들과 사용법
텍스트 태그
- <h1> ~ <h6> 태그 - 머리말 태그, 글자 크기는 h1>h2>h3>h4>h5>h6 순이다.
- <hr> - 수평선 삽입
- <p> - 문단 사이 구분하는 태그
- <b> & <strong> - 글꼴 굵게 하는 표시, <strong>은 중요한 텍스트 강조
- <I> & <em> - 글자 기울기, <em>은 중요한 텍스트 강조
- <br> - 줄 바꿈
- <ins> - 글자 밑줄 처리
- <del> - 그랒 취소선
하이퍼링크 태그
<a>
a 태그는 기본적으로 href 속성을 이용하여 URL을 입력한다.
href ="URL"을 지정하면 웹 사이트 열릴 곳을 target을 지정한다.
target의 속성값의 종류는 _blank(새 탭), _self(현재 탭), _parent(부모 탭), _top(웹 브라우저 전체 영역)이 있다.
ex) <a href="www.naver.com" target="_blank"> 네이버 </a>
목록 태그
- <ul> - 순서 있는 목록
- <ol> - 순서 없는 목록 ex) 동그라미, 세모, 색칠 안한 동그라미
- <dl> - 정의형 목록, <dt>태그로 정의할 목록, <dd>로 각 항목 정의 내용
- <li> - 목록의 내용 아이템, c언어에서 배열 같은 느낌
테이블(표) 태그
- <table> - 표 영역만 설정
- <thead> - 테이블 head 부분
- <tbody> - 테이블 본문
- <tfoot> - 테이블 가장 아래쪽
- <th> - 표 제목 정의
- <tr> - 표의 행(가로) 정의
- <td> - 표의 열(세로) 정의
- <rowspan> - 셀의 세로 병합 ex) <th rowspan="2"> 2줄 병합 </td>
- <colspan> - 셀의 가로 병합 ex) <td colspan="2"> 2칸 병합 </tr>
이미지 태그
- <img> - 이미지 파일 삽입, 여러 속성을 이용하여 이미지를 나타낸다
- src - 이미지 파일이 저장된 경로
- alt - 이미지 웹 브라우저 표시 못했을 경우 대체 텍스트
- width/height - 이미지 가로 세로 길이 pixel 단위로 지정, % 단위로 하면 웹브라우저 크기에 따라 조절
- style - 이미지의 크기, 위치 등 픽셀 단위로 지정
폼 태그
- <form> - 사용자 입력 태그
- <input> - 사용자 입력 공간을 만드는 태그
- type - radio, checkbox, text 등 입력을 무엇을 할지 정하는 속성
- name - 폼의 이름 지정
- value - 폼 태그이 기본 값 지정
- <label> - 입력 요소 앞이나 뒤에 표시하는 내용 구성
- <select> - 선택 목록으로 드롭다운 리스트 영역 생성
- <option> - 선택 목록의 특정 값을 지정
- <textarea> - 여러 줄을 입력하는 공간 제공
실전
사과와 바나나를 소개하는 페이지를 HTML 태그를 이용하여 제작하여 보자.
일단 두개의 페이지를 a태그로 연결하여 현재 탭으로 전환하는 방식으로 만들어보았다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>바나나 </title>
</head>
<body>
<h1>바나나! </h1>
<hr>
<h2>바나나에 대하여 </h2>
<p>바나나는 전 세계에서 가장 인기 있는 과일 중 하나입니다. 바나나는 건강에 보호적인 영향을 미칠 수 있는 필수 영양소를 함유하고 있습니다.</p>
<img src="banana.jpg" alt="이미지가 표시되지 않습니다.">
<h2>바나나의 건강 이점 </h2>
<ul>
<li>높은 섬유질 함량 </li>
<li>심장 건강 </li>
<li>소화 촉진 </li>
</ul>
<h2>맛있는 바나나 레시피 </h2>
<form>
<label for="email"> 이메일: </label><br>
<input type="email" id="email" name="email"> <br>
<label id="recipe"> 당신의 좋아하는 바나나 레시피를 공유해주세요 </label> <br>
<textarea id="recipe" name ="recipe" row="4" cols="50"> </textarea><br>
<input type="submit" vlaue="제출">
</form>
<p>
<a href = "apple.html" target="_self">사과</a>에 대하여
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 사과 </title>
</head>
<body>
<h1>사과!</h1>
<hr>
<h2>사과에 대하여 </h2>
<p>사과는 전 세계에서 널리 사랑받는 과일 중 하나입니다. 사과는 다양한 영양소를 함유하고 있어 건강에 좋습니다.</p>
<img src="apple.jpg" alt="이미지가 표시되지 않습니다.">
<h2>사과의 건강 이점 </h2>
<ul>
<li>높은 식이섬유 함량 </li>
<li>다양한 비타민과 미네랄 </li>
<li>항산화 물질 풍부 </li>
</ul>
<h2>맛있는 사과 레시피 </h2>
<form>
<label for="email"> 이메일: </label><br>
<input type="email" id="email" name="email"> <br>
<label id="recipe"> 당신의 좋아하는 사과 레시피를 공유해주세요 </label> <br>
<textarea id="recipe" name ="recipe" row="4" cols="50"> </textarea><br>
<input type="submit" vlaue="제출">
</form>
<p>
<a href = "banana.html" target="_self">바나나</a>에 대하여
</p>
</body>
</html>
'web hacking(Knockon Bootcamp)' 카테고리의 다른 글
| [2주차 TIL] KnockOn Bootcamp Apache (0) | 2024.12.15 |
|---|---|
| [2주차 TIL] KnockOn Bootcamp JavaScript (0) | 2024.12.13 |
| [1주차 TIL] KnockOn Bootcamp HTML, CSS, JS (1) | 2024.12.08 |
| [1주차 TIL] KnockOn Bootcamp, 프록시(Proxy) (0) | 2024.12.08 |
| [1주차 TIL] KnockOn Bootcamp, 패킷(Packet) (0) | 2024.12.07 |