1. 사용하는 언어의 문자 코드 정의
html은 영어권 국가에서 사용하는 코드로 한글 인식이 어려울 경우가 있다.
때문에 초반에 메타 데이터를 지정하여 글자가 깨지는 현상을 방지할 필요가 있다.
한글 입력이 가능한 코드는 utf-8이며, 메타 데이터 지정은 <meta charset = “”> 을 이용한다.
중요: html의 태그는 기본적으로 쌍으로 사용된다.
다만 이는 해당 ‘형식’으로 정보를 표시해달라는 약속이다.
때문에 사용자에게 보여줄 필요가 없는 데이터나 특정 형식으로 구현이 불가능한 명령어는 단독으로 사용된다.
단독으로 사용되는 태그와 그렇지 않은 태그를 숙지하여야 코딩 작업 중에 실수가 생기지 않는다.
2. 문단 지정 태그 <p></p>
html은 줄바꿈을 Enter을 통해 적용하지 못한다.
때문에 문단 데이터를 지정하여 줄바꿈을 적용해줄 필요가 있다.
해당 태그는 <p>내용</p> 로 이는 문단을 뜻하는 paragraph의 약자이다.
3. 글자 크기 조절 코드: <h></h>
글자를 강조하는 ‘헤드 라인]에 사용하는 코드이다.
<h1></h1> 이 가장 큰 글자이며, h1~6 등 다양한 글자 크기로 설정이 가능하다.
헤드라인이기 때문에 기본적으로 글씨를 굵게하는 효과를 가지고 있다.
다만 h0은 일반 글자와 동일한 효과이므로, 강조를 위한 코드 작성에는 h1~6 으로 사용할 필요가 있다.
일반적으로 h4~h6는 일반적인 글자 크기와 같거나 작다.
4. 가로줄 Tag: <hr>
해당 코드는 내용에 가로줄을 그어 제목과 내용을 구분하는 용도로 사용한다.
일반적인 태그와 달리 가로줄을 긋는 것이기 때문에, ‘이를 통해 ‘구현’하고자 하는 규칙이 아니다.
hr 태그는 단독으로 기입하여 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML기본문서</title>
</head>
<body>
<h1>프론트엔드 웹 개발</h1>
<hr>
<p>html</p>
<p>css</p>
<p>자바스크립트</p>
</body>
</html>
5. 줄을 바꾸는 Tag: <br>
기본적으로 <p></p>를 사용하여 단락을 나누지만 문단 내에서 줄바꿈을 해야한다면 <br>을 입력하여 바꿀 수 있다.
이를 Line break라고한다.
문단을 지정하는 것이 아니기 때문에 <p></p>와 달리 문단별 간격에 차이가 있다.
이는 추후 style 설정을 통해 변경할 수 있기 때문에 <br>을 사용하는 것이 코드 구성에 이점이 크다.
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset = "utf-8">
<title>br tag를 배워보자</title>
</head>
<body>
<p>
p태그는
<br>단락을
<br>만들수
<br>있어요
</p>
</body>
</html>
6. 인용문 Tag: <blockquote></blockquote>
논문에서 인용한 내용을 표시할 때 사용하는 Tag이다.
<blockquote></blockquote>를 사용하는데, <p></p>보다 많은 공간을 앞에 할당하게 된다.
p Tag를 사용하여 유사한 모양을 구현할 수 있지만, 해당 Tag를 사용하여 국제 웹 표준에 따르는 것이 바람직하다.
이는 장애인 및 외국인이 해당 정보를 습득하기 편하도록 하기 위함이다.
7. 굵은 글씨를 표현하는 방법
7.1. 강조 Tag: <strong></strong>
글자에 강조 효과를 줄 수 있는데, <strong></strong> 을 사용한다.
특정 글자나 문장에 사용하면 Bold 처리와 같이 글자가 굵게 표시된다.
h1과 유사하게 보이지만 h1 Tag는 헤드라인을 위한 명령어이기 때문에 구분하여 사용하는 것을 권장한다.
만약 h1을 통해 글자를 굵게 표시한다면 다른 프로그래머와의 의사 소통이나 추후 코드 수정에 어려움을 겪을 수 있다.
7.2. 굵은 글씨 Tag: <b></b>
글자에 강조 효과를 줄 수 있는 Tag는 <strong></strong>만이 아니다.
<b></b> Tag 또한 강조 표시로 사용할 수 있는데, 이는 Bold와 동일하다.
출력되는 화면은 strong과 다르지 않으나 국제 웹 표준에 따라, 시각 장애인을 위해 구분할 필요성이 대두된다.
기술의 발전에 따라 TTS(문서 음성 인식)에서 strong과 b를 구분할 가능성이 높기 때문이다.
8. 기울어진 글씨를 표현하는 방법
8.1. 기울어진 강조 효과 Tag: <em></em>
해당 Tag는 기울어진 글씨를 표현해준다. 해당 Tag는 강조의 의미가 있다.
8.2. 기울어진 Italic 글씨체 Tag: <i></i>
<em></em>과 마찬가지로 글씨를 기울여준다.
하지만 강조의 의미는 없기 때문에 구분하여 사용할 필요가 있다.
strong 태그와 b 태그의 관계로 이해하면 된다.
9. 특정 정보를 부연 설명하는 Tag: <addr></addr>
해당 태그는 글자나 요소에 설명을 추가해주는 명령어이다.
<addr></addr> 을 사용하며 구현하고자 하는 내용을 <addr title=”A“> A에 기입하여 표현해 줄 수 있다.
내용을 추가한 경우 해당 글자나 요소에 마우스 커서를 올리면 추가한 내용이 표시된다.
10. 글자를 크기를 다르게 표현하는 Tag: <small></small> 과 <big></big>
해당 태그는 일반적인 글자 크기보다 더 크거나 작게 표현하고 싶을 때 사용할 수 있는 태그로, small은 p 태그를 기준으로 더 작게, big은 더 크게 표현된다.
11. 글자에 글을 긋는 방법
11.1. 글자에 줄을 긋는 Tag: <s></s> (가운데)와 <u></u> (아래)
글자에 줄을 그어 해당 정보가 수정되었었거나 강조함을 표현해준다.
11.2. 데이터가 유효하지 않음을 표현하는 Tag: <del></del>
데이터가 유효하지 않음을 표현할 때, <s></s> 태그를 사용하여 표현할 수도 있지만, <del></del> 태그를 이용할 수도 있다.
해당 Tag는 데이터가 유효하지 않음을 표현해 준다.
해당 Tag의 의의: html 문서의 구현과 동작에 있어 Tag는 표현 방식을 규정하는 도구이다.
때문에 html에서 어떠한 문자나 정보를 표현하기 위해서는 해당 정보에 Tag를 사용할 필요가 있다.
각 Tag가 가지는 자세한 의미와 정보를 잊어 버리더라도 이러한 기본 원리는 반드시 기억하도록 하자.
12. 글자(혹은 문장) 사이의 포함관계를 규정하는 Tag: <sub></sub> 와 <sup></sup>
글자 2개의 포함관계를 표현하는 Tag이다.
<sub>는 앞 글자를 수식하는 모양으로 아래에 위치하고 <sup>는 앞 글자를 수식하는 모양으로 위에 위치한다.
13. 입력 내용을 그대로 출력하는 Tag: <pre></pre>
pre 태그는 해당 태그 안에 있는 내용을 그대로 출력하는 기능으로 <> 태그를 제외하고 해당 태그 안에 입력된 내용을 그대로 출력한다.
14. <> 특수문자를 삽입하는 방법
컴퓨터는 <> 를 태그의 여닫이고 인식한다.
때문에 해당 문양을 넣고 싶다면 별도의 명령어를 입력해서 지정해야한다.
<는 어떠한 대상보다 작다 leaster의 약자로, >는 어떠한 대상보다 크다 greater의 약자로 지정한다.
< : < / > : >
15. 실습: 다음을 구현하라.
'HTML > 기본 이론' 카테고리의 다른 글
| [HTML] Chapter 06. 멀티미디어 삽입과 경로 지정 (0) | 2021.05.07 |
|---|---|
| [HTML] Chapter 05. 표만들기 (0) | 2021.05.06 |
| [HTML] Chapter 04. 목록 형성 (0) | 2021.05.05 |
| [HTML] Chapter 02. HTML 웹페이지를 만드는 방법 (0) | 2021.05.03 |
| [HTML] Chapter 01. HTML 기본 개념 (0) | 2021.05.02 |
