HTML

김민석·2023년 9월 6일

태그의 종류

기본 태그

html 태그

html 문서의 내용을 정의하는 태그
html 코드는 모두 이 태그 내부에 작성해야 한다

lang 속성

html 문서가 어떤 언어로 표기되어 있는지 표시
검색엔진에서 사용 (ex. 한국어로만 작성된 페이지 검색)

<html lang="ko">
</html>

head 태그

html 문서를 정의하는 태그
제목, 스타일 (css), 로딩 시 기능(js), 추가 설정/정보(메타데이터)

<head>
	<title>제목</title>
	<meta charset="UTF-8">
</head>

body 태그

화면에 보여질 내용을 정의하는 태그

<body>
</body>

글자 관련 태그

highlight (h1 ~ h6) 태그

제목을 나타내는 태그
1(큼) ~ 6(작음) 폰트 크기가 지정되어 있음

<h1>h1 태그에 작성된 내용</h1>
<h2>h2 태그에 작성된 내용</h2>
<h3>h3 태그에 작성된 내용</h3>
<h4>h4 태그에 작성된 내용</h4>
<h5>h5 태그에 작성된 내용</h5>
<h6>h6 태그에 작성된 내용</h6>

hr (horizon) 태그

가로줄 긋기 태그

<hr>

br (line break) 태그

다음 줄 이동

<br>

p (Paragraph) 태그

글을 작성하는 용도, 종료 시 줄 바꿈

<p>내용</p>

pre (Preformatted) 태그

태그 내에 작성된 문자열 형식을 그대로 보여주는 태그
p 태그 + 형식 유지

<pre>내용</pre>

b 태그

단순히 글자를 굵게 표시하는 태그

<b>b 태그</b>

i 태그

단순히 글자를 기울여 표시하는 태그

<i>i 태그</i>

strong 태그

글자(단어)를 강조하는 태그
글자를 굵게 표시하는 태그
웹 접근성을 위해 사용

<strong>strong 태그</strong>

em 태그

글자(문장)를 강조하는 태그
글자를 기울여 표시하는 태그
웹 접근성을 위해 사용

<em>em 태그</em>

mark 태그

형광펜 효과를 나타내는 태그

<mark>mark 태그</mark>

u 태그

밑줄 태그

<u>u 태그</u>

s 태그

취소선

<s>s 태그</s>

del 태그

삭제선

<del>del 태그</del>

small 태그

작은 글자 태그

<small>small 태그</small>

sup 태그

윗첨자 태그

<sup>내용</sup>

sub 태그

아랫첨자 태그

<sub>내용</sub>

abbr (abbreviation) 태그

마우스 오버 시 툴팁 출력 태그

<abbr title="설명">내용</abbr>

목록 관련 태그

ul (unordered list) 태그

순서 없는 목록 태그

li (list item) 태그

목록의 한 줄(목록에서 구별되는 내용) 태그

<ul>
    <li>김밥</li>
    <li>서브웨이</li>
    <li>라면</li>
    <li>햄버거</li>
</ul>

emmet을 이용해서 목록 만들기

> : 태그 내부에 작성(하위)
+ : 형제(같은 레벨)로 작성
* 숫자 : 개수
{} : 태그 내용
$ : 1부터 1씩 증가하는 숫자 출력

ul*2>li*3{$번 항목}

ol (ordered list) 태그

순서가 있는 목록 태그
type 속성 : 순서를 나타내는 형식을 지정
미작성 : 1 부터 1씩 증가하는 숫자

type="a" : 영어 소문자 순서(abcd...)
type="A" : 영어 대문자 순서(ABCD...)
type="i" : 로마 소문자 순서
type="I" : 로마 대문자 순서

start 속성 : 시작하는 숫자 설정
reversed : 반대(역순)

<ol type="1" start="3" reversed>
    <li>샐러드</li>
    <li>김밥</li>
    <li>삼겹살</li>
    <li>돼지갈비</li>
    <li>우육면</li>
</ol>

dl (description list) 태그

설명 목록 태그
dl 태그 : 설명 목록이 작성될 판(공간)
dt 태그 : 설명 제목
dd 태그 : 설명 내용

<dl>
    <dt>제목1</dt>
    <dd>내용1-1</dd>
    <dd>내용1-2</dd>
    <dt>제목2</dt>
    <dd>내용2</dd>
</dl>

표 관련 태그

table 태그

웹 문서에서 자료 정리를 위해 주로 사용하는 태그
행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell) 이라고 함.
table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함.

tr (Table Row) 태그

한 행을 나타내는 태그

td (Table Data) 태그

한 행의 한 컬럼(셀)을 나타내는 태그

