<HTML/CSS> 자리 배치 display 속성 & 레이아웃 - float

깜슝슝·2023년 3월 30일
1

HTML/CSS

목록 보기
1/13

📍 컨텐츠의 공간을 차지하는 방법들 (display 속성 3가지)

  • display: inline ;
    • 한글에서 사용하는 '어울림' 과 유사함
    • width, height 값의 적용이 되지 않는다.
    • margin 적용 X, padding 적용 O
    • 대표 태그: span, a 등
  • display: block;
    • 한글에서 사용하는 '자리 차지' 와 유사함
    • 옆 자리가 있어도 모두 차지해서 나란히 둘수가 없음.
    • width 나 height 값을 지정 O
    • margin, padding 다 적용 O
    • 대표 태그: div, p, h1~h6
  • display: inline-block;
    • inline 과 block 의 특징을 다 가지고 있음

    • 배치되는 생김새는 inline.

    • inline 과 다르게 width 나 height 값을 지정 O

    • margin, padding 다 적용 O

    • 따로 display 지정 해줘야함


📍 CSS 레이아웃 - float

  • 레이아웃 박스를 left, right 로 나눌 수 있음
  • 태그들의 기본값-> float: none;
  • float 는 배치를 공중에 띄워서 하므로 (2층 사는 느낌) ,
    float 가 지정되지 않은 뒷 태그가 밑으로 배치되어 안보일 때가 있음.
    → 숨어버린 태그 컨텐츠에 clear 를 속성을 부여하여 float 의 영향을 안받게 해줘야함.
    (보통 clear: both; 많이 사용함)


📌 생각정리

간단하게 레이아웃 배치할때 사용하기 좋은 float!


profile
front-end ing

0개의 댓글