css - display속성

CSS의 display 속성은 요소의 표시 방법을 지정하는 데 사용된다

HTML 요소는 각각 기본적인 특성을 가지며, 이러한 속성을 display 속성을 사용하여 변경할 수 있다.

 

인라인과 블록요소 설명↓↓↓↓

2023.07.16 - [프론트엔트/HTML,CSS] - CSS:너비(width, height), 인라인과블록요소

CSS:너비(width, height), 인라인과블록요소

 

 

• 각요소가 이미 지정되어있는값

1. block: 요소를 블록 레벨 박스로 지정. 너비(width)와 높이(height) 속성을 지정할 수 있으며, 기본적으로 가로 폭 전체를 차지한다
2. inline: 요소를 인라인 레벨 박스로 지정. 너비(width)와 높이(height) 속성을 지정할 수 없으며, 요소의 내용만큼만 공간을 차지한다
3. inline-block: 요소를 인라인 레벨 박스처럼 나란히 표시하면서도 블록 레벨 요소처럼 너비와 높이를 지정할 수 있게 해준다. 즉, 인라인 요소와 같이 콘텐츠가 나란히 표시되지만, 너비와 높이를 설정하여 블록 요소처럼 크기를 조정할 수 있다.

 

 

• 각요소가 이미 지정되어있는값

1. none: 요소를 화면에 표시하지 않는다. 다른 요소들은 이 요소가 차지하던 공간을 채우게 된다
2. flex: 요소를 유연한(flexible) 박스 모델로 지정. 이 속성을 부여한 부모 요소는 자식 요소들을 유연하게 배치할 수 있도록 제어할 수 있다. Flexbox 레이아웃은 요소들을 가로 또는 세로로 정렬하고, 공간 배분을 자유롭게 조정할 수 있게 해준다.
3. grid: 요소를 그리드 레이아웃으로 지정한다. grid 속성을 가진 부모 요소는 그리드 셀로 나눌 수 있으며, 그 안에 자식 요소들을 배치하여 복잡한 레이아웃을 쉽게 구성할 수 있다.

 

---

1. 인라인 블록 요소로 설정

a {
  display: inline-block;
}

: <a> 링크 요소가 인라인 블록 요소로 표시된다. 인라인 블록 요소는 인라인 요소처럼 새로운 줄에서 시작하지 않지만(콘텐츠가 나란히 표시), 블록 레벨 요소처럼 가로 너비와 세로 크기를 지정할 수 있다.

 

2. img block요소 설정

 

기본적으로 img 요소는 display: inline으로 동작한다.따라서 인라인 요소처럼 새로운 줄에서 시작하지 않으며, 필요한 만큼만 너비를 차지하게된다 이미지는 각각이 별도의 블록으로 취급되어, 이미지들이 새로운 줄에서 시작하며, 사용 가능한 가로 공간을 모두 차지하게 된다

 

-> 인라인요소이기때문에 baseline원리에 의해 공간이 발생

-> 공간을 없애주기위해 display : block 설정

img {
  display: block;
}

 

-> 수정 후