html & css/개념
레이아웃을 만들기 위한 CSS
by Doo Hee
2023. 11. 18.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.display-table {
display: table; /* <table> 요소처럼 표현됨 */
}
.display-tb-header {
/* <thead> 요소처럼 표현됨 */
display: table-header-group;
}
.display-tb-body {
/* <tbody> 요소처럼 표현됨 */
display: table-row-group;
}
.display-tb-row {
/* <tr> 요소처럼 표현됨 */
display: table-row;
}
.display-tb-cell {
/* <th>, <td> 요소처럼 표현됨 */
display: table-cell;
}
</style>
</head>
<body>
<div class="display-table">
<div class="display-tb-header">
<div class="display-tb-row">
<div class="display-tb-cell">A</div>
<div class="display-tb-cell">B</div>
<div class="display-tb-cell">C</div>
</div>
</div>
<div class="display-tb-body">
<div class="display-tb-row">
<div class="display-tb-cell">A1</div>
<div class="display-tb-cell">B1</div>
<div class="display-tb-cell">C1</div>
</div>
<div class="display-tb-row">
<div class="display-tb-cell">A2</div>
<div class="display-tb-cell">B2</div>
<div class="display-tb-cell">C2</div>
</div>
<div class="display-tb-row">
<div class="display-tb-cell">A3</div>
<div class="display-tb-cell">B3</div>
<div class="display-tb-cell">C3</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
/* flexbox 레이아웃 방식을 적용하고 싶은 최상위 컨테이너에 해당되는 html 태그에 display flex가
적용되면 그 안에 있는 아이템은 주축을 기준으로 배치할 수 있다. */
flex-direction: row;
/* x축: 좌에서 우로 */
/* flex-direction: row-reverse; */
/* x축: 우에서 좌로 */
/* flex-direction: column; */
/* y축: 위에서 아래로 */
/* flex-direction: column-reverse; */
/* y축: 아래에서 위로 */
border: 3px dotted black;
}
.item {
background-color: greenyellow;
border: 2px solid blue;
width: 150px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
/* flexbox 레이아웃 방식을 적용하고 싶은 최상위 컨테이너에 해당되는 html 태그에 display flex가
적용되면 그 안에 있는 아이템은 주축을 기준으로 배치할 수 있다. */
flex-direction: row;
/* x축: 좌에서 우로 */
/* flex-direction: row-reverse; */
/* x축: 우에서 좌로 */
/* flex-direction: column; */
/* y축: 위에서 아래로 */
/* flex-direction: column-reverse; */
/* y축: 아래에서 위로 */
flex-wrap: wrap;
/* 실제 그 크기를 갖는것, 여러줄로 만드는 것 */
/* x축을 주축으로 flex하면 한 줄에 item을 다 넣어야하기 때문에 item의 width를 무시한채 한 줄에 다 넣게 됨 */
/* flexwrap을 사용하면 item의 본연의 크기를 살리는 동시에 x축을 기준으로 여러줄을 만들 수 있다. */
border: 3px dotted black;
}
.item {
background-color: greenyellow;
border: 2px solid blue;
width: 150px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
/* flexbox 레이아웃 방식을 적용하고 싶은 최상위 컨테이너에 해당되는 html 태그에 display flex가
적용되면 그 안에 있는 아이템은 주축을 기준으로 배치할 수 있다. */
flex-direction: row;
/* x축: 좌에서 우로 */
/* flex-direction: row-reverse; */
/* x축: 우에서 좌로 */
/* flex-direction: column; */
/* y축: 위에서 아래로 */
/* flex-direction: column-reverse; */
/* y축: 아래에서 위로 */
border: 3px dotted black;
/* justify-content: flex-start; */
/* 아이템 너비의 합이 컨테이너보다 작을 경우, 아이템의 배치를 어떻게 할것인가를 정하는 것 */
/* 시작점으로 정렬, row인 경우는 왼쪽, row-reverse인 경우는 오른쪽 */
justify-content: flex-end;
/* 끝점으로 정렬, row인 경우는 오른쪽, column인 경우는 아래쪽 */
}
.item {
background-color: greenyellow;
border: 2px solid blue;
width: 150px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
</body>
</html>
