CSS_Block요소 & Inline요소

Block 태그

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

• 항상 새로운 줄에 태그가 생성한다.
• 좌우 너비가 100%라서 한 줄을 독차지한다.
• 공간이 남아있더라도 새로운 태그는 다음 줄에 생성된다.

<block태그 종류>

h1 / h2 / h3 / h4 / h5 / h6

div

ol / ul / li 
dl / dt / dd
ol : 순서가 필요한 리스트에서 사용하며 li 태그로 리스트를 구분한다. (계약서, 약관, 법조문 등)
ul : 순서가 필요없는 리스트에서 사용하며 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
 
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
인용구 사용을 위한 태그
 
... hr / pre / header / footer / section / article / canvas / video / audio 등등

---

Inline 태그

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

• block 속에 삽입되어 block의 일부로 출력된다.
• 좌우 공간을 필요한 만큼만 차지한다.
• 이전 이후 태그 사이에 공간이 있다면 그 공간에 배치된다.
• 다른 태그와 같은 줄에 배치될 수 있다. 
• inline요소는 inline요소만 감쌀 수 있다. 
• 너비 값과 높이 값을 지정할 수 없다.

<Inline 태그 종류>

a, b, i, em, img, span, srong, input, textarea, select, button, script....등등

---

태그 중첩 규칙

• 블럭 태그는 자식으로 또다른 블럭 태그 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

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript