웹 기초2 - HTML 기본 태그
웹 기초1에서는 웹사이트를 만들 때 필요한 기술인 HTML, CSS, JavaScript의 의미를 살펴보고,
그 중에서 특히 HTML에 대한 기초적인 부분들을 다루었다.
웹 기초2 에서는 HTML에 대한 기본적인 부분들에 대해 추가적으로 학습할 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>위의 코드는 HTML문서의 기본 구조이다.
vscode에서 !+enter을 누르면 자동적으로 생성되므로 굳이 외울 필요는 없다.
맨 윗줄부터 의미를 살펴보자면,
- <!DOCTYPE html>: HTML5라는 신조어로 문서를 선언하는 태그
- <html></html>: HTML문서의 시작과 끝을 의미하며, 모든 HTML태그 안쪽에 입력한다.
- <head></head>: 웹사이트의 간단한 요약 정보를 담는 영역, 웹사이트에서 노출되지 않는 정보
- 즉, 메타 데이터(데이터를 위한 데이터)를 포함하기 위한 태그
- title, style, link, script, meta에 대한 데이터
- <body></body>: 헤드와 달리 웹사이트에서 눈에 보이는 정보를 담는 영역, 웹사이트의 내용을 담는 곳
- <meta charset="UTF-8">: 모든 문자를 웹 브라우저에서 깨짐없이 표시하겠다는 의미
- 유니코드(문자) 인코딩 방식: UTF-8
- 유니코드: 여러 나라의 문자들을 표시할 수 있는 표준 코드
- 인코딩: 컴퓨터가 읽을 수 있ㄷ도록 변환해주는 것
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: 인터넷을 최신버전으로 실행
- <title></title>: 웹사이트 탭에 나타나는 제목을 적는 태그
<HTML 기본태그>
1. <h>태그: 제목/부제목을 입력할 때 사용
h1 ~ h6까지 존재하며, 숫자가 클수록 폰트 사이즈가 작아진다. → 즉, 숫자가 낮을수록 정보의 중요도가 높아짐
특히, <h1>은 가장 중요한 정보를 담기 때문에, 하나의 html문서에서 단 한 번만 사용된다.
웹 검색 엔진이 제일 먼저 검색하는 태그
2. <p>태그: 본문 내용을 표현할 때 사용(웹사이트의 중요 정보를 담음)
paragraph의 약자로, p태그를 사용하면 하나의 단락을 만들 수 있다.
+) 추가적으로 제공하는 본문 태그
- <br>: 줄바꿈 태그이며, 단일 태그이기 때문에 닫힌 태그를 적지 않아도 됨
- <hr>: 수평줄 태그 (수평줄이 생김)
+) 문자 꾸미기 태그
- <b>: 두껍게
- <strong>: 두껍게 + Semantic한 의미를 지님
- <i>: 이탤릭
- <em>: 강조 / 기울여서 표시됨
- <del>: 중간 줄 찍
- <u>: 밑줄
3. <a>태그(앵커 태그): 서로 다른 웹 페이지 사이를 이용하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용
<a href="http://www.naver.com" target="_blank">네이버</a>위의 예시와 같이 a태그 안에는 href속성과 target속성이 쓰인다.
href 속성은 이동하고자 하는 웹페이지의 주소를 지정
target 속성은 어떤 방식으로 이동할지를 결정한다.("_blank", "_self" 방식 존재)
target="_blank" → 새 탭을 띄어서 웹사이트로 이동
target="_self"(디폴트값) → 현재 탭에서 웹사이트로 이동
_self 가 디폴트 값으로 설정되어 있기 때문에, target속성을 생략할 경우, 현재 탭에서 해당 웹페이지로 이동하게 된다.
4. <img> 태그: 정보성을 갖고 있는 이미지를 삽입할 때 사용하는 태그, 단일 태그이기 때문에 닫힌 태그 존재X
<img src="https://movie-phinf.pstatic.net/20220616_274/1655363103107UB9nG_JPEG/movie_image.jpg?type=m203_290_2" alt="버즈 라이트이어" >
위의 예시와 같이 img태그 안에는 src속성과 alt속성이 쓰인다.
src 속성은 삽입할 이미지의 파일 경로를 담고 있는다.
alt 속성은 만약 웹사이트가 이미지를 출력하지 못했을 경우, 해당 이미지를 나타내는 텍스트 정보를 담아 대체하기 위함으로, 반드시 작성할 것을 권장함
※주의할 점※
삽입할 이미지의 파일명이 아닌 경로를 담을 것 → 특정 폴더 안에 있다면 폴더 경로를 정확히!
경로 지정 방식: 절대 경로 vs 상대 경로
절대경로: 가장 상단 파일 기준
상대경로: 현재 나의 위치(./) 기준 → 추천!
<!--절대경로: 가장 상단 경로 기준-->
<img src="/01_html/img/santa.jpg" alt="santa" width="200">
<br />
<!--상대경로: 현재 나의 위치(./) 기준--> <!--추천-->
<img src="./img/santa.jpg" alt="santa" width="200">
+)이미지의 크기를 결정하는 속성에는 width(너비), height(높이)가 있다.
5. 목록 태그
- <ul>: 순서가 없는 목록 태그/ 주로 메뉴 버튼을 만들 때 사용되는 태그
- 타입: square, circle, none, disc(default)
- <ol>: 순서가 있는 목록 태그이며, 이를 사용하면 목록 아이템 앞에 순서가 붙는다.
- 타입: 1, a, A, i, l → 말머리 기호 변경
- start = "원하는 번호" → 시작 번호 변경
- reversed → 역순으로 시작
- <li>: 위의 두 <ul>과<ol> 태그 안에서 목록요소를 쓸 때 사용하는 태그
<ul>
<li>사과</li> <!--<li>태그는 순서 없는 리스트의 아이템 리스트를 뜻함-->
<li>바나나<li>
<li>오렌지</li>
<li>포도</li>
<li>귤</li>
</ul>
<!--ol: ordered list 순서 있음-->
<ol>
<li>사과</li> <!--<li>태그는 순서 없는 리스트의 아이템 리스트를 뜻함-->
<li>바나나<li>
<li>오렌지</li>
<li>포도</li>
<li>귤</li>
</ol>
6. 정의 목록 태그: 특정 용어와 그 정의를 표현할 때 사용하는 태그
- <dl>: 정의 목록 태그
- <dt>: 정의 용어 태그
- <dd>: 정의 설명 태그
- <dl>태그 안에서 <dt>태그와 <dd>태그를 사용하여 정의 목록을 만든다.
<!--dl:용어를 설명하는 목록 생성, dt: 용어의 제목, dd:용어 설명-->
<dl>
<dt>HTML</dt>
<dd>HTML에 대한 설명1...</dd>
<dd>HTML에 대한 설명2...</dd>
<dt>CSS</dt>
<dd>CSS에 대한 설명1...</dd>
<dd>CSS에 대한 설명2...</dd>
</dl>만약 한영사전 형태의 정의목록을 만들고 싶다면, 정의 설명태그인 <dd>태그를 <ol> 태그로 감싸주면 순서가 붙는다.
7. 테이블 태그
- <table> 태그: 표를 만들 때 사용
- <tr>: 표 내부의 행 태그
- <th>:표 내부의 제목 셀 태그
- <td>:표 내부의 일반 셀 태그
<table> 태그 안에서 <tr>, <th>, <td> 태그를 사용하여 표를 만들어주면 됨
<table border="1">
<tr>
<th>제목1</th>
<th>제목2</th>
</tr>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
</table>위의 예시를 보면, <th>로 감싼 제목1과 제목2는 더 진하다는 것을 알 수 있다.
<table>태그 안에서 <tr>태그를 이용하여 행을 만들고 <th>를 사용하여 표의 셀의 제목을 쓰고
다시 <tr>태그를 이용하여 아래에 행을 만들어 <td>를 사용하여 내용을 채워주면 된다.
※주의할 점※
table태그에서 속성으로 border(테두리 두께)을 꼭 지정을 해줘야 표가 보이므로 반드시 지정할 것!
만약, border 속성을 생략할 경우 표의 선이 보이지 않는다.
table의 속성
- border: 테두리 두께
- cellspacing: 테두리 간격 사이의 너비
- cellpadding: 셀 내부의 간격
- align: 테이블 정렬 속성
- width: 테이블의 너비
- height: 테이블의 높이
- bgcolor: 테이블 배경색
- bordercolor: 테이블 테두리 색
+)추가 학습
<th>,<td> 태그 안의 속성에는 rowspan과 colspan이 있다.
- rowspan: 셀의 높이 지정 → 즉, 열을 병합하는 느낌
- colspan: 셀의 너비 지정 → 즉, 행을 병합하는 느낌
- 병합할 때에는, 병합되는 td를 지워줘야 함(실수 주의!)
8. 구조를 잡을 때 사용하는 태그
1) <header>: 웹사이트의 머리글을 담는 공간 (상단영역)
2) <nav>: 메뉴 버튼을 담는 공간 → <ul>, <li>, <a>와 함께 사용
보통 메뉴버튼을 만들 때, 바디태그 안에서 <nav>태그를 작성하여 그 안에 <ul>, <li>을 작성한 뒤,
<a> 을 통해 메뉴를 선택하면 다른 페이지로 이동할 수 있게끔 만든다.
3) <main>: 문서의 주요 내용을 담는 태그
※주의할 점※
인터넷 익스플로어는 지원하지 않으므로 role="main"속성을 필수로 입력해야 됨 <main role="main">
4) <article>: 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그
태그 내에 구역을 대표하는 타이틀 <h#>태그가 존재해야 함
<main role="main">
<article>
<h#>이러한 형태로 작성..</h#>
</article>
</main>
5) <footer> : 가장 하단에 들어가는 정보를 표기할 때 사용
6) <div> : 임의의 공간을 만들 때 사용
9~11번은 입력할 때 쓰이는 태그들이다.
9. 입력 양식 태그
1) <form>: 입력 양식을 생성할 때 사용하는 태그
속성으로는 action과 method 존재
→ action: 입력 데이터의 전달 위치 지정
method:입력 데이터의 전달 방식 지정, 가장 자주 사용되는 method 속성으로는 GET & POST
GET & POST의 차이는?
GET : 주소에 데이터를 입력해서 보내는 방식=> 주소가 변경됨(전송 시, 화면이 새로 고침됨)
단점) 보안 취약 + 전송할 수 있는 데이터의 양 한계
POST: packet으로 네트워크를 통해 전달
→ 보안 good + 데이터의 양 한계 X → → 따라서, GET방식보다 더 자주쓰임
2) < input>: 입력 양식 안에서 작성하며(form태그 안에-), 정보를 입력받는 기능을 수행하는 태그
단일태그로, 닫힌 태그가 없음
속성으로는 주로 type 활용-> type의 속성값이 여러 개 존재
→ button, checkbox, file, hidden, image, password, radio, reset, submit, text, email, date, range
3) <label> 태그: input 태그를 설명하는데 사용됨
input을 각각의 세트로 묶어주기 위해 사용되는 태그 → 세트로 묶어주기 위해서는, input의 id 값을 label의 for 값과 동일하게 작성해줘야 함
복수의 응답이 아닌, 하나의 응답을 원할 경우엔 속성 name의 값을 동일하게 맞추어야 한다.
<h5>다음 중 img 태그의 속성인 것은?</h5>
<input type="radio" name="img" id="alt" checked>
<label for="alt">alt</label><!--input과 세트로 맞춰주기 위해 input의 id값을 label의 for 값과 동일하게 해야함-->
<input type="radio" name="img" id="bread">
<label for="bread">bread</label>
<input type="radio" name="img" id="href">
<label for="href">href</label>
<input type="radio" name="img" id="mouse">
<label for="mouse">mouse</label>
<input type="radio" name="img" id="dragon">
<label for="dragon" disabled>dragon</label>
input 태그의 내부에 글자를 넣고 싶을 경우: value 속성 사용
10. <textarea>태그
: 여러 줄의 글자를 입력할 때 사용하는 태그, 주로 게시판의 글을 입력할 때 사용됨
크기 지정이 가능 => cols(너비 지정) & rows(높이 지정) 속성 사용
11. <select>&<optgroup>&<option> 태그 잘 사용하지는 않음
- <select>: 선택 양식을 생성하는 태그
- <optgroup>: 옵션을 그룹화(묶는)하는 태그
- <option>: 옵션을 생성하는 태그
ex)
<select>
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>오뎅</option>
</select>
만약 여러 개를 선택하고 싶을 경우에는 select 태그의 multiple 속성을 사용 <select multiple="multiple">
<select>
<optgroup label="빨간꽃"> <!--옵션을 그룹화해주는 태그-->
<option value="장미" disabled>장미</option>
<option value="동백꽃">동백꽃</option>
<option value="튤립">튤립</option>
</optgroup>
<optgroup label="하얀꽃">
<option value="벚꽃">벚꽃</option>
<option value="매화">매화</option>
</optgroup>
</select>
12. <filedset> & <legend> 태그
: 입력 양식을 설명하는 태그
<legend>태그는 <filedset> 태그 내부에서 사용해야 기능을 함
<form>
<fieldset>
<legend>입력 양식</legend>
<table>
<tr>
<td><label for="name"></td>
<td><input id="name" type="text"></td>
</tr>
<tr>
<td><label for="mail"></td>
<td><input id="mail" type="email"></td>
</tr>
</table>
<input type="submit">
</fieldset>
</form>
13. <summary>&<detail>
노션처럼 화살표 표시를 누르면 내용이 나타나는 형식
details 태그 안에 summary를 넣으면 되고, summary 태그 안에 표시할 내용을 적는다.
숨길 내용은 summary 밖 & details 안에 적으면 된다.
<details>
<summary>내용을 숨길 수 있음</summary>
숨긴 내용 짠
</details>
14. 공간 분할 태그
1) <div>: block 형식으로 공간 분할
2) <span>: inline 형식으로 공간 분할
----------------------------------------------------------------------------------------------------------------------------------------------------------
HTML 태그들은 밑의 두 가지 성격 중 하나를 갖는다. (이미지와 멀티미디어 태그 제외)
1. Block 요소
2. Inline 요소
두 요소를 구분 짓는 세가지 주요 특징은,
줄바꿈 현상이 있는가, 가로/세로, 상/하 배치가 가능한가이다.
<Block 요소의 특징>
- 줄 바꿈 현상이 나타나므로 y축 정렬 형태로 출력
- 공간을 만들 수 있고, 그 공간을 상하 배치 작업이 가능
-width, height 값 적용 가능
-<div>, <h1~6>, <p>, <목록 태그>,<테이블 태그>, <form 태그> 등..
<Inline 요소의 특징>
- 줄 바꿈 현상이 없어 x축 정렬 형태로 출력
- 공간을 만들 수 없고, 따라서 상하 배치 작업이 불가능=> margin-top/margin-bottom/padding-top/padding-bottom 불가능
- 좌우 배치 작업은 가능
-width, height 값 적용 불가능
-<span>, <a>, <input>, <글자 형식 태그> 등..
즉, HTML태그들은 Block요소, Inline요소의 성격으로 나뉘는데 두 성격은 아예 반대라고 생각하면 된다.