HTML, CSS
HTML 기본 태그 구조
병호네
2024. 4. 10. 00:38
태그, 이건 꼭 알아두세요!
- 태그는 < 와 > 를 이용해 구분한다
- 태그는 소문자로 쓴다
예) < img src="maltese.jpg" >
- 여는 태그와 닫는 태그를 정확히 입력한다 (닫는 태그가 없는 태그도 있다)
- 적당하게 들여쓴다 • 태그는 속성과 함께 사용할 수 있다
예) < img src="maltese.jpg" width="150" height="160" >
텍스트를 묶어주는 태그
<hn> 태그 – 제목 표시
- 기본형 : <hn> 제목 </hn>
- 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그
- 크기 : h1 > h2 > h3 > h4 > h5 > h6
<p> 태그 – 텍스트 단락
- 기본형 : <p> 텍스트 </p>
- 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐
<br> 태그 – 줄 바꾸기
- 기본형 : <br>
- 줄을 바꿀 위치에 <br> 태그를 사용. 닫는 태그가 없음
<blockquote> 태그 – 인용문 넣기
- 기본형 : <blockquote> 인용 내용 </blockquote>
- 다른 텍스트보다 안으로 들여 써짐
<hr> 태그 – 분위기 전환
- 기본형 : <hr>
- 주제가 바뀔 때 분위기 전환. 수평 줄 생김
<pre> 태그 – 입력한 그대로 표시
- 기본형 : <pre> 텍스트 </pre>
- 소스에 표시한 공백이 그대로 표시됨.
- 프로그램 소스를 표시할 때 유용함
텍스트를 한 줄로 표시하는 태그 ①
<strong>, <b> – 굵게 표시
- <strong> - 중요한 내용이라서 강조해야 할 때
- <b> - 단순히 굵게 표시할 때
<em>, <i> – 이탤릭체로 표시하기
- <em> - 흐름상 특정 부분을 강조하고 싶을 때
- <i> - 단순히 이탤릭체로 표시할 때
코드작성
<body>
<h2>부산 여행지</h2>
<p><strong>매일</strong>마다 <b>'아름다운 바다가
'</b>펼쳐집니다.</p>
<p><em>'광안리와'</em>와, <i>해운대바다</i>가 제일 유명합니다
<i>야시장</i>들이 있고 <br>분위기 좋은 가게들이 많습니다.</p>
</body>
출력
텍스트를 한 줄로 표시하는 태그 ②
<q> 태그 – 인용 내용 표시
- 줄바꿈 없이 다른 내용과 한 줄에 인용 내용 표시
- 인용 내용 앞뒤에 따옴표(“ “) 추가됨
코드작성
<h1>웹 접근성</h1>
<p>웹의 창시자인 팀 버너스 리 (Tim Berners-Lee)의 <q
웹의 힘은 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는
것이 필수적인 요소이다.</q>라는 말로 웹 접근성을 설명한다. </p>
출력
텍스트를 한 줄로 표시하는 태그 ③
<mark> – 형광펜 효과
- 태그로 묶은 부분의 배경색이 노랑으로 표시됨.
<span>, <div> – 영역 묶기
- <span> - 줄 안에서 (인라인) 묶기
- <div> - 줄 바꿔 (블록) 단락으로 묶기
코드작성
<h2>가장 부산다운 건축물 선정<mark>'밀락더마켓’ </mark></h2>
<p>
부산시 2022 부산다운 건축상 수상작 발표 민락동 수변공원
복합문화공간 대상 수상 금상은
수영구 광안동 <span style="color:blue;">‘Samhyun HQ’</span>
</p>
출력
기타 텍스트 관련 태그들
이 외에도 다음과 같은 다양한 태그들이 있다.
