HTML 태그와 속성
본 게시물은 Udemy Web Developer 부트캠프 강의와 MDN 문서를 참고해 작성하였습니다.
새롭게 알게된 지식들을 지속적으로 업데이트 할 예정입니다.
HTML 태그의 종류는 많지만, 잘 쓰이지 않는 태그들도 많이 존재하며, 특정 브라우저에서는 지원하지 않는 태그들도 있습니다.
따라서 모든 태그를 공부하는 것은 실용적이지 않을 뿐만 아니라 매우 비효율적입니다.
특정 태그가 전세계적으로 널리 쓰이고 있는지(점유율), 다양한 브라우저에서 지원하는 태그인지 확인할 수 있는 사이트( https://caniuse.com/ ) 를 소개합니다.
- inline과 block
* inline element : 콘텐츠(텍스트)가 있는 부분만큼만 공간을 차지
ㄴ 인라인 태그만 입력할 경우, 줄바꿈 없이 모든 인라인 태그의 내용이 한 줄에 이어져 보임
ex) <a>, <span>, <time>, <object>
* block element : 하나의 태그가 한 line의 공간을 박스모양으로 전부 차지 -> CSS로 박스 크기 변경 가능
ex) <p>, <div>, <h1>, <ul>, <ol>, <li>, <address>, <nav>, <menu>, <mark>, <blockquote>
- HTML 태그 정리
<b> : 글씨 굵게 (bold : 굵게)
<p> : 단락 구분, 태그 끝나면 자동 줄바꿈 (paragraph : 단락)
<h1> : 한 페이지에 하나만 있어야 하는 최상단 제목. <h6>까지 존재. 숫자가 커질수록 하위의 제목
<ol> : 순서가 있는 목록. 1. 2.처럼 숫자 자동 생성. (Ordered List)
<ul> : 순서가 없는 목록. 점이 자동 생성 (Unordered List)
ㄴ <ol>과 <ul> 의 자식태그로 <li>, <script>, <template> 만 가능하다.
<menu> : <ul>와 마찬가지로 순서가 없는 목록을 나타낼 때 사용
ㄴ 거의 쓰이지 않는다.
<li> : 가능한 부모 태그는 <ol>, <ul>, <menu> 뿐이다. <ol>, <ul>이 <li>의 자식 태그가 될 수도 있다.
<a> : 앵커 태그. 하이퍼 링크 참조할 때 사용. <a> 태그로 만드는 모든 하이퍼링크는 href라는 속성을 사용할 것임
ex) <a href= “https://www.naver.com”>Link is here!</a>처럼.
<a href=“google.com”>처럼 정확한 주소를 사용하지 않는 것은 HTTP 프로토콜이 아닌 파일 프로토콜을 사용한다는 뜻이고, 따라서 원하는 페이지로 이동하지 않고 내 컴퓨터의 파일 경로를 탐색하게 된다.
<img> : 이미지 태그. 닫는 태그 없음. 주요 속성 : src, alt
ㄴ src 속성 :
1. 같은 파일 경로의 컴퓨터에 저장된 “파일명.확장자” 입력
(다른 폴더에 이미지가 있는 경우 -> “해당 폴더명/파일명.확장자” 로 입력)
<img src = "chicken.jpg" alt="chicken image">
2. 웹 이미지의 URL 복사(주의 : 저작권)
<img src="https://en.wikipedia.org/wiki/Chicken#/media/File:Male_and_female_chicken_sitting_together.jpg" alt="chicken image">
ㄴ alt 속성 : 화면에 글자로 표시되지 않음.
이미지를 불러오지 못한 것에 대한 설명 or 이미지에 대한 설명을 alt 속성에 작성하면, 스크린 리더가 alt속성을 읽는다.
-> 필수는 아니지만 웹 접근성 면에서 유용, 권장
* 스크린 리더 : 시각 장애인을 위한 화면을 읽어주는 프로그램
* 웹 접근성 : 일반적으로 스크린 리더 사용자가 웹에 접근하기 편리한 정도를 의미
<hr> : 수평 가로줄. 닫는 태그 없음. 스타일 변경 가능
<br> : 줄바꿈. 닫는 태그 없음. 하나의 문단, 덩어리를 묶어 줄을 바꾸는 <p>와는 의미 자체가 다르다.
<sup> : 윗 첨자(=superscript)
<sub> : 아래 첨자(=subscript)
<blockquote> : 태그 안의 텍스트가 긴 인용문임을 알려줌
<address> : 연락처 정보 표기
ex)
<address>
<a href="mailto:jun_dev@naver.com">Email : jun_dev@naver.com</a>
</address>
일반적으로 HTML에서 표는 아래의 구조를 따른다.
<table>
<thead>
<tr>
<th></th>
<th></th>
<tr>
</thead>
<tbody>
<td></td>
<td></td>
</tbody>
<tfoot>
</tfoot>
</table>
이 구조를 이용해 간단하게 만든 표는 아래와 같다.
| 이름 | 국어 | 수학 |
|---|---|---|
| 민수 | 82 | 61 |
| 영민 | 76 | 67 |
| 평균 | 79 | 64 |
*표를 만드는 데 사용되는 태그
<table> : 표가 삽입될 것을 알림
<th> : table head = 테이블 머리말
<tr> : table row = 한 행
<td> : table data = 하나의 셀(데이터)
<thead> : 머리말 그룹. 표의 header임을 알려줌
<tbody> : 본문 그룹. 표의 body임을 알려줌
<tfoot> : 꼬리말 그룹. 표의 foot임을 알려줌. 주로 데이터의 총합, 평균이 있음
-> 시멘트 마크업 역할. 복잡한 표를 이루는 코드를 이해하기 쉽게 & 접근성
*표를 만드는 데 사용되는 속성(셀 합치는 기능)
colspan : 열. 가로 길이
rowspan : 행. 세로 높이
ex) <th colspan=“2”> : 테이블의 머리말을 가로 길이가 2가 되도록 셀을 합친다.
----------------------------------------------------------------------------------------------------------------------
<form> : 입력 데이터를 그룹화해서 담는 상자(컨테이너) 역할. 모든 form data는 HTTP 요청을 통해 전송된다.
ㄴ action 속성 :
form data를 제출했을 때 제어하여 데이터를 보낼 위치와 시간, 어떤 유형의 HTTP 메서드를 사용할지를 결정함
ex) reddit.com 검색창의 폼은 <form action=“/search”> 인데, 이때 chicken을 검색 -> HTTP 요청을 통해 form data인 “chicken”이 서버로 전송 -> 대량의 데이터베이스에서 검색해서 이미지/게시물 등의 결과를 찾아 웹 페이지로 조합
-> 응답 : 페이지를 우리에게 보냄 -> reddit.com/search/?q=chicken 으로 이동하게 됨
모든 form data는 HTTP 요청을 통해 전송된다.
- input과 label태그
<input>
ㄴ type 속성에 자주 사용되는 data type : “text”, “number”, “password”, “color”, “date” , “radio”, “range”, “checkbox” 등이 존재한다.
ㄴ placeholder 속성 : 입력 전에 무엇을 입력해야 하는지를 알려주는 미리보기 역할
ㄴ name 속성의 속성 값 : 제출되는 폼 데이터를 서버로 전송(type=“submit”)할 때 서버가 찾는 간단한 값이다.
쉽게 말하면 사용자가 입력한 폼 데이터를 서버측에서 식별할 때, input태그의 name속성을 통해 식별 한다는 것이다.
input을 쓰면 거의 필수로 써야하며, 제출된 곳의 URL을 결정한다. 보통 공백이 없고 짧게 쓴다.
ex) http://www.reddit.com/search/q=chicken 는 <input name=“q”>이기 때문에 이렇게 표시되는 것이다.
Q. 사용자가 제출한 데이터가 URL에 표시되는 문제는 어떻게 해결?
ㄴ HTTP GET요청을 하면 제출된 데이터가 URL에 표시되나, HTTP POST요청으로 제출된 데이터가 URL에 표시되지 않도록 할 수도 있다. 보안이 좋아지는 것은 아니고 단지 사용자에게 URL에 정보가 보이냐 안 보이냐 차이 정도이다.
<label> : 사용자 인터페이스(UI)에 대한 설명을 나타냄
(스크린리더가 form안에서 label의 for 속성을 읽어줘서 사용자와 상호작용)
* input과 label의 연결
ㄴ 연결하는 이유(장점) :
1. <label>텍스트</label>와 <input>의 연결된 요소(ex: 체크박스, text)가 있는 경우 ‘텍스트’를 클릭하면 요소 곧바로 선택 가능 -> 작은 스크린 기기에서 사용자가 클릭하기 편함
2. 웹 접근성(스크린 리더가 <label>의 for 속성을 읽어서 사용자의 이해를 도움)
방법1 : label의 for속성과 input의 id 속성의 속성값을 똑같게 하여 두 태그를 형제 관계로 둔다.
-> 스타일을 각각 따로 지정하기 쉬워서 더 많이 사용함. 권장하는 방법
ex)
<label for="content"></label>
<input type="text" id="content">
방법2 : <label>의 자식태그로 <input> 사용(label의 for속성과 input의 id속성 사용X)
-> 코드가 더 짧지만 이 방법은 흔하지 않음.
ex)
<label>
<input type="text">
</label>-------------------------------------------------------------------------------------------------------------------------
<pre> : 입력하는 대로 출력됨(단, 특수문자는 entity code표 참고)
<base> : 문서 안에 존재하는 모든 URL의 기본구조가 같을 때 사용 가능
ㄴ <head> 안에서만 사용 가능하며, 닫는 태그가 없음
ㄴ 문서에 단 1개만 존재 가능
ex)
<head>
<base href="https://www.naver.com/">
</head>으로 설정하면
<a href="weather.html">날씨</a>'날씨' 를 클릭 시 https://www.naver.com/weather.html 로 이동하게 된다.
즉, <base> 에서 지정한 URL을 입력할 필요가 없어지게 된다.
- 용어 정의에 관한 태그
<dl> : 설명 목록(Description List)을 감싸는 태그로, 용어 사전 만들 때 사용. <dt>, <dd> 를 자식태그로 가진다.
<dt> : 용어(description term)
<dd> : 설명(decription definition)
ex)
<dl>
<dt>저어하다</dt>
<dd>염려하거나 두려워하다</dd>
</dl>
- 시멘틱(Semantic) 태그
ㄴ semantic markup 종류 : <header>, <footer>, <nav>, <section>, <article>, <main>, <div>, <figure>, <figcaption>, <details>, <summary>, <data>, <abbr> 등..
ㄴ 페이지의 내용을 그룹화 해주는 역할이며, 위치/기능별로 다르다.
ㄴ semantic markup을 통해 묶인 그룹은 테두리, 색 등 CSS 처리 가능
* 중요한 이유
1. 마크업에 의미를 부여해서 무슨 코드인지, 어떤 역할을 하는지 쉽게 알아볼 수 있음
2. 접근성 – 스크린 리더를 쓰는 사람들이 더 쉽게 접근하기 위해
3. SEO(검색엔진최적화)를 위해서
보통 아래와 같은 구조를 가진다.
ex)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header></header>
<main>
<section></section>
<section></section>
</main>
<footer></footer>
</body>
</html>
<nav> : 같은 페이지 내의 다른 곳으로 이동, 다른 링크로 이동하는 부분의 모음
ex) 메뉴, 목차, 색인
<main> : <body>의 주요 콘텐츠. 반복되는 내용은 제외하는게 원칙
ex) 사이드바, 저작권 정보, 링크
<section> : 내용의 한 부분. 한 주제의 문단이라고 할 수 있다.
<header> : 머리말. 전체적 내용 소개
<footer> : 꼬리말
ㄴ <header>와 <footer> 는 보통 <main> 위 아래에 위치한다.
ㄴ 태그 안에 <header>나 <footer>를 넣을 수도 있다.
<article> : 독립적으로 구분된 부분. ex) 게시판, 블로그 글, 매거진이나 뉴스 기사 등에 사용
ㄴ <address>의 자식태그가 될 수 없다!
<aside> : 문서의 부수적인 요소, 주요 내용에 대한 부가적인 설명, 간접적인 부분에 사용
<time> : machine redable format(기계가 읽을 수 있는 형태)로 써야할 때는 datetime 속성을 쓴다.
ex)
글 작성일 : <time datetime="2022-12-19">12월</time>
<figure> : 일러스트, 다이어그램, 그래프 등 시선을 끄는 보기 요소
<figcaption> : <figure>태그가 포함하는 콘텐츠의 설명, <figure>가 부모태그이다.
ex)
<figure>
<img src="/apple.jpg" alt="apple">
<figcaption></figcaption>
</figure>
- 미디어 삽입 태그
<video> :
ㄴ <source>를 자식태그로 하여 별도로 소스를 지정할 수 있다.
ㄴ 태그의 속성은 아래와 같다.
ㄴ height, width : 생략 시 원본 크기로 재생
ㄴ muted : 처음 재생시 음소거 기본으로 설정
ㄴ autoplay : 자동 재생. 보안 상의 이유로 작동하지 않는 곳이 많음
ㄴ loop : 반복 재생
ㄴ controls : 재생, 재생시간, 중단, 음소거 등의 제어 버튼 출력
<source> : <video>, <audio>, <picture>등의 자식 태그로 사용되어 소스를 표시함
ㄴ type 속성 : 마임(MIME)타입 지정 ex) type="video/mp4", type="video/webm", type="video/ogg" 등..
ㄴ <source> 태그를 여러개 사용해 작동하지 않을 경우 대체할 수도 있다.
ex) <video> 태그의 src속성으로 소스를 표시한 경우
<video src="bear.mp4" width="400" height="300" autoplay loop muted controls></video>ex) <source> 로 소스를 별도로 표시한 경우
<video width="400" height="300" autoplay loop muted controls>
<source src="bear.mp4" type="video/mp4">
</video>
<audio>
ㄴ <video> 와 마찬가지로 src, controls 속성 사용 가능하며, <source>로 소스 따로 표시 가능
- 그 외의 내용 정리
* 태그(tag) : 꺽쇠로 감싼 것
* 요소(element) : html문서에 사용된 태그
ㄴ 태그를 열기만 하고 닫지 않으면 연 시점부터 내용의 끝까지 해당 태그가 적용
ㄴ 모든 태그는 쓰임에 맞게 사용해야함( 디자인은 CSS로 수정 )
ㄴ 제목 태그는 번호 순서대로 사용해야만 함.
ex) h1~h3을 사용하지 않고 h4를 사용 (X)
* entity(앤티티) : &로 시작해 ;로 끝나는 형식. 이를 통해 브라우저에 특수기호, 예약문자를 렌더링할 때 사용 가능. entity number 또는 entity name 둘 다 사용 가능
* 예약문자(reserved character) : 화면상에 표시는 되나 브라우저 or IDE가 인식을 잘 못함.
ex) 부등호(>) : 태그로 처리함, 앤드기호(&) : 앤티티의 시작으로 처리함
-> '>' 글자는 < 로, '<' 글자는 > 로, '&'글자는 & 로 표시 가능
* generic(제네릭) : 데이터의 타입을 일반화. 즉 자료형을 미리 정하지 않고 여러 타입으로 사용할 수 있게 하는 것