해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
이번에는 HTML lesson 4~6의 내용인 기본 태그, 텍스트 관련 태그, 하이퍼링크에 대해 알아보겠습니다.
3. HTML5 Tag - Basic
웹 페이지를 구성하는 기본 태그는 다음과 같습니다.
문서 형식 정의 태그 (Document Type Definition, DTD)
출력할 웹 페이지의 형식을 브라우저에 전달합니다.
문서의 최상위에 위치해야 하며, 대소문자를 구별하지 않습니다.
<!DOCTYPE html>
html 태그
모든 HTML 요소의 부모 요소이며 웹 페이지에 단 하나만 존재합니다.
특히 lang
어트리뷰트를 사용하는 경우가 많습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
</body>
</html>
head 태그
메타데이터를 포함하기 위한 요소이며 웹 페이지에 단 하나만 존재합니다.
화면에 표시되지 않으며, 화면에 표시되는 요소를 포함할 수 없습니다.
메타데이터는 다음과 같습니다.
<title>
: 문서의 제목 정의 - 브라우저 탭에 표시<style>
: HTML 문서에 대한 style 정보 정의<link>
: 외부 리소스와의 연계 정보 정의 - 주로 외부 CSS 파일 연계에 사용<script>
: client-side Javascript 정의 - src 어트리뷰트로 외부 파일 업로드 가능<meta>
: 브라우저, 검색엔진이 사용하는 description, keywords, author, 기타 메타데이터 정의에 사용
→charset
어트리뷰트는 브라우저가 사용할 문자셋 정의
body 태그
HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재합니다.
4. HTML5 Tag - Text
제목(Headings) 태그
제목을 나타낼 때 사용하며 h1에서 h6까지 태그가 있습니다.
h1이 가장 중요한 제목을 의미하며, 제목 태그는 제목 이외에는 사용하지 않는 것이 좋습니다.
글자 형태(Text Formatting) 태그
- bold체
<b>
: non-semantic
<strong>
: semantic (웹 표준 준수하기 위해 더 바람직함)
- Italic체
<i>
: non-semantic
<em>
: semantic
- 기타 태그
<small>
: small text
<mark>
: highlighted text (형광펜 느낌)
<del>
: deleted (removed) text (취소선)
<ins>
: inserted (added) text( 밑줄)
<sub>
: subscripted(아래에 쓰인) text
<sup>
: superscripted(위에 쓰인) text
본문 태그
<p>
: 단락 지정
<br>
: (강제) 개행, 종료 태그 X
→ 연속된 공백을 삽입하기 위해서는
사용
<pre>
: 작성된 그대로 브라우저에 표시
<hr>
: 수평줄 삽입
<q>
: 짧은 인용문, 브라우저는 큰따옴표 “”로 표시
<blockquote>
: 긴 인용문, 브라우저는 들여쓰기 처리
5. HTML의 핵심 개념인 Hyperlink
하이퍼링크(hyper link)는 기존 문서나 텍스트의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 뜻합니다.
HTML link는 hyperlink를 의미하며 <a>
로 작성합니다.
href 어트리뷰트
이동하고자 하는 파일의 위치 즉, 경로를 값으로 받고 있습니다.
경로(path)는 파일 시스템 상에서 특정 파일의 위치를 의미합니다.
디렉토리(Directory)
디렉토리는 파일 시스템 내의 존재물이며, 폴더라고 불립니다.
루트 디렉토리 : 파일 시스템의 최상위 디렉토리
- Unix: /
- Windows: C:\
홈 디렉토리 : 사용자에게 각각 할당된 개별 디렉토리
- Unix: /Users/{계정명}
- Windows: C:\Users{계정명}
작업 디렉토리 : 작업 중인 파일이 위치한 디렉토리
- ./
부모 디렉토리 : 작업 디렉토리의 상위 디렉토리
- ../
파일 경로(File path)
파일 경로는 파일 시스템에서 파일의 위치를 나타내는 방법으로 절대경로와 상대경로가 있습니다.
절대경로(Absolute path)는 루트 디렉토리를 기준으로 파일의 위치 나타냅니다.
상대경로(Relative path)는 현재 작업 디렉토리를 기준으로 상대적인 위치를 가리킵니다.
target 어트리뷰트
링크를 클릭했을 때 윈도우를 어떤 방식으로 오픈하는지 지정합니다.
_self
: 현재 윈도우에서 오픈 (기본값)
_blank
: 새로운 윈도우나 탭에서 오픈
target="_blank"
로 오픈하는 경우, 외부 페이지에서 악의적인 페이지로 리다이렉트 할 수 있는 보안 취약점(Tabnabbing 피싱 공격)이 있습니다.
이를 대비하기 위해 rel="noopener noreferrer"
를 추가하는 것을 권장합니다.
기본 태그, 텍스트 태그, 링크 태그에 대해서 알아봤습니다.
다음 게시글에선 아직 남은 HTML의 태그에 대해서 알아보겠습니다.