th (Table Header) 태그

컬럼명을 표시하는 용도의 태그
기본 성질은 td 태그와 같으나 추가적으로 굵은 글씨, 가운데 정렬이 이루어짐

caption 태그

테이블의 제목이나 설명 내용을 추가하는 태그

행 병합, 열 병합

td 또는 th 태그에 작성하는 속성
테이블의 병합은 다른 td/th 태그를 하나로 합치는 것이 아닌 지정된 크기 만큼의 행, 열의 자리를 차지하겠다라는 의미

rowspan

행 병합

colspan

열 병합

테이블 구조 설정 태그

미작성시 모든 내용은 tbody 내부에 작성

thead 태그

테이블 상단 영역 (컬럼명)

tbody 태그

테이블 중단 영역 (실제 값, 내용)

tfoot 태그

테이블 하단 영역 (합계)

<table>
	<thead>
    	<caption>개인정보</caption>
		<tr>
			<th>이름</th>
			<th>나이</th>
			<th>주소</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>홍길동</td>
			<td>20</td>
			<td>서울시 금천구</td>
		</tr>
		<tr>
			<td>김개똥</td>
			<td>25</td>
			<td>서울시 강남구</td>
		</tr>
		<tr>
			<td>김영희</td>
			<td>23</td>
			<td>경기도 파주시</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th colspan="2">총 인원</th>
			<th>3명</th>
		</tr>
	</tfoot>
</table>

이미지 관련 태그

img 태그

웹 문서에서 사진이나 그림 같은 이미지를 삽입하는 용도의 태그

속성

src : 삽입할 이미지의 경로를 작성하는 속성(파일경로, 웹 주소)
width / height : 이미지 크기(px, %)
alt (대안) : 이미지의 설명을 작성하는 속성, 이미지가 출력되지 않는 경우 화면에 표시됨, 웹 접근성(스크린 리더가 이미지 설명을 읽어줌)

절대 경로로 이미지 출력

변하지 않는 기준점으로 부터 목표까지의 경로 (서버 배포 시 컴퓨터 절대 경로는 인식되지 않음)

<img src="C:\workspace\04_WebFront\images\cats\cat1.jpg" alt="cat1.jpg 이미지">

상대 경로로 이미지 출력

상대 경로 : 현재 파일/페이지 위치를 기준점으로 하여 목표까지의 경로를 나타내는 것 (절대 경로가 노출되지 않기 때문에 서버 배포시에도 사용 가능)

<img src="..\images\dogs\dog1.jpg" alt="dog1.jpg 이미지">

웹 주소를 이용해서 이미지 출력

<img src="https://img.freepik.com/premium-photo/killer-whale-in-the-water-with-mountains-in-the-background_996379-1149.jpg" alt="">

고정 크기 단위

항상 고정된 크기를 지닌 단위 (px, pt)

<img src="../images/cats/cat1.jpg" width="300px" height="200">

가변 크기 단위

화면 또는 영역에 대한 상대적 크기 단위 (%, em, rem, vh, vw)

<img src="..\images\dogs\dog1.jpg" width="15%" height="240px">

영역 관련 태그

block 형식

공간을 수직 분할
수직으로 되어있는 화면을 가로로 잘라서 여러 행을 만드는 것
크기를 지정하는 css 속성인 width, height를 사용할 수 있다
사각형 박스 형태로 영역을 지정
ex) h, p, pre, hr, div 태그 등

inline 형식

공간을 수평 분할
수평으로 되어있는 화면을 세로로 잘라서 여러 열(컬럼)을 만드는 것
크기를 지정하는 css 속성인 width, height를 사용할 수 없다
내부에 작성된 내용(content) 단위로 영역을 지정
ex) b, strong, i, em, mark, span, img

iframe 태그

웹 문서 내부에 또 다른 웹 문서를 추가하는 태그(inline 형식)
웹 문서를 겹쳐서 보여주기 때문에 활용 방법에 따라 다양한 연출이 가능한 장점 있음
하지만, 한 번에 여러 페이지를 로딩하기 때문에 컴퓨터 성능, 인터넷 속도에 따라 느려지거나, 오류가 발생할 수 있다

<iframe src="05_표 연습문제.html" width = "400px" height =400px; frameborder="0"></iframe>
<iframe width="540" height="270" src="https://www.youtube.com/embed/Km71Rr9K-Bw" title="NewJeans (뉴진스) 'Ditto' Performance Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

하이퍼 링크 관련 태그

a 태그

a태그는 현재 HTML 문서와 다른 HTML 문서를 연결해서 페이지 이동을 할 수 있게 하는 기능을 제공
이 때, a태그로 감싸진 문자열은 하이퍼링크(또는 하이퍼 텍스트)

