웹 프로그래밍 css (29) display

🔥오늘의 목표🔥

모든 요소는 기본적으로 가지는 display값이 있다.
display 속성으로 해당 요소의 렌더링 박스의 유형을 변경하고 렌더링 여부를 결정할 수 있다. 

📕 display

• 어떤 요소의 렌더링 박스 유형을 결정하는 속성이다.

display: value;

📒 속성값

• none : 요소가 렌더링 되지 않음 (display 되지 않는다.)
• inline : inline level 요소처럼 렌더링
• block :block level 요소처럼 렌더링
• inline-block : inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐
  ※ height 나 width 등과 같은 박스모델 속성을 적용할 수 있다

📖 블록 요소

• 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 사용가능한 최대 너비를 가진다.
• 한 줄에 하나의 블럭요소만 위치할 수 있다.

🔸예시 : <div>, <h1>, <p>

🔹크기 지정

• width, height로 크기를 지정할 수 있음
• padding, margin으로 상하좌우 여백을 지정할 수 있음

🔖 블록요소는 너비를 아무리 작게 설정해도 가로 영역을 모두 차지하기 때문에 다른 요소가 옆으로 올 수 없다.

📖 인라인 요소

• 전후 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
• 너비와 높이를 내부 컨텐츠 크기만큼 설정된다.

🔸예시 : <span>, <img>

🔹크기 지정

• width, height로 크기를 지정할 수 없음
• padding, margin으로 좌우에만 여백을 지정할 수 있음 (위, 아래는 안됨)

📖 인라인 블록 요소

• 인라인 요소처럼 전후 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치되면서 크기조정과 여백 조정이 가능하다.
• 기본 동작은 인라인 요소처럼 너비와 높이가 내부 컨텐츠크기만큼 설정된다.
• 이후 블록요소처럼 크기와 여백 지정을 할 수 있다.

🔸사용방법: css의 {display: "inline-block";}으로 스타일을 적용해야 함

🔹크기지정

• 블록 요소처럼 width와 height로 너비와 높이를 설정할 수 있음
• 블록 요소처럼 padding과 margin으로 상하좌우 여백을 지정할 수 있음

😎오늘의 느낀 점😎

웹프로그래밍 (25) vertical-align에서 인라인, 블록, 인라인 블록레벨을 다룬적이있는데 다시 한번 이 부분이 나와서 반가웠다