CSS Display

⭐ display 속성

배치 방법 결정

• 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능하다.
• 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치 시
  이미지를 표 형태로 배치 가능

display 속성값

• block: 인라인 레벨 요소를 블록 레벨 요소로 전환
• inline: 블록 레벨 요소를 인라인 레벨 요소로 전환
• inline-block: 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지는 속성 / 마진과 패딩 지정 가능
• none: 해당 요소를 화면에 표시하지 않는 속성

display 예시

 

 

⭐ float 속성

왼쪽 혹은 오른쪽으로 배치

• <p> 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우 사용
• <p> 태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치가 안된다. → float 속성 사용❗
• 웹 요소를 문서 위에 떠 있게 만들어 주는 속성 ( ‘떠 있다’ : 요소가 왼쪽 혹은 오른쪽 구석에 배치 )
• 가로로 배치될 때 요소에 기본 마진과 패딩이 없다.  ≠ display: inline-block

float 속성값

• float속성을 사용해 웹의 요소를 왼쪽 혹은 오른쪽에 배치 시
  >> 그 다음에 넣는 다른 요소에도 똑같이 속성이 전달
  >> float 속성이 더 이상 유요하지 않다고 알려 주는 속성

 

⭐ Clear 속성

float 예시

스타일 적용 전

float/clear 적용

결과