속성

href(HyperText Reference) 속성 : 연결할 주소를 지정하는 속성
target="_blank" : 새 탭에서 열기

상대 경로 방식으로 파일 연결하기

<li><a href="01_글자관련태그.html">글자 관련 태그</a></li>

a태그와 다른 태그 같이 사용하기

<h1>
    <a href="https://www.naver.com" target="_blank">
      네이버
    </a>
</h1>

이미지 클릭 시 이동하기

<a href="https://www.kh-academy.co.kr" target="_blank">
    <img width="200px" height="140px" src="https://www.kh-academy.co.kr/resources/images/main/logo.svg" alt="KH 정보교육원 로고">
</a>

페이지 내부에서 점프하기

<ul id="list">
    <li><a href="#flower1">꽃 1</a></li>
    <li><a href="#flower2">꽃 2</a></li>
    <li><a href="#flower3">꽃 3</a></li>
</ul>

<h3 id="flower1">꽃 1</h3>
<img src="../images/flowers/flower1.jpg"> <br>
<a href="#list">목록으로 이동</a>

<h3 id="flower2">꽃 2</h3>
<img src="../images/flowers/flower2.jpg"> <br>
<a href="#list">목록으로 이동</a>

<h3 id="flower3">꽃 3</h3>
<img src="../images/flowers/flower3.jpg"> <br>
<a href="#list">목록으로 이동</a>

입력 관련 태그

text 관련 input 태그

웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그 (inline)
공통 속성
- size : 입력 상자의 크기
- maxlength : 입력 받는 텍스트의 최대 길이
- placeholder : 입력 상자에 작성될 내용을 설명
- value : input 태그에 들어갈 초기값을 지정
(모든 input 태그의 type에서 사용 가능한 속성)

type="text"

한 줄 짜리 문자열(텍스트)를 입력할 수 있는 입력 상자
input 태그의 type 기본값으로 생략 가능

<input type="text" size="15" maxlength="10" placeholder="값 적어요" value="기본값">

type="password"

비밀번호 입력 상자(입력되는 텍스트를 가려줌)

비밀번호 : <input type="password" id="pw">

기타 텍스트 관련 태그

url, email, tel 단독 사용 시 type="text"와 똑같지만 form태그 내부에서 사용되면
입력된 값이 용도에 맞는 값인지 유효성 검사를 간단히 진행함

type="url"

주소 입력 시 사용하는 입력 상자

<input type="url" id="inputUrl" value="https://github.com/" size="50">

type="email"

이메일 입력 시 사용하는 입력 상자

<form action="">
	이메일 : <input type="email">
	<button type="submit">제출</button>
</form>

type="tel"

전화번호 입력 시 사용하는 입력 상자

<input type="tel" size="8" maxlength="11" placeholder="-없이">

type="search"

검색어 입력 시 사용하는 입력 상자

<input type="search">

숫자 관련 input 태그

공통 속성
- min : 최소값
- max : 최대값
- step : 증가/감소 단계 지정
- value : input 태그에 들어갈 초기값을 지정
(모든 input 태그의 type에서 사용 가능한 속성)

type="number"

숫자만 입력 할 수 있는 입력 상자
브라우저에 따라 스핀박스가 표시되기도 함

<input id="number" type="number" min="0" max="100" step="5" value="50">

type="range"

슬라이드 바를 이용해서 숫자 지정(단독 사용X, JS와 함께 사용)

<input id="range" type="range" min="0" max="100" step="5" value="50">

날짜/시간 관련 input 태그

type="date / month / week / time / datetime-local"

radio, checkbox

여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input type
묶음으로 다루려는 input 태그들은 반드시 같은 name 속성 값을 가져야 한다
속성에 checked 작성 시 기본값으로 설정

name 속성

radio, checkbox 뿐만 아니라 input 태그들 중 관련된 것들을 묶어서 부를 때(묶음으로 다룰때) 사용 (그룹이름)
서버쪽에 제출되는 input 태그 값의 이름을 지정(form태그와 같이 사용) (checkbox에 사용 시 name이 같은 input은 하나의 배열로 전달됨)

label

input 태그에 대한 설명/제목을 지정하는 태그
for 속성에 input 태그의 id 속성 값을 작성하여 연결 가능 -> label을 클릭해도 input을 클릭한 효과를 얻을 수 있음

type="radio"

하나만 선택 가능

<label for="aTeam">A팀</label> <input type="radio" name="team" id="aTeam"> <br>
<label for="bTeam">B팀</label> <input type="radio" name="team" id="bTeam"> <br>
<label for="cTeam">C팀</label> <input type="radio" name="team" id="cTeam"> <br>

