[FrontEnd] Ch.3 HTML 필수 태그 정리

텍스트 작성하기

<hn>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

제목이나 주제를 나타내는 텍스트를 위한 태그로 중요도에 따라 크기와 굵기가 줄어듭니다.

또한, 검색엔진에서 키워드로 인식하는 태그이므로 핵심 내용을 잘 선택해야 합니다.

 

<p>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

본문을 작성할 때 사용하는 태그입니다.

사진과 같이 빈태그로 사용해도 같은 효과를 냅니다.

 

<br>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

문단 줄바뀜을 위해 사용하는 태그입니다.

 

<blockquote>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

인용문을 작성할때 사용하는 태그입니다.
cite 속성을 통해 출처 경로를 명시해야 합니다.

 

<q>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

짧은 인용문을 작성할 때 사용하는 태그입니다.

<blockquote> 태그와 마찬가지로 cite 속성을 통해 출처 경로를 명시해야 합니다.

 

<ins>, <del>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

새로 추가된 텍스트, 기존에 있던 삭제된 테스트를 나타낼 때 사용하는 태그입니다.

<ins>는 밑줄, <del>은 취소선이 생깁니다.

 

<sub>, <sup>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

각각 아래첨자, 위첨자를 작성할 때 사용하는 태그입니다.

 

태그로 그룹짓기

 

HTML 문서를 만들 때 특정 요소들을 그룹으로 묶어야 할 때가 있습니다.

그럴때 <div>, <span> 등등의 태그를 사용해 그룹화 합니다.

 

<div>

블록 요소와 그룹 요소를 그룹으로 묶을 때 사용하는 태그입니다.

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

 

HTML 문서 가독성에 더 도움을 줄 수 있습니다.

 

<span>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

인라인 요소를 그룹으로 묶을 때 사용합니다.

 

 

 

목록 만들기

 

목차와 메뉴, 그 외 여러 분야에서 사용할 수 있는 태그들입니다. 

 

<ul>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

순서가 없는 비순서형 목록을 생성할 때 사용합니다.

목록 내용은 <li> 태그를 통해 작성합니다.

각 <li> 태그 내용 앞에 글머리 기호가 붙습니다.

 

<ol>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

<ul>과 달리 순서형 목록을 생성할 때 사용합니다.

<ul>과 차이점은 <li> 태그 내용 앞에 번호가 붙습니다.

 

<dl>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

정의형 목록을 사용할 수 있는 태그입니다.

용어와 용어 설명을 나열할 때 사용하며 용어 설명은 자동으로 들여쓰기 됩니다.

<dt> 태그를 통해 용어를 <dd> 태그를 통해 용어 설명을 작성하면 됩니다.

 

링크와 이미지 넣기

 

문서와 문서 간 연결을 링크라 하며, 기본으로 a 태그를 사용합니다.

사진과 같은 이미지 객체를 삽입할 때는 img 태그를 사용합니다.

 

<a>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

HTML 내부와 외부 링크를 생성하는 태그입니다.

대상 경로를 나타내는 href 태그를 반드시 사용해야 하고, tilte 속성을 선택해 사용할 수 있습니다.

• <a href="대상 경로" target="링크 연결 방식" title="링크 설명"></a>

href

<a> 태그로 생성하는 링크의 대상 경로 입력을 위해 사용하는 속성

속성 값은 대상 경로의 주소거나 내부 문서의 id 속성 값일 수 있습니다.

 

target

<a> 태그로 링크를 생성할 떄 대상이 연결되는 방식을 지정합니다.

새 창으로 연결되는 _blank 말고 잘 사용하지 않습니다.

target 속성의 사용 여부는 선택입니다. 

 

title

링크를 설명할 수 있는 텍스트를 작성합니다.

url로 알아보기 힘들 경우, 설명이 부족한 경우 특정 텍스트로 대체할 수 있습니다.

<img>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

HTML에서 이미지 객체를 삽입하기 위해 사용하는 태그입니다.

• <img src="이미지 경로" alt="이미지 설명">

src

삽입하려는 이미지의 경로를 입력하는 속성입니다.

HTML 이미지 경로는 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준(상대경로)

아래 두 기호를 통해 현재 디렉토리와 상위 디렉토리를 오갈 수 있습니다.

/a	하위 디렉토리
./	현재 디렉토리
../	상위 디렉토리

 

