기본태그
<!DOCTYPE html>: 웹 문서의 유형을 html로 지정
<html lang="ko">: 문서를 html로 시작, 언어를 한국어로 지정
<head>: 주로 브라우저의 정보를 입력하는 곳
<meta>: 메타 데이터 입력, 주로<meta charset="UTF-8">처럼 입력
<title>문서 제목
<body>문서 내용을 입력
//예
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>문서 구조 태그
<header>헤더 영역
<main>메인 영역
<section>콘텐츠 영역
<aside>사이드 바 영역
<footer>푸터 영역
<nav>내비게이션 영역, 문서 내 다른 위치, 다른 문서로 연결할 때 사용
<article>독립적인 콘텐츠를 사용할 때
<section>콘텐츠 영역
<div>여러 소스 묶기
내용 입력 태그
텍스트 입력
<h1>, <h2>, <h3>, <h4>, <h5> ...제목
<p>단락
<br>줄 바꿈, 닫기태그 없음
<blockquote>인용문, 들여쓰기 적용됨
<strong>텍스트 굵게, 주로 중요한 내용일 때
<b>텍스트 굵게, 단순히 굵게 표시할 때
<em>텍스트 기울임, emphasis의 준말, 강조할 때
<i>텍스트 기울임, italic의 준말, 단순히 기울여 표시할 때
<u>텍스트 밑줄
<s>텍스트 취소선
<abbr>줄임말
<cite>참고 내용
<code>소스 코드
<small>작은 텍스트
<sub>아래 첨자
<sup>위 첨자
<ins>공동작업문서에 새로운 내용 삽입
<del>공동작업문서에 기존 내용 삭제
목록 입력
<li> 태그를 이용해 목록을 생성한다.
기본형(ol : 순서가 있는 목록(ordered list)
<ol>
<li>항목 1</li>
<li>항목 2</li>
</ol>type=
- "1" 숫자(기본값)
- "a" 영문 소문자
- "A" 영문 대문자
- "i" 로마 숫자 소문자
- "I" 로마 숫자 대문자
start=- "3" 3부터 시작
기본형(ul) : 순서가 없는 목록(unordered list)
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>설명 목록 만들기 태그
<dl>
<dt>이름</dt>
<dd>설명</dd>
</dl>
<dl>: 설명 목록 만들기 태그
<dt>설명할 용어(Term)<dd>설명할 내용(Description)
표입력
기본형
<table>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
<table>
<caption>표 제목<tr>행 삽입<td>셀 삽입<th>셀 삽입(진하게 표시)<thead>표 중 제목, 여러 페이지에 걸쳐 고정 가능<tbody>표 중 본문<tfoot>표 중 요약, 여러 페이지에 걸쳐 고정 가능
<td>, <th>의 행, 열 합치기 속성
rowspan="2" 2개의 행 합치기
colspan="2" 2개의 열 합치기
합쳐질 셀들은 태그를 적지 않는다.
열의 스타일 속성 지정
열 1개만 지정할 땐, <col>
여러 열을 지정할 땐, <colgroup>
<colgroup>
<col>
</colgroup>
<colgroup>
<col style="~">첫번째 열 스타일 지정
<col>두번째 열은 스타일 지정 안함
<col style="~">세번째 열 스타일 지정
<col style="~">네번째 열 스타일 지정
<col span="2">동일한 스타일로 다섯, 여섯번째 스타일 지정
이미지 삽입
기본형
<img src="이미지 파일 경로" alt="대체용 텍스트">
<img>이미지 삽입
src=이미지 파일 경로
alt=대체용 텍스트
width=가로 크기 조절
height=세로 크기 조절
%브라우저 창의 크기 단위px픽셀 단위
오디오, 비디오 등 멀티미디어 파일 삽입
<object> 기본형
오디오, 비디오, PDF등을 삽입할 때 사용한다.
<object width="너비" height="높이" data="파일"></object><embed> 기본형 - 닫기 태그 없음
오디오, 비디오, 이미지 등
<embed src="파일 경로" width="너비" height="높이">플러그인 필요 없이 브라우저에서 바로 재생하는 태그(html 5부터)
<audio> 기본형
<audio src="오디오 파일 경로"></audio><video> 기본형
<video src="비디오 파일 경로"></video>다음은
<audio>, <video>태그의 속성들
controls=컨트롤 바 표시
autoplay=자동 재생
loop=반복 재생
muted=음소거
preload=로딩방법, 사용할 수 있는 값은 auto(기본값), metadata, none
width=, height=비디오 플레이어의 너비, 높이 지정
poster="파일 이름" 비디오 플레이어의 재생 전 포스터
*muted autoplay loop크롬 브라우저 비디오 자동 재생
하이퍼링크 삽입
기본형
<a href="링크할 주소">텍스트 또는 이미지</a>
<a>하이퍼 링크 삽입
href=링크 주소
target="_blank"새 탭에서 열기
텍스트 링크
<p><a href="~">표시 텍스트</a></p>이미지 링크
</a><img src="이미지 파일 경로" alt></a>폼 입력
기본형
<form [속성="속성값"]>여러 폼 요소</form>
<form>
method=
- get 사용자 입력 내용이 드러나게 서버로 넘겨줌
- post 사용자 입력 내용이 드러나지 않게 서버로 넘겨줌
name=자바스크립트로 폼 이름 지정
action=서버 프로그램 지정
target=열어볼 파일 위치 지정
autocomplete=자동 완성 기능 지정(기본값 on)
<fieldset>
- 폼 내부에서 구역을 나눔
-<legend>구역 제목 붙이기
레이블 붙이기
기본형 - <label> 안으로 폼 요소 넣기
<label> 레이블명 <input></label>기본형 - for속성과 폼 요소의 id를 일치시키기(연결시키기)
<label for="id명">레이블명<input id="id명"></label>input 태그
input의 type 속성 값들
type =text 한 줄 텍스트
password비밀번호
search검색
urlurl
tel전화번호
checkbox체크박스 (중복 체크)
radio라디오 버튼 (unique 체크)
number숫자 스핀 박스(버튼으로 숫자 조절)
range숫자 슬라이드 막대
datelocal - 연, 월, 일
monthlocal - 연, 월
weeklocal - 연, 주
timelocal - 시, 분, 초, 분할 초
datetimeUTC - 연, 월, 일, 시, 분, 초, 분할 초
datetime-local- 연, 월, 일, 시, 분, 초, 분할 초
submit전송 버튼
reset리셋 버튼
imagesubmit 버튼 이미지
button일반 버튼
file파일 첨부 버튼
hidden사용자에게 보이지 않는 값 필드
text, password와 같이 쓰이는 속성들
size=화면에 출력할 글자 수
value=text 필드에 보여줄 내용, password에서 사용 안함
maxlength=최대 입력 가능한 글자 수
checkbox, radio와 같이 쓰이는 속성들
value=서버에 전달될 값
checked=기본으로 선택하고 싶은 항목
name=radio 전용, 여러 옵션의 공통 이름
number, range와 같이 쓰이는 속성들
min=최소값(기본값 0)
max=최대값(기본값 100)
step=조정할 단위값(기본값 1)
value=초기값
submit, reset와 같이 쓰이는 속성들(버튼 속성!)
value=버튼에 표시할 내용
image와 같이 쓰이는 속성들
src=이미지 경로
alt=대체 텍스트
button와 같이 쓰이는 속성들
value=버튼에 표시할 내용
onclick=클릭 시 실행할 JS함수
<input> 의 다른 주요 속성들
autofocus=페이지를 불러오자마자 마우스 포인터가 표시 예) autofocus
placeholder=힌트를 표시, 내용을 입력하면 사라짐 예) 아이디를 입력하세요.
readonly=읽기 전용 예) readonly="readonly" readonly="true"
required=필수 입력 필드 예) required="required" required
<input> 이외의 주요 태그들
<textarea>: 여러 줄의 텍스트 입력 영역
rows=세로 줄 수, 길 경우 스크롤 막대가 생성됨cols=가로 너비(문자 단위)
<select>: 드롭다운 목록 생성
size=항목 개수multiple=둘 이상의 항목을 선택<option>옵션
-value=서버에 전달될 값
-selected=기본 선택 항목
<datalist>: 미리 입력된 데이터 목록
<option>
-value=서버에 전달될 값
<button>: 버튼
type="submit"폼을 서버로 전송type="reset"폼 초기화type="button"일반 버튼,<input type="button">과 같음
시맨틱 마크업
시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말합니다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.
어떻게 작성할까?
시맨틱 마크업을 하기 위해선 각 태그를 용도에 맞게 사용해야 한다. 즉, 아래와 같은 것들을 말한다.
- 헤더/푸터에
<header>와<footer>사용 - 메인 컨텐츠에
<main>과<section>사용 - 독립적인 컨텐츠에
<article>사용 - 최상위 제목으로
<h1>사용 - 순서가 없는 목록으로
<ul>과<li>사용 - 내비게이션
<nav>사용
이런 식으로 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다.
예를 들어보자면, 효과를 부여하는 <strong> 과 <b> 태그가 있습니다. 둘은 동일하게 글자색을 진하게 하지만 <b> 태그의 경우는 그 자체가 "bold"를 의미하고 단순히 텍스트를 진하게 표시하는 역할을 한다. 따라서 서식상 다른 텍스트와 대비된 스타일로 강조를 하고 싶을 때 사용한다.
하지만 <strong>의 경우는 단순히 보여지는 강조가 아닌 실제로 페이지 내의 중요한 부분으로 브라우저에게 알려주는 역할을 한다. 브라우저가 strong 태그를 해석할 때 페이지 내에서 중요한 부분으로 이해하며, 이는 브라우저에서 지원되는 웹 접근성(Web Accessibility)에 큰 기여를 할 수 있다.
특징
검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다.
웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있다.
단순한 div , span 으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 더 좋다.
실무에서 시맨틱 마크업이 완벽하게 쓰이는 것은 이상적이긴 하지만, 이러한 특징을 고려하여서 웹 사이트를 구성하는 것이 많은 측면에서 바람직하다고 볼 수 있다.
