l 제목 (heading)
HTML은 제목을 표현할 수 있는 다양한 크기의 <h>태그를 제공
가장 큰 <h1>태그부터 가장 작은 <h6>태그까지 다양한 크기로 제목을 표현할 수 있음
+ <h> 태그의 위아래로는 약간의 여백이 자동을 삽입
<h> 태그 = 제목의 표현 기능 외에도 다른 중요한 역할이 있음
검색엔진 = 각 웹 사이트의 내용을 바로 <h>태그를 이용해 키워드를 수집, 내용 파악
따라서 HTML 문서에 포함되는 제목은 <h>태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률 높일 수 있음
+ HTML 문서의 제목에 해당하는 부분을 <big>태그나 <bold>태그를 사용하여 표현하지 않도록 함
- 종료 태그
대부분의 웹 브라우저는 종료 태그를 사용하지 않더라도 HTML 문서를 제대로 표현
하지만 종료 태그가 없으면 예상치 못한 오류나 결과가 발생할 수 있음
또한, XHTML이나 XML과 같은 문법이 엄격한 언어에서는 종료 태그의 유무를 엄격하게 검사 > 가급적 종료 태그를 빠트리지 말고 코드를 작성
l 단락 (paragraph)
단락이란, 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미, 문단이라고도 부름
HTML에서는 <p>태그를 이용하며 단락을 표현
+ <p>태그의 위아래로는 약간의 여백 (margin)이 자동으로 삽입
- 띄어쓰기와 줄 나누기
HTML 코드에서 띄어쓰기나 줄 나누기를 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에 전혀 영향 X > 웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식하기 때문
여러 번의 띄어쓰기와 줄 나누기를 표현하고자 <p>태그를 이용 > 하지만 <p>태그 내에서 작성된 여러 번의 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 표현
<br>태그 (break line)을 사용하면 새로운 단락을 만들지 않고도 줄을 나눌 수 있음
<br>태그 = 종료 태그가 없는 빈 태그 (empty tag)
- 텍스트 (text) 서식
HTML 코드에서 작성한 텍스트 서식을 그대로 표현하려면 <pre>태그를 사용
<pre>태그 (preformatted text) 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현
+ <pre>태그 내에 작성된 텍스트의 글꼴 (font)은 고정폭 글꼴 (horizontal rule)로 간단하게 만들 수 있음
l 서식 (Formatting)
HTML = 텍스트 (text)에 다양한 효과를 주는 여러 태그 (tag)를 제공
- 강조 효과
HTML 문서에서 텍스트를 굵게 표현하고 싶을 때에는 <b>태그(bold text)나 <strong>태그를 사용
<b>태그 - 단순히 화면의 텍스트를 굵게 표현
<strong>태그 - 텍스트를 굵게 표현해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함
HTML 문서에서 이탤릭체를 표현하고 싶을 때에는 <i>태그(italic text)나 <em>태그(emphasized text)를 사용
<i>태그 - 단순히 화면의 텍스트를 이탤릭체로 표현
<em>태그 - 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함
- 하이라이팅 효과
<mark>태그 – 텍스트에 하이라이팅 (highlighting)효과를 적용
- 삭제 효과
<del>태그(delete) – 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과
- 삽입 효과
<ins>태그(insert) – 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과
- 위첨자와 아래첨자 효과
위첨자 - <sup>태그(superscript)를 사용
아래첨자 - <sub>태그(subscript)를 사용
l 인용구 (Quotation)
HTML에서 인용구를 표현하는 방법
1. 짧은 인용구
<q>태그(quotation)를 사용하여 표현, 자동으로 앞뒤에 큰따옴표가 붙음
2. 블록 인용구
길이가 긴 인용문은 <blockquote>태그(block quotation)을 사용하여 표현
<blockquote>태그는 인용 부분을 별도의 단락으로 구분
- 축약형 표현
HTML에서 용어의 축약형을 표현하기 위해선=서는 <abbr>태그(abbreviation) 사용
<abbr>태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타남
- 주소 표현
<address>태그를 사용하면 HTML에서 주소 표현 가능
주소는 이탤릭체로 표현, 위아래로 약간이 공백이 자동으로 삽입
l 주석(comment)
주석이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 문구
주석은 다른 HTML 코드와는 달리 웹 브라우저에 의해 표현 X
HTML에서 주석 사용하는 방법 > <!-- 주석내용 -->
HTML 주석의 시작 태그 <!—에는 느낌표가 있지만 종료 태그 -->에는 느낌표 X
주석은 HTML 코드의 어디서든 사용 가능 ,여러 줄에 걸쳐 주석을 작성해도 정확히 인식
HTML 주석은 웹 페이지에 절대 나타나지 않음
HTML 코드에 삽입된 주석을 읽고 싶다면, 웹 브라우저의 페이지 소스 보기를 통해 확인 가능
+ 익스플로러 - 마우스 오른쪽 클릭 > 소스 보기, 파이어폭스 – F12 클릭 > HTML코드 확인
- 중첩 주석
HTML 주석은 HTML 코드의 어디서든 사용 가능, HTML 주석 안에 또 다른 주석 작성은 불가능
<!--
<!-- 주석 안에 또 다른 주석을 삽입했습니다. -->
위와 같이 어려운 코드의 이해를 돕기 위해서 개발자가 적어 놓은 설명입니다. -->
예제처럼 HTML 주석 안에 또 다른 주석을 삽입 > 삽입한 주석의 종료 태그를 첫 번째 주석이 자신의 종료 태그로 인식 > 삽입한 주석의 종료 태그 다음부터 첫 번째 주석의 종료 태그까지의 모든 내용이 그대로 웹 페이지에 노출
+ HTML 주석은 중첩해서 사용 X
l 엔티티 (Entity)
HTML에는 미리 예약된 몇몇 문자 존재 = HTML 예약어 (reserved characters)
HTML 예약어를 HTML 코드에서 사용 > 웹 브라우저는 그것을 평소와 다른 의미로 해석
HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋 = 엔티티 (entity)
Ex) &엔티티 이름; 또는 &#엔티티 숫자;
HTML 코드 내에서 <>를 사용하면 웹 브라우저가 그것을 어떻게 해석하는지 보여줌
HTML 코드에서 사용된 <>는 HTML 태그의 시작과 끝의 의미로 해석
+ 엔티티(entity)의 이름은 대소문자를 구분
- 발음 구별 부호 (diacritical marks)
악센트 (accent) - 발음을 나타내는 부호
악센트는 단독으로 사용 X > 보통 다른 문자와 함께 사용
정확하게 표기하기 위해 HTML에서는 발음 구별 부호를 제공
- 심볼 (symbol) 특수문자
HTML 예약어 이외에도 키보드에 입력할 수 없는 문자를 표현하기 위한 심볼 특수문자 사용 (수학 용어, 그리스 문자, 국제 통화 등)
l 문자셋
- 문자셋 (character set)
웹 브라우저가 HTML 문서를 정확하게 나타내기 위해서는 해당 문서가 어떠한 문자셋으로 저장되었는지 알아야 함 > HTML 문서가 저장될 때 사용된 문자셋에 대한 정보를 <head>태그 내의 <meta>태그에 명시
+ HTML4 > UTF-8의 경우
: <meta http-equiv =”Content-Type” content=”text/html; charset=UTF-8”>
+ HTML5 > UTF-8의 경우
: <meta charset=”UTF-8”>
- 문자셋의 종류
1. ASCII : 가장 처음 만들어진 문자셋, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자
2. ANSI : 윈도우에서 만든 문자셋, 총 256개의 문자 코드 지원
3. ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋
4. UTF-8 : 거의 모든 문자 표현 가능, 유니코드를 지원하는 HTML5의 기본 문자셋
'HTML' 카테고리의 다른 글
| HTML 기본 요소 (0) | 2022.06.30 |
|---|---|
| HTML 기초 (0) | 2022.05.20 |