* <hn> 제목 태그
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>제목
제목
제목
제목
제목
제목
* <p> 단락 태그
<p> 앞뒤에 줄바꿈이 있는 텍스트 덩어리 </p>앞뒤에 줄바꿈이 있는 텍스트 덩어리
----
<br>태그를 2개 사용하면 텍스트 단락이 생긴 것처럼 보이지만, 실제로 웹은 이것을 텍스트 단락으로 인식하지 않는다.
* <br> 줄바꿈 태그
안녕하세요. <br>
저는 블로거입니다. 안녕하세요.
저는 블로거입니다.
----
텍스트단락에서 엔터로 줄바꿈해도 웹에선 한 줄로 표시된다. 줄을 바꿀 위치에 <br>태그를 사용한다. <br>태그는 break의 줄임말이고, 닫는 태그는 없다.
* <blockquote> 인용 태그
<h1>제주 여행지</h1>
<h2>야외 텐티를 닮은 건축물 "테쉬폰"</h2>
<p>아일랜드 출신 임피제 신부가... 활용했습니다.</p>
<p>제주에서 점차 다른 지방으로... 남아 있는데,<br>
국내 근현대 건축사의 ... 평가합니다.</p>
<hr>
<blockquote>성이시돌목장은 제주특별자치도... 테쉬폰도 유명하다.
</blockquote>-----
* <blockquote>를 사용해 인용한 문장은 다른 텍스트보다 안으로 들여써져서 구분된다.
* <pre> 입력하는 그대로 표시되는 태그
<pre> 텍스트 텍스트 텍 스트 </pre>----
* HTML에서는 많은 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시된다. 하지만 <pre>태그를 사용할 경우, 소스에 표시한 공백이 브라우저에 그대로 표시된다.
* <pre>태그 사용시 접근성에 대해 고려해야한다. 웹문서를 소리로 읽어주는 기계나 점자로 표시해주는 기계는 <pre>태그가 적용된 부분을 만나면 건너뛰어버리기 때문이다. 따라서 그 부분의 대체 텍스트를 추가하는 것이 좋다.
* 복습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>재난 대비 국민행동 요령</h1>
<blockquote>
지진으로 흔들리는 동안은 테이블(책상) 빝에 들어가 몸을 보호한다. <br>
(출처:국민안전처)
</blockquote>
</body>
</html>
* <strong>. <b> 굵게 표시하는 태그
<strong>굵게 강조할 텍스트</strong>
<br>굵게 표시할 텍스트</br>굵게 강조할 텍스트
굵게 표시할 텍스트
----
* 중요한 내용이어서 강조해야 할 때는 <strong>태그 사용, 문서의 키워드처럼 단순히 굵게 표시할 때는 <b> 태그를 사용한다. <strong>태그를 사용하면 그 부분이 강조디ㅗ었다고 화면 낭독기가 알려준다.
* <em>, <i> 이탤릭체로 표시하기
<i>이탤릭체로 표시할 텍스트</i><br>
<em>이탤릭체로 강조할 텍스트</em>이탤릭체로 표시할 텍스트
이탤릭체로 강조할 텍스트
----
* 문장의 특정 부분을 강조하고 싶을 때는 <em>태그를 사용하고, 마음 속의 생각이나 꿈, 기술적인 용어, 다른언어의 관용구 등에는 <i>태그를 사용한다. 다시 말해, 중요한 내용을 <em>, 단순히 표시하는 것이 <i>태그이다.
* 예제
<h2>제주 이색 여행지 - 이중섭 거리</h2>
<p><strong>주말</strong>마다 <b>'서귀포문화예술디자인시장'</b>이 열립니다.</p>
<p><em>'아트마켓'</em>이라고도 부르는데, <i>문화예술체험</i>이나 <i>공연관람</i>을 할 수도 있고<br>
작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.</p>
* <mark> 형광펜 효과 태그
<mark>텍스트 텍스트</mark>텍스트 텍스트
---
선택한 부분 배경색이 노란색이 되어 형광펜효과를 낸다.
* <span> 줄바꿈 없이 영역 묶기 (중요)
<span>내용내용내용</span>내용내용내용
----
태그자체로는 아무 의미가 없지만, 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용한다.
텍스트 영역을 블록 단위, 즉 단락을 통째로 묶고 싶다면 <span> 대신 <div>를 사용한다.
* 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>야외 텐티를 닮은 건축물 <mark>"테쉬폰"</mark></h2>
<p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다. 제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있으며, <span style="color: blue;">국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고</span> 전문가들은 평가합니다.</p>
</body>
</html>
야외 텐티를 닮은 건축물 "테쉬폰"
아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다. 제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있으며, 국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다.
* 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>최근엔 <b>디지털 세상</b>을 살아가기 위한 기본 상식으로 <mark>코딩 교육</mark>이 시행되고 있다.</p>
</body>
</html>
최근엔 디지털 세상을 살아가기 위한 기본 상식으로
코딩 교육
이 시행되고 있다.
'HTML 공부' 카테고리의 다른 글
| HTML 기초 - 이미지 태그, 속성 (0) | 2020.11.29 |
|---|---|
| HTML 테이블 태그, 표만들기 -2 thead, tbody, tfoot (0) | 2020.11.28 |
| HTML 테이블 태그, 표 만들기 - 1 (0) | 2020.11.24 |
| HTML 목록 태그 - <ul>, <ol>, <li> (0) | 2020.11.23 |
| HTML의 기본 구조 (0) | 2020.11.22 |