alt

삽입한 이미지의 설명을 적는 속성입니다.

 

이미지 링크

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

<img> 태그를 <a> 태그로 감싸면 이미지 링크로 사용할 수 있습니다.

이미지를 클릭 시 <a> 태그의 href 속성의 경로로 이동합니다.

 

텍스트 강조하기

 

텍스트에서 특정 내용을 강조하고 싶을 때 사용할 수 있는 태그들입니다.

 

<strong>

 

텍스트를 굵은 글씨로 강조하고 싶을 때 사용하는 태그입니다.

 

<em>

 

텍스트를 기울인 글씨로 작성하고 싶을 때 사용하는 태그입니다.

 

폼 구성하기

 

form은 HTML에서 사용자와 상호작용 해 정보를 입력받고 서버로 전송하기 위한 양식을 제공하는 태그입니다.

네이버 로그인 창 등등 다양한 곳에서 폼을 찾아볼 수 있습니다.

 

<form>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

폼 양식을 의미하는 태그입니다.

HTML 문서에서 폼을 구성하는 태그는 모두 form 태그 안에 작성합니다.

• <form action="서버 url" method="get 또는 post"></form>

action

사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 적습니다.

 

method

입력받은 값들을 전송할 때의 전송 방식을 적습니다.

 

<input>

 

• <input type="종류" name="이름" value="초깃값">

type

입력된 속성 값에 따라 상호작용 요소의 종류를 결정합니다.

속성 값	설명
text	한 줄로 텍스트를 입력할 수 있는 요소 생성
password	비밀번호 입력 가능한 요소 생성
tel	전화번호 형식을 입력 가능한 요소 생성
number	숫자만 입력 가능한 요소 생성
url	URL 형식을 입력 가능한 요소 생성
search	검색용 텍스트를 입력 가능한 요소 생성
email	이메일 형식을 입력 가능한 요소 생성
checkbox	체크박스 요소 생성
radio	라디오 버튼 요소 생성
file	파일 업로드 요소 생성
button	버튼 요소 생성
image	이미지 버튼 요소 생성
hidden	눈에 보이지 않는 입력 요소 생성
date	날짜 선택 가능한 요소 생성
datetime-local	사용자 시간대에 맞는 시간을 입력 가능한 요소 생성
month	연, 월 을 입력 가능한 요소 생성
week	연, 주차 를 입력 가능한 요소 생성
time	시간을 입력 가능한 요소 생성
range	숫자 범위를 입력 가능한 요소 생성
color	색상을 선택할 수 있는 요소 생성
submit	폼 전송 역할을 하는 버튼 요소 생성
reset	폼 요소의 입력 값을 초기화하는 버튼 생성

 

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

name

입력 요소의 이름을 작성합니다

서버에 전송 시 name 속성의 값으로 이름이 지정됩니다.

 

value

입력 요소의 초깃값을 작성합니다

 

<label>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

웹 접근성을 위해 상호작용 요소에 이름을 붙일 때 사용합니다.

사용자는 label 태그만 클릭해도 form 요소에 접근할 수 있습니다.

<label> 태그의 내부에 form 요소를 작성해도 되고,

for 속성을 사용해 외부에서 가리켜도 됩니다.

이 태그는 시각장애인이 사용하는 스크린 리더기 등에 상호작용되어 유용합니다.

 

<fieldset>, <legend>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

<fieldset> 태그를 이용해 여러 form 요소를 그룹지어 테두리를 만듭니다.

또한 해당 그룹에 <legend> 태그를 이용해 이름을 붙일 수 있습니다.

 

<textarea>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

여러 줄의 입력 요소를 생성할 때는 <textarea> 태그를 사용하면 됩니다.

닫는 태그가 존재하기 때문에 별도의 속성을 사용하지 않고 태그 내부에 초깃값을 정의하면 됩니다.

 

<select>, <option>, <optgroup>

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

<select> 태그로 콤보박스를 생성합니다.

<option> 태그로 콤보박스의 내용을 작성할 수 있고, <optgroup> 태그를 통해 내용을 그룹지을 수 있습니다.

 

size

콤보박스 한 페이지에 나올 내용의 개수를 정할 수 있습니다.

 

multiple

중복 선택 여부를 결정합니다.

 

selected

콤보박스는 첫번째 값을 기본으로 선택하는데, 이 속성을 통해 다른 값을 기본값으로 설정할 수 있습니다.

 

