css display
2023. 7. 31. 18:49ㆍFrontEnd/css
✅ 아래 내용들에 대해서 알아보자
- display
- 예제 코드
display
display 속성은 요소를 블록, 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정하는 속성이다.(참고)
| 종류 | 특징 |
| none | - 요소를 화면에 숨긴다(공간도 차지하지 않음) - visibility: hidden과 달리 레이아웃에 공간을 차지하지 않는다. |
| block | - 요소를 블록 레벨 요소로 지정 - width, height, margin, padding 속성 사용 가능 - 요소 추가 시 세로로 배치(줄 바꿈 됨)가 되어 최대 가로 너비를 차지한다. |
| inline | - 요소를 인라인 요소로 지정한다 - 요소 추가 시 가로로 배치(줄 바꿈 안됨)가 되어 가로 너비는 내용만큼 차지한다 - width, height, margin, padding 속성 사용 불가! -> 사용하고 싶으면 inline-block으로 대체해야함 |
| inline-block | - 요소를 인라인 박스로 지정한다 - inline가 동일한 가로 배치이고, width, height, margin, padding 속성이 사용 가능하다 |
| flex | - 요소를 flex Container로 지정 - Flexbox 레이아웃을 사용하여 자식들을 수평, 수직 정렬 배치 가능 |
| grid | - 요소를 Grid Container로 지정 - grid를 사용하여 2차원 그리드로 배치할 수 있다. |
예제 코드
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display</title>
</head>
<style>
/* display 속성
- display 속성은 html 요소를 어떻게 표시할지를 결정한다.
- html 요소마다 기본적으로 갖고 있는 display 속성이 다르다. display:block이면 block level element이며, display:inline일 경우 inline level element이다.
- display 속성은 주로 4자리 값이 쓰인다.
display 속성 4가지
1.none
: 요소를 보이지 않게 설정. visibility:hidden으로 설정한 것과 달리 영역도 차지하지 않는다.
2.block
: 기본적으로 가로 영역을 모두 채우며, blck 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다.
: width, height 속성 지정 가능, div, p, h1~h6 태그 등이 해당된다.
*/
h1 {
display: block;
}
div,
h2 {
border: 1px solid black;
}
/*
3.inline
: 컨텐츠 만큼 영역을 차지한다.
: block과 달리 줄 바꿈이 되지 않고, width, height을 지정 할 수 없다!
: word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등의 글자나 효과르 주기 위해 존재하는 단위라고 할 수 있다.
*/
span,
a {
border: 1px solid blue;
}
/*
4.inline-block
: block과 inline의 중간 형태로 요소는 inline인데 내부는 block 처럼 표시함.
: inline 처럼 컨텐츠 만큼 영역을 차지하여 가로로 배치되지만 block 처럼 내부 속성인 width, height등 값 변경 가능하다
*/
article > div,
article > span {
display: inline-block;
width: 200px;
height: 150px;
}
</style>
<body>
<h1>Display Block</h1>
<div>display:block은 세로 배치</div>
<div>display:block은 세로 배치</div>
<div>display:block은 세로 배치</div>
<h2>title</h2>
<h1>Display Inline</h1>
<span>span은 inline 요소 - 컨텐츠 만큼 영역 차지(가로 배치)</span>
<span>span은 inline 요소 - 컨텐츠 만큼 영역 차지(가로 배치)</span>
<span>span은 inline 요소 - 컨텐츠 만큼 영역 차지(가로 배치)</span>
<article>
<h1>Display Inline-Block</h1>
<div>inline-block1</div>
<div>inline-block2</div>
<div>inline-block3</div>
<span>inline-block4</span>
<span>inline-block5</span>
<span>inline-block6</s>
</article>
</body>
</html>
실행 결과
참고사항
반응형
'FrontEnd > css' 카테고리의 다른 글
| css 가상클래스/가상 요소 (0) | 2023.08.11 |
|---|---|
| css position (0) | 2023.08.11 |
| css float (0) | 2023.08.11 |
| CSS 폰트 및 크기 (0) | 2023.07.30 |
| CSS 선택자(Selector) (0) | 2023.07.30 |