css display 속성
-block
-inline
-inline-block
display:block ;
#block {
display: block;
width: 80px;
height: 100px;
background-color: blue;
color: white;
}박스 형태
아래 방향 정렬
width height 적용 가능
개행 O
display:inline;
#inline {
display: inline;
width: 80px;
height: 100px;
background-color: blue;
color: white;
}text 너비로 적용 됨 - width height 적용 불가능
우측 방향
개행 X
display:inline-block;
#inline-block {
display: inline-block;
width: 80px;
height: 100px;
background-color: blue;
color: white;
}inline의 우측정렬,개행X
+
block의 박스형태 width height 적용가능
전체 코드
<body>
<div class="item">
<h2>Display block</h2>
display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.
<span id="block">display : block 1</span>
<span id="block">display : block 2</span>
</div>
<div class="item">
<h2>Display inline</h2>
display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.
<span id="inline">display : inline 1</span>
<span id="inline">display : inline 2</span>
</div>
<div class="item">
<h2>Display inline-block</h2>
display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.
<span id="inline-block">display : inline-block 1</span>
<span id="inline-block">display : inline-block 2</span>
</div>
</body>
</html>
'퍼블리싱' 카테고리의 다른 글
| [CSS] <div> 텍스트 가운데 정렬하는 법! (0) | 2022.03.07 |
|---|---|
| [CSS] box-sizing 속성 완벽 정리! 개념부터 활용법까지 (0) | 2022.03.05 |
| [CSS] margin/ padding/ border 쉬운 이해 ! (0) | 2022.03.04 |
| [CSS] 좌우정렬 필요할 땐? 쉽게 float을 사용해보자! (0) | 2022.03.02 |
| [CSS] CSS로 반응형 사이드바 (메뉴) 만들기 (0) | 2022.01.07 |