type="checkbox"

여러 개 선택 가능

<label for="baseball">야구</label> <input type="checkbox" name="hobby" id="baseball"> <br>
<label for="soccer">축구</label> <input type="checkbox" name="hobby" id="soccer"> <br>
<label for="basketball">농구</label> <input type="checkbox" name="hobby" id="basketball"> <br>

버튼을 나타내는 input 태그

input 태그 중
type="submit" / type="reset" / type="button"
위 3개가 버튼을 나타내는 타입인데 최근에는 잘 사용되지 않음
버튼의 사용도가 너무 많아져서 별도의 button 태그가 새롭게 등장했기 때문

button 태그

type="submit(기본값) / reset(form에 작성된 값 초기화) / button(JS에서 사용)"

<button type="reset">reset</button>

기타 input 태그

type="color"

색 선택 태그

type="file"

파일 선택 태그

type="hidden"

화면에 보이지는 않지만 실제로는 존재하는 input 태그
->꼭 보여질 필요는 없지만 기능 수행 시 필요한 값(ex. 회원번호)

<input type="hidden" id="hd" value="여기 값 있다?!">

form 태그

div와 같은 영역(block 형식) + 내부에 작성된 input 태그의 값을 서버로 전달하는 역할
속성
- action : 내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성
- method(방식) : 서버로 데이터 전달하는 방식을 지정하는 속성
- name : form태그의 이름을 지정하여 각각의 form태그 구분(JS사용)
- target : action에 지정된 주소를 새탭/현재탭 중 어디서 열지 지정
예시 1
아이디, 비밀번호 입력 후 로그인(제출) 클릭 시 action에 작성된 주소 result.html로 입력된 값을 전달(제출)

<form action="result.html">
	아이디 입력 : <input type="text" name="inputId"> <br>
	비밀번호 입력 : <input type="password" name="inputPw"> <br>
	<button type="submit">로그인(제출)</button> <br>
</form>

예시 2
action : 제출할 서버 또는 페이지 주소
method= "get" : 주소에 데이터를 key=value 형식으로 전달하는 방식 (기본값)

<form action="result.html" method="get">
	이름 : <input type="text" name="inputName"> <br>
	나이 : <input type="number" name="inputAge"> <br>
	<button type="submit">제출하기</button>
</form>

예시 3
target="_blank" : 제출 결과를 새 창에서 확인

<form action="result.html" target="_blank">
	팀 선택 <br>
	<label for="aTeam">A팀</label> <input type="radio" name="team" id="aTeam" value="A팀"> <br>
	<label for="bTeam">B팀</label> <input type="radio" name="team" id="bTeam" value="B팀"> <br>
	<label for="cTeam">C팀</label> <input type="radio" name="team" id="cTeam" value="C팀"> <br>
	<hr>
	취미 선택 <br>
	<label for="baseball">야구</label> <input type="checkbox" name="hobby" id="baseball" value="야구"> <br>
	<label for="soccer">축구</label> <input type="checkbox" name="hobby" id="soccer" value="축구"> <br>
	<label for="basketball">농구</label> <input type="checkbox" name="hobby" id="basketball" value="농구"> <br>        
	<button type="submit">제출하기</button>
</form>

fieldset 태그

테두리를 만들어 그룹을 구분하는 영역

legend 태그

fieldset 테두리에 이름을 부여

<form action="result.html" method="get" target="_blank">
	<fieldset>
		<legend>로그인</legend>
		아이디 : <input type="text" name="inputId"> <br>
		비밀번호 : <input type="password" name="inputPw"> <br>
	</fieldset>
	<fieldset>
		<legend>개인정보</legend>
		이름 : <input type="text" name="inputName"> <br>
		나이 : <input type="number" name="inputAge"> <br>
	</fieldset>   
	<button type="submit">제출하기</button>
</form>

textarea 태그

여러 줄을 입력하기 위한 입력 상자
css{resize: none;}
크기 지정 불가

<form action="result.html">
	<textarea name="inputId" rows="5" cols="60"
    placeholder="아무거나 작성 해봐요" style="resize:none">태그 사이에 기본 값 작성
        pre태그 처럼 모양 그대로를 인식</textarea>
	<button>제출</button>
</form>

select 태그

내부에 작성된 option 태그 중 하나를 선택
option에 value가 작성되어 있으면 value 제출 아니면 태그 사이 내용 제출
option 속성 selected 작성 시 기본값으로 설정

<form action="result.html">
	<select name="inputId">
		<option>선택1</option>
		<option selected>선택2</option>
		<option value="3333">선택3</option>
	</select>
</form>

김민석

이전 포스트

JOIN

다음 포스트