【CSS】display(블록 요소, 인라인 요소, 인라인 블록 요소)
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)
○ 지정 가능
△ 좌우만 지정 가능
○ 지정 가능
배치
세로 줄
수평
수평
이렇게됩니다
Reference
이 문제에 관하여(【CSS】display(블록 요소, 인라인 요소, 인라인 블록 요소)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mikimikiman/items/e0cfde3a99b26c7ea283텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
