💡깨달음💡/CSS

CSS_Block요소 & Inline요소

과부하가즈아 2023. 7. 27. 16:36

Block 태그

전체적인 틀을 짠다던지 구조를 만들 때 주로 사용되는 태그이다. box를 치는 태그라고 생각하기

  • 항상 새로운 줄에 태그를 생성한다.
    • 공간이 남아있더라도 새로운 태그는 다음 줄에 생성된다.
    • 한 줄에 한 개만 배치된다.
  • 좌우 너비가 100%라서 한 줄을 독차지한다.
  • 너비 값과 높이 값을 가질 수 있다.
  • 상하좌우 margin을 가질 수 있다.
<block태그 종류>

h1 / h2 / h3 / h4 / h5 / h6

div

ol / ul / li 
dl / dt / dd
ol : 순서가 필요한 리스트에서 사용하며 li 태그로 리스트를 구분한다. (계약서, 약관, 법조문 등)
ul : 순서가 필요없는 리스트에서 사용하며 li 태그로 리스트를 구분한다. (메뉴판, 사이트 메뉴등)
li
dl : 단어 또는 사물등을 설명하는 리스트에서 사용하며 dt, dl 태그로 리스트를 구분한다. (사전 등)
dt  : 단어 및 사물의 이름을 정의
dd : 단어 및 사물의 설명
<ol>
  <li>제 1장 ...</li>
  <li>제 2장 ...</li>
</ol>

<ul>
  <li>삼겹살</li>
  <li>목살</li>
</ul>

<dl>
  <dt>사과</dt>
  <dd>과일의 일종으로...</dd>
</dl>

p / article
 
form / fieldset
사용자가 입력한 데이터를 서버로 전송하기 위해 사용
Form 태그 안에서 사용되는 태그로는 fieldset(block), legend(inline) 태그가 있다.
fieldset 태그는 입력 양식 공간을 나눌때 사용
legend 태그는 fieldset 태그 안에 내용을 설명할때 사용
<form action="index.php" method="get">
    <fieldset>
        <legend>필수 입력 항목</legend>
    </fieldset>
    <fieldset>
        <legend>선택 입력 항목</legend>
    </fieldset>
</form>​

 

table
able 태그는 표를 그리기 위한 태그로 thead, tbody, tfoot으로 구분하여 표현
크게 위의 3개로 구분을 한뒤 tr로 줄을 구분하고, th, td로 셀을 나누어 사용

thead : table의 제목역할을 하는 컬럼들의 집합
tbody : table의 내용역할을 하는 컬럼들의 집합
tfoot  : table의 내용을 정리하는 컬럼들의 집합
tr : table의 줄을 나눌때 사용
th : 셀의 주제를 나타낼때 사용
td : 셀의 내용을 나타낼때 사용
<table>
    <thead>
        <tr>
            <th>주제1</th>
            <th>주제2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>결과1</td>
            <td>결과2</td>
        </tr>
    </tfoot>
<table>

 
address
Adress 태그는 주소를 입력하기 위한 태그
 
blockquote
인용구 사용을 위한 태그
 
header / footer / nav

section / caption

hr / pre / aside

figure / figcaption

Inline 태그

내용을 적는 태그로, block태그로 짜여진 틀 안에 내용을 적을 때 사용되는 태그이다. 

  • 다른 태그와 같은 줄에 배치될 수 있다. 
    • 이전 이후 태그 사이에 공간이 있다면 그 공간에 배치된다.
    • 한 줄에 여러개를 배치할 수 있다.
  • 좌우 공간을 필요한 만큼만 차지한다.
  • 너비 값과 높이 값을 지정할 수 없다. (크기값 지정 NoNo)
    • 기본 너비 값은 컨텐츠의 너비 값으로 지정된다.
  • 상하 marign은 가질 수 없다.
  • block 속에 삽입되어 block의 일부로 출력된다.
  • inline요소는 inline요소만 감쌀 수 있다. 

<Inline 태그 종류>

span / br / 

small / big / strong / b / s / del / em / mark

a / u / q / 

sub / sup / video / audio

 

➕인라인블록(inline-block) 요소

인라인 요소와 블록 요소의 중간 형태로, 인라인 요소처럼 나란히 배치되지만 블록 요소처럼 크기와 스타일을 설정할 수 있다.

  • 한 줄에 여러개 배치를 할 수 있다.
  • 기본 너비 값은 컨텐츠의 너비 값으로 지정된다.
  • 너비 값과 높이 값을 가질 수 있다.
  • 상하 marign은 가질 수 있다.
<inline-block 태그 종류>

img / input태그들 / button / fontawesome

태그 중첩 규칙

  • 블럭 태그는 자식으로 또다른 블럭 태그 or 인라인 태그를 가질 수 있다.
  • 인라인태그는 자식으로 또다른 인라인태그만 올 수 있다.(블럭태그X)
  • 예외_블럭 태그 중 <p>태그는 자식으로 인라인 태그만 가질 수 있다.

 

 

참고🖇️

https://developer.mozilla.org/ko/docs/Glossary/Inlinelevel_content#%EC%9D%B8%EB%9D%BC%EC%9D%B8_vs._%EB%B8%94%EB%A1%9D_%EB%A0%88%EB%B2%A8_%EC%9A%94%EC%86%8C

https://sas-study.tistory.com/122

https://soopeach.tistory.com/101

https://coding-factory.tistory.com/944