html #2 -태그 종류(Block속성 태그)

Lina·2024년 5월 30일
0

Web Design

목록 보기
2/29

Block속성 태그

  • 태그의 성격(속성)중 하나로, box의 형태를 가지고 있는 태그.
  • CSS를 이용해 넓이와 높이를 설정할 수 있고, 여려개를 출력하면 위에서 아래로 출력됨.

제목태그 - <h>

  • 제목을 나타내는 태그로 h1~h6까지 있음.
  • h1이 가장 크고, 숫자가 높아질수록 글자크기는 점점 작아짐.
  • 기본적으로 제목에 대한 강조를 표시하기 위해 글자가 굵게 표현됨.
  • h1은 보통 로고 자리로, html문서 1개당 한 번만 출력할 수 있다.
  <h1>제목1</h1> 
  <h2>제목2</h2>
  <h3>제목3</h3>
  <h4>제목4</h4>
  <h5>제목5</h5>
  <h6>제목6</h6>

단락 태그 - <p>

<P>내용</p>

단락을 나타내는 태그로, 긴 글을 입력할 때 사용함.

줄바꿈 태그 - <br>

<br> or <br/>
  • 단락이나 제목 등, 내용 안에서 줄바꿈이 필요한 부분에 br태그를 사용하면 줄바꿈을 할 수 있다.
  • 단독 태그로, 닫힌 태그 없이 사용하는 태그.

정의태그 - <dl>,<dt>,<dd>

<dl>
            <dt>네네치킨 호매실점</dt>                
            <dd>주소 : 서울시 땡땡구 땡땡동 땡땡번지</dd>
            <dd>전화번호 : 02-1234-5678</dd>
            <dd>영업시간 : 09:00 ~ 18:00</dd>
</dl>

  • 어떠한 단어를 정의하고, 정의에 대한 내용을 설명하는 태그.
  • 실무에서는 보통 매장이름과 해당 매장의 정보들을 나열할 때 주로 사용함.
  • 반드시 dl로 안에 있는 dt, dd를 감싸주어야 하고, dt는 제목으로 한 번만 쓸 수 있고 dd는 제목에 대한 설명으로 여러번 쓸 수 있다.

목록 태그 - <ul>,<li>/ <ol>,<li>

<ul type="disc">
        <li>토끼</li>
        <li>강아지</li>
        <li>병아리</li>
        <li>기린</li>        
</ul>

<ol type="I"> 
       <li>menu1</li>
       <li>menu2</li>
       <li>menu3</li>
       <li>menu4</li>
 </ol>

  • ul, li는 순서를 정의할 수 없는 항목을 나열할 때 사용하는 목록태그
  • 보통 웹사이트 작업을 할 때 메뉴 부분에 사용됨. -> 사용 빈도가 굉장히 높은 태그.★★★★★
  • ol, li는 순서가 있는 항목을 나열할 때 사용하는 목록태그로
    보통 책이나 문서의 목차 등에 활용함. 사용 빈도는 낮은 편.
profile
웹디자인 스케치

0개의 댓글