HTML - Block요소와 inline요소 정리.

 

HTML - 블록 레벨(Block level)요소와 인라인(inline) 요소
 

(HTML5에서는 완벽하게 사용되는것은 아니지만, css를 사용할때 반드시 알고 넘어가야한다.)
  
    1. 블록 요소


        1.DIV, H1, P
        2.사용가능한 최대너비를 사용한다.
        3. 크기를 지정할 수 있다.
        4. (width: 100%, height:0; 로 시작)
        5. 수직으로 쌓임
        6. margin, padding 위,아래,좌,우 사용가능하다.
        7. 레이아웃

    2. 인라인 요소


        1.SPAN, IMG
        2. 필요한 만큼의 너비를 사용한다.
        3. 크기를 지정할 수 없다.
        4. (width0; height:0;로 시작)
        5. 수평으로 쌓임
        6. margin,padding 위,아래는 사용할 수 없다.
        7. TEXT 

        ※ 줄바꿈있고 없고 차이가생긴다.
    

---------------------------------------------------------------------


    ※ 기본적으로
    width: auto, height: auto 로 초기값이 설정되어있지만
    블록요소와 인라인요소에 실 적용되는것은 다르다.

    기본값
    div{ display: block;}
    h1{ display: block}
    p{ display: block}

    span{ display: inline}

'WEB-Lab > HTML5 & CSS3' 카테고리의 다른 글

css - 요소의 수평화 3가지 기법  (0) 2020.05.24

댓글

Designed by JB FACTORY