【CSS】display(블록 요소, 인라인 요소, 인라인 블록 요소)

5923 단어 CSSCSS3

display:block;



인라인 요소를 블록 요소로 변경

예.html
    <span>インライン要素だよーん</span>

예.css
span {
  background-color: red;
  width: 300px;
  height: 100px;
}

이렇게 width: 300px; 와 height: 100px; 라는 식으로 폭과 높이를 지정했다.
그러나 웹에서는 ...
↓


이 방법으로만 표시됩니다.
이것은 HTML의 태그가 인라인 요소이기 때문에 폭과 높이를 지정할 수 없다.
그렇다면 너비와 높이를 지정할 수있는 것은 블록 요소이므로 블록 요소로 만들 수 있습니다.

CSS를 다음과 같이 추가하고 ...

예.css
span {
  background-color: red;
  width: 300px;
  height: 100px;
  display: block;
}

웹
↓


네, 가능했습니다

display:inline;



블록 요소를 인라인 요소로 변경

예.html
<p>ブロック要素だよーん</p>

예.css
p {
  background-color: red;
  width: 300px;
  height: 100px;
}

웹
↓


태그는 블록 요소로 인해 높이와 너비를 지정할 수 있습니다
이것을 아래와 같이 CSS에 display:inline; 을 추가하면...



인라인 요소가되었습니다

블록 및 인라인 요소 요약



이전에 블록 레벨 요소와 인라인 요소에 대해 정리했지만 의미를 정리했을 뿐이었으므로 여기에서 마지막에 추가해 정리해 보겠습니다.



블록 요소
인라인 요소


폭(width)
○ 지정 가능
✗ 지정할 수 없음

높이(height)
○ 지정 가능
✗ 지정할 수 없음

내부 여백(패딩)
○ 지정 가능
△ 좌우만 지정 가능

외부 여백(margin)
○ 지정 가능
△ 좌우만 지정 가능


display:inline-block



블록 요소와 인라인 요소의 특징을 아울러 가진다 (인라인 블록 요소라고 한다)
폭과 높이를 지정할 수 있다
안쪽, 외측 모두 여백을 설정할 수 있다
배치를 수평으로 할 수 있다

블록 요소는
↓


이와 같이 수직으로 배열된다.

인라인 요소는
↓


이와 같이 수평으로 배열된다.
인라인 블록 요소는 수평으로 정렬됩니다.
다시 인라인 블록 요소를 포함하여 결합하면



블록 요소
인라인 요소
인라인 블록 요소


폭(width)
○ 지정 가능
✗ 지정할 수 없음
○ 지정 가능

높이(height)
○ 지정 가능
✗ 지정할 수 없음
○ 지정 가능

내부 여백(패딩)
○ 지정 가능
△ 좌우만 지정 가능
○ 지정 가능

외부 여백(margin)
○ 지정 가능
△ 좌우만 지정 가능
○ 지정 가능

배치
세로 줄
수평
수평


이렇게됩니다
【CSS】투명도
【CSS】border-radius

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage