block 요소, inline 요소, 블록 요소, 인라인 요소

(2022-08-03)

inline-block 요소, 인라인 블록 요소


1. 보이기 유형(block,inline)의 구분

  ㅇ block 요소      ☞ CSS 박스 모델 참조
     - 박스 형태로써, 독립되게 취급됨
     - 특징
        . 줄바꿈 있음 (너비 100%)
        . width,height 속성 적용 가능
        . margin,padding 상하 속성 적용 가능
     - html 태그 종류
        . h 요소, p 요소, header 요소, section 요소, main 요소, aside 요소, footer 요소,
          div 요소, pre 요소, ol 요소, ul 요소, form 요소, hr 요소, table 요소 등

  ㅇ inline 요소
     - 줄(라인) 내 삽입 포함되는 형태로써, 이에 귀속되어 취급됨
     - 특징
        . 줄바꿈 없음
        . width,height 속성 적용 불가능
        . margin,padding 상하 속성 적용 불가능 (단, 왼쪽,오른쪽 지정은 가능)
     - html 태그 종류
        . a 요소, strong 요소, abbr 요소, b 요소, bdi 요소, bdo 요소, br 요소,
          cite 요소, code 요소, data 요소, del 요소, dfn 요소, em 요소, i 요소,
          input 요소, span 요소, time 요소 등

  ㅇ inline-block 요소
     - 특징 
        . 줄바꿈이 없는 것 외에는, block 요소와 유사
     - html 태그 종류
        . img 요소, button 요소, select 요소, label 요소, textarea 요소, input 요소,
          멀티미디어 태그 요소(audio 요소, video 요소, ...) 등

박스모델 (마진,보더,여백,block,inline)
   1. CSS 박스 모델   2. block,inline 요소 유형  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"