반응형
1. <h1>~<h6> 태그 – 제목 표시하기
① 제목 텍스트로써 글자가 크고 진하게 표시됨
② 제목 크기에 따라 <h1> ~ <h6> 태그까지 사용가능하며 숫자가 작을 수록 글씨가 커짐
③ HTML 특성상 space바를 여러 번 입력해도 공백 한 칸으로 인식하므로 특수기호를 사용하여 공백 추가
2. <p> 태그 – 단락 만들기
① 텍스트 표시할 때 가장 많이 사용하는 태그
② 텍스트 단락을 만들어 주는 태그, 단락이란 앞 뒤에 줄 바꿈이 있는 텍스트 덩어리를 의미
③ 태그를 만날 때까지 텍스트를 한 줄로 표시하고 브라우저 사이즈에 따라 자동 줄바꿈
3. <br> 태그 – 줄 바꾸기
① 텍스트 단락에 Enter를 입력해도 웹 브라우저에서는 한 줄로 표시되기 때문에 줄 바꿀 때 사용
4. <hr> 태그 – 수평 줄 넣기
① 텍스트 단락의 주제가 바뀌거나 분위기 전환용으로 사용되며 기본 가로줄 표출
② 표출되는 기본 가로줄은 CSS로 삭제 가능
5. <blockquote> 태그 – 인용문 넣기
① 다른 블로그나 사이트의 글을 인용할 경우 사용
② <blockquote>를 사용한 단락은 다른 텍스트보다 더 들여쓰기가 되어 다른 단락들과 구별이 가능
③ 인용한 사이트의 주소가 명확할 경우 cite 속성을 이용해 주소 표시 가능
<!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>
<!--zencoding 같은 태그 여러개 만들 때 *개수-->
<!--h1+h2+p*2+hr+blockquote-->
<!--h1 : 큰 제목 표시 태그-->
<h1>제주 이색 여행지</h1>
<!--h2 : 두 번째 큰 제목 표시 태그-->
<h2>야외 텐트를 닮은 건축물 "테쉬폰"</h2>
<!--단락 표시 태그-->
<p>아일랜드 출신 이피제 신부가 1945년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장,
성당으로 활용됐습니다.
</p>
<!--br : 줄 바꿈 태그-->
<p>제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있는데, <br>
국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다.</p>
<!--hr : 가로줄 삽입 태그-->
<hr>
<!--blockquote : 인용문구 삽입 태그-->
<blockquote>
성이시돌목장은 제주특별자치도 제주시 한림읍 금악리에 있는 목장이다.
특히 이시돌목장은 제주 지역 최초의 전기업목장으로 1961년 11월 말 제주시 한림읍
금악리에 세워 양돈 사업을 실시하였으며 면양을 사육하였던 것으로 알려져 있다.
이시돌목장의 특색있는 건축양식으로 테쉬폰도 유명하다.(출처 : 향토문화전자대전)
</blockquote>
</body>
</html>
6. <pre> 태그 – 입력하는 그대로 화면에 표시하기
① <pre> 태그 사용 시 소스에 표시한 공백이 브라우저에 그대로 표시
② <code>, <samp>, <kdb> 태그를 사용해 소스 코드 원본을 표출 할 때 사용
* 웹 문서를 소리로 읽어주는 기계나 점자로 표시해주는 기계는 태그를 건너뛰므로 태그에 대체 텍스트 추가 권장
<!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>로컬 스토리지(Local Storage)를 저장하는 함수</title>
</head>
<body>
<h3>로컬 스토리지(Local Storage)를 저장하는 함수 : </h3>
<!--pre : 작선한 내용 그대로 웹 브라우저에 표출하는 태그-->
<pre>
function savethelocal(){
var second = document.getElementById("second");
var thevalue = second.value;
localStorage.setItem(1, thevalue);
gettheLocal();
}
</pre>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-2 HTML' 카테고리의 다른 글
| [HTML] 02-3 목록을 만드는 태그 (0) | 2021.09.05 |
|---|---|
| [HTML] 02-2 텍스트를 한 줄로 표시하는 태그 (0) | 2021.09.05 |
| [HTML] 01-2 HTML 기본 (0) | 2021.09.05 |
| [HTML] 01-1 웹 개발 기본 (0) | 2021.08.30 |
| [Visual Studio Code] 비주얼 스튜디오 코드 설치 (0) | 2021.08.30 |
댓글