반응형
1. <strong>, <b> 태그 – 굵게 표시하기
① 경고나 주의사항처럼 중요한 내용은 <strong> 사용
② 키워드처럼 단순한 강조는 <b> 사용
2. <em>, <i> 태그 – 이탤릭체로 표시하기
① 문장 흐름상 특정 부분을 강조할 때 <em> 사용, 즉 중요한 내용을 이탤릭체로 표시할 때 사용
② 마음 속 생각, 꿈, 기술적 용어, 관용구 등 단순 이탤릭체로 표시하고 싶을 때 <i> 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제주 이색 여행지</title>
<!--CSS 영역-->
<style>
p { /*모든 p태그의 스타일을 지정*/
font-size: 16px; /*p태그의 글자 크기 16px*/
line-height: 25px; /*p태그의 줄간격 25px*/
}
</style>
</head>
<body>
<!--zencoding 묶음 표시 ()-->
<!--h2+(p>strong+b)+(p>em+i*2+br)-->
<h2>제주 이색 여행지 - 이중섭 거리</h2>
<!--strong, b : 글자 굵게 표시하는 태그-->
<p><strong>주말</strong>마다 <b>'서귀포문화예술디자인시장'</b>이 열립니다.</p>
<!--em, i : 글자 이탤릭체로 표시하는 태그-->
<p><em>'아트마켓'</em>이라고도 부르는데, <i>문화예술체험</i>이나 <i>공연관람</i>을 할 수도 있고<br>
작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.</p>
</body>
</html>
3. <q> 태그 – 인용 내용 표시하기
① 인용한 내용을 표시하기 위한 태그
② <blockquote> 태그와 차이점
- <blockquote> 태그는 블록 레벨의 태그로 다른 단락과 줄 바꿈 및 들여쓰기 발생
- <q> 태그는 다른 내용과 함께 한 줄로 표시하고 다른 내용과 구별하기 위해 인용 내용에 따옴표를 붙여 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 접근성(Web Accessiblity)</title>
</head>
<body>
<!--h1+(p>q)-->
<h1>웹 접근성</h1>
<!--q : 단락안에 인용문구 삽입 태그, " "가 자동으로 생성됨-->
<p>웹의 창시자인 팀 버너스 리 (Tim Berners-Lee)의 <q cite="http://www.w3.org/standards/webdesign/accessibility">웹의 힘은 보편성에 있다.
장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.</q>라는 말로 웹 접근성을 설명한다.</p>
</body>
</html>
4. <mark> 태그 – 형광펜 효과 내기
① <mark> 태그로 감싼 부분의 배경색이 노란색이 되고 형광펜으로 그어 놓은 듯한 효과
② HTML4에서는 형광펜 효과를 CSS나 스타일 시트로 적용했지만 HTML5에서는 <mark> 태그로 표시
5. <span> 태그 – 줄바꿈 없이 영역 묶기
① 태그 자체로는 아무 의미가 없지만 단락 안의 텍스트중 일부 영역만 스타일을 적용할 때 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제주 이색 여행지</title>
</head>
<body>
<!--(h2>mark)+(p>span)-->
<h2>
<!--mark : 텍스트에 형광펜 효과주는 태그-->
야외 텐트를 닮은 건축물<mark>"테쉬폰"</mark></h2>
<!--span : 텍스트 영역 묶는 태그-->
<p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장,
성당으로 활용됐습니다. <br>제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있으며,
<span style="color: blue;">국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다</span>고 전문가들은 평가합니다.</p>
</body>
</html>
6. <ruby> 태그 – 동아시아 글자 표시하기
① 주로 동아시아 국가들의 글자들에 주석을 함께 표기하기 위한 용도로 사용
② 주석으로 표시할 내용은 <ruby> 태그 안에<rt> 태그로 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Ruby</title>
</head>
<body>
<p>루비(Ruby)는 1995년, 일본의 프로그래머인 마츠모토 유키히로
<!--ruby : 동아시아 문자 표시 태그-->
<!--rt : ruby태그 안에서 주석으로 표시되는 태그-->
(<ruby>松本行弘<rt>まつもとゆきひろ</rt></ruby>)가 만든 프로그래밍 언어입니다.
</p>
</body>
</html>
7. 기타 텍스트 관련 태그들
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 텍스트 태그</title>
</head>
<body>
<!--(p>b>abbr)+(p>cite)+(pre>code)+(p>kdb)+(p>small)+(p>b>sub)+(p>sup)+(p>(s+strong))(p>u)-->
<!--abbr : 약자 표시 태그-->
<p><b><abbr title="Internet of Things">IoT</abbr></b>란 각종 사물에 센서와 통신 기능을 내장해
인터넷에 연결하는 기술을 의미한다.</p>
<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화,
<!--cite : 참고 내용 표시 태그-->
<cite>'비포선셋' </cite>중</p>
<pre>
<!--code : 소스 코드 표시 태그-->
<code>
function savethelocal() {
........
}
</code>
</pre>
<p> 웹 화면을 다시 불러오려면
<!--kbd : 사용자 입력 내용 표시 태그-->
<kbd>F5</kbd>키를 누릅니다.
</p>
<!--small : 작은 글자 표시 태그-->
<p>가격 : 13,000원<small>(부가세 별도)</small></p>
<!--sub : 아래 첨자 표시 태그-->
<p>물의 화학식은<b>H<sub>2</sub>O</b>다</p>
<!--sup : 위 첨자 표시 태그-->
<p>E = mc<sup>2</sup></p>
<!--s : 취소선 표시 태그-->
<p><s>34,000원</s><strong>19,000원</strong></p>
<!--u : 밑줄 표시 태그-->
<p>링크 표시 용도가 아니라 단순히 밑줄을 긋는다면 <u>u 태그</u></p>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-2 HTML' 카테고리의 다른 글
| [HTML] 02-4 W3C HTML 검사기 (0) | 2021.09.05 |
|---|---|
| [HTML] 02-3 목록을 만드는 태그 (0) | 2021.09.05 |
| [HTML] 02-1 텍스트를 덩어리로 묶어주는 태그 (0) | 2021.09.05 |
| [HTML] 01-2 HTML 기본 (0) | 2021.09.05 |
| [HTML] 01-1 웹 개발 기본 (0) | 2021.08.30 |
댓글