Home-theater-designers
CSS 표시 속성은 웹 디자이너를 위한 강력한 도구입니다. 기억하기 쉬운 간단한 값으로 최소한의 스타일로 웹사이트 요소 레이아웃을 제어할 수 있습니다.
그러나 이러한 각 값은 무엇을 하며 어떻게 작동합니까? 알아 보자.
MAKEUSEOF 오늘의 비디오
CSS 표시 속성이란 무엇입니까?
display 속성은 웹 페이지의 HTML 요소에 사용되는 상자 렌더링 유형을 지정합니다. 이로 인해 전혀 나타나지 않는 것을 포함하여 다양한 동작이 발생합니다. 웹사이트에서 스타일 시트나 적절한 CSS 사용자 정의 섹션을 통해 이러한 값을 편집할 수 있습니다. WordPress와 같은 CMS 도구 .
CSS 디스플레이에 맞춰 요소 유지: 인라인
너비 및 높이 값은 인라인 디스플레이가 있는 요소에 적용되지 않습니다. 내부 콘텐츠는 크기를 설정합니다. 인라인 HTML 요소는 다른 요소와 나란히 앉을 수 있습니다. <스팬> . 인라인 표시는 텍스트에 가장 일반적으로 사용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>
위의 HTML 마크업과 CSS는 디스플레이 인라인 값의 좋은 예입니다. 함께 사용하면 두 개의 다른 HTML 요소로 만든 한 줄의 텍스트가 표시됩니다.
CSS 디스플레이로 웹사이트 레이아웃 제어: 차단
어떤 면에서 표시 블록 값은 인라인 값의 반대입니다. 높이 및 너비 치수를 설정할 수 있으며 이 값을 가진 요소는 나란히 놓을 수 없습니다. 위의 예는 블록 값이 있는 두 개의 요소를 보여줍니다. 블록 표시 값이 있는 요소는 기본적으로 상위 요소의 최대 너비로 설정됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>인라인 스타일 예제와 달리 이 표시 블록 값 예제는 텍스트 줄을 두 개의 다른 줄로 나눕니다. fit-content 너비 값은 텍스트의 길이와 일치하도록 요소의 너비를 설정합니다.
CSS 디스플레이가 있는 나란히 HTML 요소: 인라인 블록
CSS display inline-block 값은 일반 인라인 값처럼 작동하며 특정 치수를 추가하는 기능만 있습니다. 이를 통해 부모 요소를 제자리에 두지 않고도 그리드와 같은 레이아웃을 만들 수 있습니다. 이전 예제로 돌아가서 inline-block 값을 추가하면 요소가 서로 옆에 놓일 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>
인라인 블록 값은 인라인 값과 크게 다르지 않습니다. 그러나 이 값으로 요소의 크기를 설정할 수 있으므로 특정 경우에 더 쉽게 작업할 수 있다는 점에 유의하는 것이 중요합니다.
CSS 표시로 웹사이트 요소 숨기기: 없음
가장 간단한 표시 값은 'none'입니다. 이 값은 여백 및 기타 간격 속성과 함께 요소 및 모든 자식 요소를 숨깁니다. CSS display none 값이 있는 요소는 브라우저 검사기에서 계속 볼 수 있습니다.
내 라우터의 wps 버튼은 무엇입니까
CSS 디스플레이로 유연하고 반응적인 요소 만들기: flex
디스플레이 플렉스는 최신 CSS 레이아웃 모드 중 하나입니다. display flex가 부모 요소에 있으면 그 안의 모든 요소가 유연한 CSS 요소가 됩니다. 이 구성의 상위 요소는 flexbox입니다.
Flexbox는 너비 및 높이와 같은 사전 정의된 변수를 사용하여 반응형 디자인을 만듭니다. 가치가있다 HTML/CSS 플렉스박스에 대해 배우기 시작하기 전에.
4B8553AF011488B693BBC238B69A5F102CFFFFAF디스플레이와 함께 Flexbox를 나란히 배치: inline-flex
Inline-flex는 다른 요소 옆에 앉을 수 있는 요소의 추가 이점과 함께 일반 flexbox처럼 작동합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>CSS 디스플레이로 복잡한 테이블 만들기: table
표시 테이블 값은 웹 사이트 디자인의 옛날을 연상시킵니다. 오늘날 대부분의 웹 사이트는 레이아웃에 표를 사용하지 않지만 읽을 수 있는 형식으로 데이터와 콘텐츠를 표시하는 데는 여전히 유효합니다.
HTML 요소에 테이블 값을 추가하면 테이블 요소처럼 작동하지만 테이블이 제대로 작동하려면 추가 값이 필요합니다.
드라이브 윈도우 10을 지우는 방법
CSS 표시: 테이블 셀
table-cell 값이 있는 요소는 기본 테이블 내에서 개별 셀로 작동합니다. 그리고 table-column 및 table-row 값은 이러한 개별 셀을 함께 그룹화합니다.
CSS 표시: 테이블 행
table-row 값은
CSS 표시: 테이블 열
table-column 값은 table-row 값과 유사하게 작동하지만 테이블을 분할하지 않을 뿐입니다. 대신 이 값을 사용하여 이미 존재하는 다른 열에 특정 CSS 규칙을 추가할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>CSS 디스플레이로 나란히 테이블 만들기: inline-table
이미 살펴본 다른 인라인 변형과 마찬가지로 inline-table을 사용하면 테이블 요소를 다른 요소 옆에 배치할 수 있습니다.
CSS 디스플레이로 반응형 웹사이트 레이아웃 구축: grid
CSS 표시 그리드 값은 테이블 값과 유사하며 그리드의 열과 행만 유연한 크기를 가질 수 있습니다. 따라서 그리드는 웹 페이지의 기본 레이아웃을 만드는 데 이상적입니다. 전폭 머리글과 바닥글을 위한 공간을 남기면서 다양한 크기의 콘텐츠 영역을 가질 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>
그리드는 flexbox와 유사하지만 요소를 서로 아래 및 옆에 배치할 수 있습니다. 이를 위해서는 grid-template-areas 속성이 중요합니다. 코드에서 볼 수 있듯이 머리글과 바닥글은 전체 너비이므로 배열에서 4개의 공백을 차지합니다. 사이드바는 각각 하나의 슬롯을 차지하는 반면 콘텐츠는 2개의 슬롯을 차지하여 그리드의 중간 행을 세 개의 열로 효과적으로 분할합니다.
CSS 표시: 인라인 그리드
inline-grid 값을 사용하면 이 가이드의 다른 인라인 값과 마찬가지로 그리드를 다른 요소 옆에 배치할 수 있습니다.
웹 디자인에 CSS 디스플레이 사용하기
CSS display 속성은 HTML 마크업을 변경하지 않고도 웹사이트 요소 구조를 조정할 수 있는 편리한 방법을 제공합니다. 이것은 Shopify 또는 WordPress와 같은 콘텐츠 전달 플랫폼을 사용하는 사람들에게 이상적이지만 일반적인 웹 디자인에도 유용할 수 있습니다.