<button>

 

<input> 태그의 submit, reset, button 속성값과 같은 기능을 하는 태그입니다.

type 속성을 submit, reset, button로 주어 같은 효과를 낼 수 있습니다.

 

form 관련 태그에서 공통으로 사용 가능한 속성

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

disabled

• <태그 disabled>

상호작용 요소를 비활성화 합니다.

 

readonly

• <태그 readonly>

상호작용은 되지만 값을 입력할 수 는 없습니다.

disabled와 다른 점은 값이 전송됩니다.

 

maxlength

• <태그 maxlength="제한 글자 수">

입력 가능 글자 수를 제한합니다.

 

checked

• <태그 checked>

체크 가능한 요소의 기본 값이 체크 된 상태로 만듭니다.

 

placeholder

• <태그 placeholder="내용">

입력 전 어떤 내용을 적어야하는 지 설명 용도로 사용하는 속성입니다.

 

표 만들기

2차원 격자 형태로 구성된 데이터를 구성할 수 있는 태그입니다.

가로 한 줄을 행, 세로 한 줄을 열로 지칭하며, 각 한 칸, 한 칸을 셀이라 합니다.

See the Pen Untitled by onCloud (@onCloudzz) on CodePen.

<table>

표를 생성하는 기본 태그입니다.

 

<caption>

 

표 제목을 지정하는 태그입니다.

 

<tr>

 

행을 생성하는 태그입니다.

태그 사용 한 번에 행 한 줄이 생깁니다.

 

<th>

 

열을 생성하는 태그입니다.

<th> 는 제목을 나타내는 열 태그입니다.

 

<td>

열을 생성하는 태그입니다.

<td> 는 내용을 나타내는 열 태그입니다.

 

rowspan 과 colspan

 

셀을 병합하고 싶을 때 사용합니다.

rowspan으로 세로 병합, colspan으로 가로 병합이 가능합니다.

병합한 셀 만큼 새로 만든 셀들을 없애야 합니다.

 

<thead>, <tfoot>, <tbody>

각각 헤더, 푸터, 바디에 해당하는 내용을 적을 때 그룹짓는 태그입니다.

 

<col>, <colgroup>

 

열 전체를 그릅화 할 때 사용하는 태그입니다.

<col>은 하나의 열만, <colgroup>은 span 속성과 함꼐 사용해 두개 이상의 열을 그룹화 합니다.

멀티미디어 설정하기

<audio>

 

오디오 파일 삽입을 위한 태그입니다.

 

<video>

비디오 파일 삽입을 위한 태그입니다.

 

<source>

오디오 파일과 비디오 파일의 리소스의 경로와 파일 타입을 명시하는 데 사용합니다.

웹 페이지 구조를 설계하는 시맨틱 태그

 

<header>

로고, 검색, 메뉴 등을 포함하는 헤더 영역 구분을 위해 사용합니다

 

<nav>

웹에서 다른 영역이나 외부를 연결하는 링크 영역을 구분하는 데 사용합니다.

 

<section>

웹에서 논리적으로 관련 있는 내용을 구분할 때 사용합니다.

대부분 <hn>태그를 포함합니다.

 

<article>

웹 페이지에서 독립적인 영역을 구분할 때 사용합니다.

<section> 태그와 달리 다른 곳에서도 쓰이는 경우 사용합니다

 

<aside>

부수적인 내용들을 담기 위해 사용합니다.

 

<footer>

저작권 정보, 연락처, 사이트 맵 등을 담기 위한 푸터 영역을 만드는 태그입니다.

 

<main>

웹 페이지에서 반복 등장하지 않는 주요 요소를 지정할 때 사용하는 태그입니다.

글로벌 속성

class

요소에 클래스명 지정을 위해 사용합니다.

중복해서 클래스명을 지정할 수 있습니다.

 

id

요소에 아이디명 지정을 위해 사용합니다.

아이디 명은 고유한 아이디만 사용 가능합니다.

 

style

css 코드를 인라인으로 작성하기 위해 사용합니다.

 

title

요소에 추가 정보를 넣을 때 사용합니다.

마우스 커서를 올리면 해당 내용이 툴팁으로 표시됩니다.

 

lang

텍스트의 언어 코드를 설정합니다.

 

data-*

사용자 커스텀 속성을 지정합니다.