HTML5 기본 요소
1. HTML5 기본 요소: 핵심 개념 및 목표
주요 개념
- 텍스트의 표현: 텍스트, 리스트, 링크
- 이미지와 테이블: 이미지, 테이블
2. 텍스트의 표현
2.1. 텍스트 요소
-
HTML 문서의 텍스트:
<body>태그 안에 태그 없이 작성 가능하지만, 줄 바꿈 문자는 무시되고 여러 개의 공백은 하나로만 출력됩니다. -
문단(
<p>태그): 전체 글을 내용에 따라 나누어지는 짧은 이야기 토막을 정의하며, 단락 전후에 빈 줄이 자동으로 추가됩니다. -
줄 바꿈(
<br>태그): 텍스트 내에서 강제로 줄 바꿈을 합니다. (break에서 유래) -
<pre>태그: 작성한 텍스트를 보이는 그대로 화면에 출력 (previously formatted text에서 유래) -
헤딩(
<h1>~<h6>태그): 웹 페이지의 머리 기사, 문서의 중요한 키워드를 사용자에게 보여줄 때 사용. 검색 엔진 색인화에도 활용 -
주석(
<!-- -->태그): 코드를 설명하는 목적으로 사용, 화면에는 출력되지 않음 -
텍스트 서식 태그:
<b>,<strong>: 볼드체<i>,<em>: 이탤릭체 (emphasized의 약자)<code>: 텍스트가 코드임을 표시<sup>,<sub>: 각각 위첨자, 아래첨자
-
수평선(
<hr>태그): 브라우저의 너비만큼 수평선을 그림 (horizontal line) -
특수 문자: HTML에서 특정 문자를 표현하기 위한 엔티티 코드 사용
-
: 공백 문자 -
<:< -
>:> -
":" -
&:&
2.2. 리스트 요소
항목을 나열하여 출력하는 데 사용
번호 없는 리스트 (Unordered List)
<ul>태그로 시작, 각 항목은<li>태그로 추가 (항목 앞에 블릿)
예시:
- HTML
- CSS
- JavaScript
코드:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
번호 있는 리스트 (Ordered List)
<ol>태그로 시작, 각 항목은<li>태그로 추가 (항목 앞에 번호)
예시:
- HTML
- CSS
- JavaScript
코드:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
정의 리스트 (Definition List)
- 항목을 정의(설명)하는 리스트
<dl>: 리스트의 시작<dt>: 리스트 항목 (텍스트, 이미지, 링크 등 포함 가능)<dd>: 항목을 설명하는 내용
예시:
- HTML
- 웹 페이지의 구조를 정의하는 마크업 언어
- CSS
- 웹 페이지의 스타일을 지정하는 언어
- JavaScript
- 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어
코드:
<dl>
<dt>HTML</dt>
<dd>웹 페이지의 구조를 정의하는 마크업 언어</dd>
<dt>CSS</dt>
<dd>웹 페이지의 스타일을 지정하는 언어</dd>
<dt>JavaScript</dt>
<dd>웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어</dd>
</dl>
2.3. 한글 코드
- euc-kr: KSC5601에 기반을 둔 대표적인 완성형 코드. 영어와 한글을 2바이트로 나타내는 방식. 메모리 공간을 적게 차지하고 호환성은 좋으나, 다국어 표현에는 어려움이 있음
- utf-8: 유니코드의 일종으로 한 문자를 나타내기 위해 1~4바이트를 사용하는 가변길이 문자 인코딩 방식. 모든 한글 문자를 표현할 수 있고, 다른 나라의 운영체제에서도 폰트 없이 한글을 볼 수 있음
2.4. 링크 요소
하이퍼링크(
<a>태그): 다른 문서로 이동해 갈 수 있는 단어나 이미지를 의미하며, anchor(닻)의 약자입니다.
주요 속성
- href: 링크 주소를 지정 (hypertext reference)
- 절대경로: 다른 웹 사이트 페이지 (예:
href="http://www.daum.net/") - 상대경로: 웹 사이트 내의 다른 페이지 (예:
href="../text/info.html") - 현재 페이지 내 위치: (예:
href="#map")
- 절대경로: 다른 웹 사이트 페이지 (예:
- target: 링크 클릭 시 새로운 페이지가 열리는 방법 지정
_blank: 새로운 브라우저 창에 출력_self: 현재 브라우저 창에 출력 (기본값)_parent: 부모 프레임에 출력_top: 최상위 브라우저 창에 출력
예시:
<a href="http://www.daum.net/" target="_blank">다음으로 이동</a>
참고: 보안상 외부 링크에
rel="noopener noreferrer"속성 추가를 권장합니다.
4. 이미지와 테이블
4.1. 이미지 요소
이미지(
<img>태그): 줄 바꿈이 없는 인라인 요소입니다.
브라우저의 이미지 처리 방식
- HTML 문서가 서버에 요청되면,
<img>태그는 서버에 이미지 파일을 요청하여 다운로드 받은 후 화면에 표시합니다.
이미지의 속성 설정
- width, height: 이미지의 가로, 세로를 픽셀(기본값) 또는 % 단위로 지정
- 이미지를 표시할 때 필요한 공간을 브라우저가 미리 확보
- alt: 브라우저가 이미지를 표시하지 못할 때 대체 텍스트(alternate text)를 지정 (정보 전달에 유용)
- align: 이미지와 텍스트의 배치 (HTML5에서는 CSS 사용 권장)
웹에서 사용되는 이미지 형식
- JPG (JPEG): 실사 사진 등 복잡하고 많은 색상에 적합, 손실 압축 사용(파일 크기 작음), 투명 배경/애니메이션 미지원
- PNG: 클립 아트 등 적은 색상, 무손실 압축(파일 크기 큼), 투명 배경 지원
- GIF: 로고/클립아트, 256색, 무손실 압축, 투명 배경, 애니메이 션 지원
큰 이미지 처리 방법
<img>태그의width,height속성으로 크기를 지정할 수 있으나, 서버로부터 원본 이미지를 다운로드하여 처리하므로 페이지 적재 속도가 느려지고 모바일 장치에서는 데이터 요금의 문제가 생길 수 있습니다.- 서버에 올리기 전에 크기를 줄이는 것이 좋으며, 일반적으로 웹에서 이미지는 800 x 800 픽셀보다 작게 사용하는 것이 권장됩니다.
썸네일(Thumbnail)
썸네일: 작은 이미지를 의미하며, 웹에서는 작은 이미지를 먼저 표시하고 클릭하면 원본 이미지가 나타나도록 하는 데 사용됩니다.
4.2. 테이블 요소
테이블(
<table>태그): 데이터를 표 형태로 표시하는 데 사용됩니다.
테이블 구성 태그
<tr>: 테이블의 한 행 (table row)<td>: 하나의 데이터 셀 (table data)<th>: 각 열의 헤더 (table header)
테이블의 속성
- HTML5에서는
border속성만 사용이 권장됩니다. bgcolor,align,cellspacing,frame,rules등 다른 속성은 CSS로 대체해야 합니다.
열과 행의 병합
rowspan속성: 행 병합 (예:rowspan="2"는 2개 행 병합)colspan속성: 열 병합 (예:colspan="3"는 3개 열 병합)
테이블의 캡션
<caption>태그: 테이블에 대한 설명을 제공합니다.
테이블을 이용한 요소의 배치(레이아웃)
- 테이블의 셀 안에는 다른 HTML 요소(테이블, 리스트, 이미지 등)를 넣을 수 있습니다.
참고: HTML5에서는 레이아웃을 위해 테이블을 사용하는 것보다 CSS 레이아웃(플렉스, 그리드 등)을 사용하는 것이 표준입니다.