앞선 글에서 봤듯, HTML로 구성된 웹페이지는 적절한 태그들의 구성이라고 말할 수 있다.
HTML에서는 모든 명령이나 지시를 태그로 한다. 심지어 줄바꿈까지도 특정 태그를 통해 해야한다...
HTML 태그는 무려 150여개이고, 태그 속 속성까지 생각하면 전부 알기에는 너무나 방대한 양이다.
따라서 이 글에서는 실무에서 자주 사용하는 HTML태그들을 정리해볼 것이다.
더 많은 정보는 W3C 공식 사이트를 참고하자.
World Wide Web Consortium (W3C)
W3C sun-setting online unified validator; community may fork Unicorn 15 February 2023 | Archive W3C plans to stop providing the on-line unified validator service Unicorn as of 31 March 2023, due to lack of resources to maintain the project. We encourage in
www.w3.org
1. 텍스트 작성시 필요한 태그
1-1. <hn>
- hn 태그는 제목이나 주제를 나타내는 텍스트를 표현할 때 사용한다.
- hn1 ~ hn6까지 6개의 hn태그가 존재하며, h1로 갈수록 중요하다.
- h1에 가까울수록(중요할수록) 실행결과에서 글자 크기가 크게 나온다.
- hn태그로 작성된 텍스트는 검색엔진에서 키워드로 인식된다.
- 즉, 검색 엔진 최적화를 위해서는 주제나 제목을 잘 선정해야한다.
1-2. <p>
- p 태그는 본문의 문단을 작성할 때 사용한다.
- paragraph
- HTML에서는 제목이나 주제를 나타내는 텍스트(이건 <hn>사용한다했지)가 아니면 거의 본문이기에 p태그를 사용한다.
1-3. <br>
- br태그는 문단에서 줄바꿈할 때 사용한다.
- break
- HTML에서는 엔터친다고 줄바꿈되지 않는다.. <br>을 사용해야 한다!
- <p> 시작과 끝 태그를 새롭게 사용해 문장을 작성하면 <br> 사용시보다 두 문장 사이에 공백이 많이 생긴다. ex. 1-7 실행결과 참고
1-4. <blockquote>
- blockquote태그는 인용한 문단 단위의 텍스트를 작성할 때 사용한다.
- cite속성으로 출처 경로를 명시한다.
<blockquote cite = "https://8w8u8.tistory.com/entry/HTML%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0">
<p> HTML의 기본 구성 요소태그는 태그, 속성, 문법, 주석이다.</p>
</blockquote>
1-5. <q>
- q 태그는 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용한다.
- q 태그를 사용하면 결과값이 큰따음표(" ")에 묶여서 나온다.
<p> 한 블로거가 작성한 글에 따르면 <q cite="https://8w8u8.tistory.com/entry/HTML%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0">
HTML의 기본 구성 요소는 태그, 속성, 문법, 주석의 4가지입니다.</q><p>
<실행결과> 이전글에서 다룬 HTML기본 구조 속 <body> 안에 위의 코드를 삽입하고 실행해보았다.
1-6. <ins>, <del>
- ins 태그는 새로 추가된 텍스트임을 나타날 때 사용한다.
- ins 태그를 사용하면 결과값이 밑줄쳐진 채 나타난다.
- del 태그는 기존에 있던 텍스트가 삭제된 텍스트임을 나타날 때 사용한다.
- del 태그를 사용하면 결과값이 취소선이 생긴 채 나타난다.
<p>에스파 콘서트 티켓 가격이 <del>12만원</del><ins>15만원</ins>에 판매됩니다.
<br>참고로 실화입니다.</p>
<실행결과>
1-7. <sub>, <sup>
- sub 태그는 아래 첨자 텍스트를 작성할 때 사용한다.
- sup 태그는 위 첨자 텍스트를 작성할 때 사용한다.
- sup = super
<p>이산화탄소는 CO<sub>2</sub>입니다.</p>
<p>3<sup>2</sup>는 9입니다.</P>
<실행결과>
2. 그룹화
웹페이지의 메인 화면은 관련 있는 요소들끼리 그룹지어져있는 경우가 대부분이다.
예를 들어, 네이버 메인 화면을 살펴보자.
네이버 메인 페이지를 보면, 검색/로그인/뉴스/사이드배너 영역 등 관련된 것들끼리 그룹지어져있다.
웹 페이지를 만들 때 그룹화를 사용하면 HTML 페이지의 구조가 깔끔해지고, 레이아웃 구성이 쉬워진다.
그룹화를 위한 태그(또는 '공간 분할 태그'라고 부른다.)로 div, span 등이 있다.
2-1. <div>
*div 태그의 형식
<div></div>
다음은 에스파와 뉴진스의 멤버를 소개하는 웹페이지이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>에스파 멤버 소개</p>
<p>에스파 멤버를 소개하는 페이지입니다.</p>
<p>뉴진스 멤버 소개</p>
<p>뉴진스 멤버를 소개하는 페이지입니다.</p>
</body>
</html>지금이야 별 내용 없으니 괜찮지만,
코드가 복잡해진다면 에스파 멤버 소개/뉴진스 멤버 소개의 두 내용을 구분하기 어려워진다.
=> 그룹화를 하자!
div 태그를 이용해 그룹화하였다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="aespa">
<p>에스파 멤버 소개</p>
<p>에스파 멤버를 소개하는 페이지입니다.</p>
</div>
<div class="newjeans">
<p>뉴진스 멤버 소개</p>
<p>뉴진스 멤버를 소개하는 페이지입니다.</p>
</div>
</body>
</html>
2-2. <span>
span 태그는 인라인 요소를 그룹으로 묶을 때 사용한다.
*span 태그의 형식
<span></span>
<p>영화 소개</p>
<p>이번 영화의 <span>하이라이트</span> 장면은 바로 여기입니다.</p>"이번 영화의 하이라이트 장면은 바로 여기입니다."라는 문장에서 '하이라이트'라는 텍스트 부분만 디자인을 다르게 적용하고 싶다.
=> 하나의 태그 안에 작성된 텍스트 일부만 디자인을 다르게 적용하려면 태그 안에서 공간을 분할해야 한다.
이럴 때 span 태그를 사용하여 분할하고, 분할된 요소에 CSS로 스타일을 적용한다.
3. 목록 만들기
3-1. <ul>
*ul 태그의 형식
<ul>
<li>목록1</li>
<li>목록2</li>
</ul>- ul = unordered list
- ul 태그는 순서가 없는 비순서형 목록을 생성할 때 사용
- 목록 내용은 li(list item) 태그로 구성
- 실행결과에 글머리 기호가 붙음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>에스파 멤버</h2>
<ul>
<li>카리나</li>
<li>지젤</li>
<li>윈터</li>
<li>닝닝</li>
</ul>
</body>
</html>
<실행결과>
ul 태그를 사용하면 목록 내용마다 글머리 기호가 붙는 걸 확인할 수 있다.
3-2. <ol>
*ol태그의 형식
<ol>
<li>목록1</li>
<li>목록2</li>
</ol>- ol = ordered list
- ol 태그는 순서형 목록을 생성할 때 사용
- ul 태그와 마찬가지로 목록 내용은 li(list item) 태그로 구성
- ul 태그와 달리 실행결과에 번호가 붙음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>에스파 멤버</h2>
<ol>
<li>카리나</li>
<li>지젤</li>
<li>윈터</li>
<li>닝닝</li>
</ol>
</body>
</html>
<실행결과>
ol 태그를 사용하면 목록 내용마다 번호가 붙는 걸 확인할 수 있다.
3-3. <dl>
*dl 태그의 형식
<dl>
<dt>용어1</dt>
<dd>용어1 설명</dd>
<dt>용어2</dt>
<dd>용어2 설명</dd>
</dl>- dl = description list
- dl 태그는 정의형 목록을 만들 때 사용
- 정의형 목록 ; 용어와 용어 설명을 나열한 형태의 목록
- dt태그와 dd태그로 목록 구성
- dt = description trem / dd = description details
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<dl>
<dt>사과</dt>
<dd>사과는 둥글고 빨갛다.</dd>
<dt>바나나</dt>
<dd>바나나는 길고 노랗다.</dd>
</dl>
</body>
</html>
<실행결과>
4. 링크와 이미지 넣기
링크는 문서끼리의 역할을 의미하며, 기본적으로 a 태그를 사용한다.
4-1. <a>
*a 태그의 형식
<a href="대상 경로" target="링크 연결 방식" title="링크 설명"</a>
- a 태그는 HTML에서 내부/외부 링크를 생성한다
- anchor
- href 속성은 필수, target, title 속성은 선택하여 사용
- href : a태그로 생성하는 링크의 대상 경로 입력
- 대상 경로 = URL 주소, 내부 문서의 id속성값, 주소가 불분명할시 #
- a 태그를 사용하는 목적은 링크를 통한 다른 영역 이동이므로 #을 사용한다면 후에 대상 경로를 명확하게 변경해주어야 이 태그를 사용하는 목적이 있다
- target : 링크 연결 방식 입력
- 링크 연결 방식에는 _blank(새 창으로 열림, 주로 사용하는 방식), _paret, _self, _top 등이 있다
- title : 링크 설명 텍스트 작성
<a href="https://www.naver.com/" target="blank" title="네이버">네이버 페이지</a>
<실행 결과>
링크를 클릭하면 새 창에서 네이버가 열린다.
4-2. <img>
*이미지 태그의 형식
<img src="이미지 경로" alt="이미지 설명">
- img 태그는 이미지 객체를 삽입하고 싶을 때 사용
- src, alt 속성이 필수
- src : 이미지의 경로를 입력
- 이미지의 경로 = 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준
- ./ : (HTML파일과 같은 폴더인) 현재 폴더 기호
- ../ : (HTML파일보다) 상위 폴더 기호
- alt : 이미지 설명 텍스트 작성
- 실행결과에서 이미지 위에 마우스를 올려 두면 alt속성을 통해 작성한 이미지 설명 텍스트 확인 가능
4-3. 이미지 링크
a 태그 안에 img 태그를 넣을 수도 있다.
=> 이것을 이미지 링크라고 한다. 이미지 링크를 사용하면, 이미지를 클릭했을 때 특정 링크로 이동하게 할 수 있다.
*이미지 링크의 형식
<a href="대상 경로">
<img src="이미지 경로" alt="대체 텍스트">
</a><!-- 이미지를 클릭하면 새 창에서 네이버 사이트로 이동 -->
<!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>
<a href="https://www.naver.com/" target="_blank">
<img src="naver.png" alt="네이버 로고"> // 단, 컴퓨터 내에 naver.png 존재
</a>
</body>
</html>
<실행 결과>
5. 텍스트 강조하기
텍스트를 강조하는 데는 세 가지 방법이 있다.
- 굵은 글씨(볼드체) → <strong> *볼드체 <b>
- 기울여진 글씨 → <em> *이태릭체 <i>
- 글자의 색깔 바꾸기 → style을 통해 바꾼다.
이 중 <strong>과 <em>에 대해 다뤄보자.
5-1. <strong>
*strong 태그의 형식
<strong> 중요한 텍스트 </strong>
- strong 태그를 사용하면 텍스트가 굵게 강조됨
- 또한, 웹 브라우저에 중요한 부분임을 알려줌 → 검색 알고리즘에서 순위 결정.
- 이건 사실 제목태그(hn)도 그렇고 모든 태그들이 그러하다. 그래서 제목을 표시할 때 hn 태그를 쓰는 방식과 적당히 크게 글자 사이즈 조정을 하는 방법은 시각적으로는 결과가 똑같겠지만, 실제로는 내포하는 의미가 다르기에 제목은 hn태그를 이용해 표시하는 것이 검색 알고리즘을 위해 좋다.
- strong태그는(em태그도) 중첩해서 사용 가능 → 실행결과에서 시각적으로 보이는 것은 동일하지만, 구조적으로 더 중요한 것임이 내포 가능하다.
5-2. <em>
*em태그의 형식
<em> 중요한 텍스트 </em>
*em태그의 중첩 활용
<em> <em> 중요한 </em> 텍스트 </em>
- em태그를 사용하면 텍스트가 기울여짐
- em태그 중첩해서 사용 가능 → 실행결과에서 시각적으로 보이는 것은 동일하지만, 구조적으로 더 중요한 것임이 내포 가능하다.
<body>
<strong> 중요한 텍스트 </strong>
<br>
<em> 중요한 텍스트 </em>
<br>
<em> <em> 중요한 </em> 텍스트 </em>
</body>
<실행 결과>
6. 폼 구성하기
폼은 html에서 사용자와 상호작용해서 정보를 압력받고 서버로 전송하기 위한 양식이다.
로그인 페이지, 화원가입 페이지 등이 폼 형태이다.
폼을 구성하기위해 사용하는 태그들에 대해 알아보자.
6-1. <form>
*form태그의 형식 : action, method속성으로 이루어져 있다.
<form action="서버 url" method="get / post"> </form>
- form태그는 폼 양식을 구성할 때 사용된다.
- action 속성 : 폼을 통해 사용자와 상호작용해서 받은 입력값을 전송할 서버의 url주소를 적는다.
- method 속성 : 입력값을 서버에 전송할 때의 송신 방식(get 또는 post)을 적는다.
*get / post
일반적으로 get / post의 선택은 서버 담당 개발자가 작성하므로 프론트 개발자는 #으로 적어두는 경우가 많다.
get : 보안이 요구되지 않는 정보일시
post : 보안이 요구되는 정보일시
6-2. <input>
*input 태그의 형식
<input type="종류" name="이름" value="초깃값">
- in[ut 태그는 닫는 태그가 없음
- input 태그는 로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때 사용
- type 속성은 필수, name과 value 속성은 선택
- type 속성 : 상호작용 요소의 종류를 결정 ex.텍스트를 입력 받을지, 숫자를 입력받을지, 파일을 받을지, 사진을 받을지 등...
- name 속성 : 입력 요소의 작성, 여기에 작성된 이름으로 서버로 전송됨
- value 속성 : 입력 요소의 초깃값을 작성, 보통은 사용자에게 어떠한 값을 입력받지만 상황에 따라 초깃값을 설정해야 하는 경우가 있다.
- 다양한 type 속성값
| text | 한 줄 텍스트를 입력 |
| password | 비밀번호를 입력 |
| tel | 전화번호를 입력 |
| number | 숫자만 입력 |
| url | url주소를 입력 |
| search | 검색용 텍스트를 입력 |
| 이메일을 입력 | |
| checkbox | 체크박스를 생성 |
| radio | 라디오버튼을 생성 |
| file | 파일 업로드 가능하게 생성 |
| button | 버튼 생성 |
| image | 이미지로 버튼 생성, img태그처럼 src속성 사용, alt속성은 사용 안함 |
| hidden | 사용자 눈에 보이지 않는 입력요소를 생성 |
| date | 날짜(연, 월, 일) 선택 가능하게 생성 |
| datetime-local | 사용자의 시간대에 맞는 날짜(연, 월, 일, 시, 분) 선택 가능하게 생성 |
| month | 날짜(연, 월) 선택 가능하게 생성 |
| week | 날짜(연, 주차) 선택 가능하게 생성 |
| time | 시간을 선택 가능하게 생성 |
| range | 숫자 범위를 선택 가능하게 생성 |
| color | 색상을 결정할 수 있게 생성 |
| submit | 폼 제출 버튼을 생성 |
| reset | 초기화 버튼을 생성 |
6-3. <label>
label 태그는 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용한다.
*label 태그의 형식
1. 암묵적 방식 : label 태그 안에 input 태그 포함
<label> 비밀번호 <input type="password"> </label>2. 명시적 방식 : label 태그와 input 태그를 각자 사용, 상호작용 요소를 같은 값으로 설정
<label for="userpw">비밀번호</label> <input type="password" id="userpw"> // for 속성값과 id 속성값이 같아야함
3. 혼합 방식
<label for="userpw"> <input type="password" id="userpw">비밀번호 </label>
6-4. <fieldset>, <legend>
fieldset 태그는 form 태그 안에서 요소들을 네모 박스로 그룹화할 때 사용한다.
*fieldset 태그의 형식
<form action="#"> <fieldset> <legend>그룹이름</legend> </fieldset> </form>
<form>
<fieldset>
<legend>기본 정보</legend>
<p>
<label for="userid">아이디</label>
<input type="text" id="userid">
</p>
<p>
<label for="passwd">비밀번호</label>
<input type="password" id="passwd">
</p>
</fieldset>
</form>
<실행결과>
6-5. <textarea>
*textarea 태그의 형식
<textarea>초깃값은여기에작성</textarea>
- <input type="text" name=아이디 value=1> 에서는 value 속성으로 초깃값을 정의했지만,
- <textarea>에선 콘텐츠 영역에 초깃값 정의
- <input type="text">는 한 줄의 텍스트만 입력시 사용한다.
- <textarea>는 여러 줄의 텍스트 입력시 사용
6-6. <select>, <option>, <optgroup>
select 태그를 활용하면 드롭다운 형식을 생성할 수 있다.
*select 태그의 형식
<select> <optgroup label="그룹이름"> <option balue="서버에 전송할 값">웹 브라우저에 표시할 값</option> </optgroup> </select>
- <option>으로 드롭다운 선택지 추가
- <optgroup>으로 그룹묶기
<form>
<fieldset>
<legend>거주지역</legend>
<p>지역선택
<select name="countryInfo" id="country">
<!-- <select name="countryInfo" id="country" multiple> 복수 선택은 muptiple 속성 사용 -->
<optgroup label="아시아">
<option value="서울">서울</option>
<option value="도쿄" selected>도쿄</option>
<!-- 기본적으로는 첫 번째 옵션 값이 선택되나, selected 속성을 활용해 변경 가능 -->
<option value="베이징">베이징</option>
</optgroup>
</select>
</p>
<br>
<label for="extra">그외지역
<textarea id="extra" name="extraArea"></textarea>
</label>
</fieldset>
<실행결과>
6-7. <button>
*button 태그의 형식
<button type="종류">버튼 내용</button>
- <input type="button"> / <input type="submit"> / <input type="reset"> 의 input태그로 버튼을 정의할 수도 있지만,
- 별도의 button 태그를 활용해도 된다. button 태그 역시 type 속성에 submit, reset 을 가질 수 있다.
- input 태그와 달리 시작~종료태그가 있어서 버튼 내부에 이미지를 넣거나, 콘텐츠를 작성할 수 있다. (버튼 꾸미기 용이함)
<input type="submit">
<br>
<button type="submit">해당 페이지에 제출하기</button><실행결과>
6-8. 폼 태그 관련한 추가 속성
- disabled 속성 : 상호작용 요소 비활성화. 버튼 요소는 버튼 클릭 불가, 텍스트 요소는 텍스트 작성 불가 등
- readonly 속성 : 읽기 전용으로 만듦. disabled 속성처럼 상호작용 요소를 못 쓰게 만들지만, disabled 속성과 달리 서버에 값은 전송됨.
- maxlength 속성 : maxlength="숫자값"의 형태로 최대 글자수 제한 가능.
- checked 속성 : 요소를 선택된 상태로 표시
- placeholder 속성 : 텍스트 박스에 입력하기 전에 "내용을 입력해주세요."와 같은 문구가 뜰 수 있게 함.
- 속성 추가는 태그 안에! ex. <option value="도쿄" selected>도쿄</option>
'front-end > html + css + java' 카테고리의 다른 글
| HTML의 기본 구조 (0) | 2023.02.14 |
|---|
