본문 바로가기
프론트엔드 개발자/CSS

html css display 속성

by 신디블로그 2023. 3. 13.
SMALL

 display
    element -> 화면에 어떻게 표시??

    block -> 줄바꿈
    inline -> 줄바꿈X

    - none : 화면에서 제거
        화면에서 다시 보이게 만들때는
        block, inine등의 표시속성을 작성하면 됨.
    - block  -->줄바꿈, w, h적용
    - inline  ---> 줄바꿈X   w,h 적용불가

        block ---> inline  (거의사용하지 않음)
        
        inline ---> block  (많이 사용)


    - inline-block
        : 화면표시는 inline으로 하고
        : 속성은 block처럼 동작

    사용순위
    1) none으로 바꾸기 (이벤트 발생 요소의 show/hide 제어시)
    2) inline ---> block으로 바꾸기 ( w, h적용)

    3) block -> inline-block으로 바꾸기 ( 가로배치, w-h적용) 
        : 단점이 많음
        : flex, grid사용이 많아짐에 따라 현재는 잘 사용하지 않음.

    4) block -> inline ( 거의 사용하지 않음 )

    - flex
    - grid

LIST

댓글