[HTML+CSS]2. HTML의 Tag들

김예진·2020년 8월 10일
0

HTML+CSS

목록 보기
2/5
post-thumbnail

1. HTML의 더 많은 Tag들

이전 TIL에서 정리했던 Tag들보다 더 많은 Tag를 접했다. 그 전에 생활코딩에서 공부했을 때는 정말! 자주 쓰는 Tag들 몇 개만 짚고 넘어갔는데 책으로 다시 훑어보니 더 많은 Tag들이 더 자세하게 정리되어있어서 몇 개 더 정리해보고자 한다.


텍스트를 덩어리로 묶어주는 태그
:텍스트를 block으로 처리한다. 이 태그들은 텍스트 포함된 블록 전체에 적용된다.

<h1>~<h6> 제목 표시 태그 </h1>~</h6>
<P> 단락만들기 </p>
<br> 줄 바꾸기
<hr> 수평줄 삽입. 가로줄이 삽입되는데 css로 가로선을 없앨 수 있다.
<blockquote> 인용문 넣기 </blockquote>
<pre> 공백 표시 </pre>
     :HTML에서는 띄어쓰기를 아무리 많이해도 한개의 공백만 표시되는데, 
     내가 준 공백만큼 브라우저에 표시하고 싶을 때 사용할 수 있다. 
     <code>, <samp>, <kbd> 같은 태그를 사용해 프로그램 소스를 표시할 때도 사용.


텍스트를 한 줄로 표시하는 태그
: 태그를 적용해도 줄바꿈 없이 텍스트를 표시하는 인라인 레벨 태그들.

<strong> 텍스트 굵게 </strong>
<b> 텍스트 굵게 </b>
   ★ strong 태그와 b 태그는 겉보이게는 똑같이 굵게 표시되지만 
      화면 낭독기에서 기능이 다르다. 
      경고, 주의사항같은 정말 중요한 내용이라 강조할 때는 <strong>
      문서의 키워드처럼 단순 굵게 표시는 <b>
  
<em> 이탤릭체 표시 </em>
    : 문장 흐름상 특정 부분 강조할 때
<i> 이탤릭체 표시</i>
    : 단순 이탤릭체 표시
    
<q> 인용 내용 표시 </q>
    : <blockquote>는 블록 레벨 태그로 줄이 바뀌어 나타나지만
      <q> 태그는 인라인 레벨 태그로 줄바꿈 없이 한 줄로 표시되고 따옴표를 표시한다.\

<mark> 형광펜 효과 </mark>
      : CSS의 background-color 속성을 이용해서 <mark> 태그의 배경색 변경 가능
      
<span> 줄바꿈없이 영역 묶기 </span>
      : 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일 적용할 때 사용.
profile
Backend Developer 🌱 벨로그 내용을 티스토리로 이사중~!

0개의 댓글