🍁다단 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/ex41.css">
</head>
<body>
<h1>다단 구조</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga quas labore est. Provident neque recusandae laborum impedit vel rerum, nulla, exercitationem vitae non quas molestias praesentium fugiat voluptatem? Iusto quis pariatur quia sint officiis, nobis, assumenda maiores minus, architecto vero eum inventore aliquid dignissimos itaque doloribus ratione odio enim aut rem eaque. Nihil in ab, distinctio soluta sint natus eveniet dolor ipsam commodi maxime autem fuga blanditiis, numquam corrupti iusto accusamus error? Modi corporis hic impedit quod nesciunt neque esse quidem voluptas iste, molestiae vitae eius unde recusandae voluptatem dicta deserunt officiis eligendi nobis eveniet ad beatae quibusdam! Velit, dolor fugiat sapiente fugit rerum at voluptas dignissimos accusamus? Neque at excepturi totam aliquid porro aliquam. Dolore in placeat eveniet obcaecati fugit quis hic quo illum quam consequatur. Laboriosam atque non, itaque facere nam eius dolor quis excepturi corporis rerum pariatur, nulla recusandae tenetur nostrum est natus adipisci quibusdam provident corrupti? Voluptatibus, sint. Quos alias maxime explicabo nulla repudiandae ad, quam rerum ab eum voluptates omnis non ipsa repellat facere suscipit commodi quidem neque est quisquam ratione perferendis! Accusantium, aliquid deleniti aliquam fuga non impedit similique pariatur? Ex neque tenetur fuga! Sint aperiam provident debitis repellendus itaque repudiandae expedita, voluptatem blanditiis adipisci, magni facere nisi voluptates cum! In repellat vel distinctio sunt dolores magni, corrupti labore commodi cum, sit dolorem facilis atque! Facilis nihil, corporis nobis praesentium eius beatae perspiciatis temporibus voluptatem eum saepe neque omnis eveniet repellat expedita quisquam, nesciunt sapiente laboriosam velit exercitationem ullam consectetur itaque fuga incidunt. Dolore natus nostrum excepturi repudiandae exercitationem harum sit amet sed at odit, recusandae blanditiis porro reprehenderit accusantium voluptatem! Reiciendis, nisi perspiciatis. Sit distinctio temporibus ducimus voluptatum? Iste doloremque perspiciatis rem vero. Quisquam minus esse cum facere veniam est odio explicabo nesciunt, rerum ratione architecto ducimus libero eveniet quidem similique labore, laudantium voluptates, nam quis voluptatem qui doloremque expedita aliquam! Unde fuga corrupti sequi et necessitatibus eligendi in alias atque, blanditiis laborum cupiditate, odio aperiam accusantium facere. Quae praesentium commodi incidunt quibusdam officiis assumenda error possimus inventore consequatur, itaque cum voluptate laborum aspernatur harum! Nulla ipsam, magni dolorem commodi distinctio ipsum ullam temporibus, consequatur, sit pariatur nesciunt placeat? Ut ab consequatur, non autem ullam sequi est provident assumenda ipsam vitae quae ipsa perspiciatis excepturi saepe, odio quidem! Maiores quis veritatis quasi, enim minima qui consectetur expedita reiciendis odio id mollitia sed rem? Similique cum eaque ipsum dignissimos commodi laborum accusantium aut non perferendis totam, numquam ab error ullam molestiae, doloribus tempora omnis harum. Ut omnis repellat ipsa placeat architecto, perspiciatis natus, eum quas adipisci vel autem numquam pariatur quod, accusantium ea! Atque corrupti qui sit, sequi quidem voluptatibus earum labore veniam culpa ipsam iusto aspernatur illum maiores quasi, architecto accusantium quibusdam in consequatur nemo? Aut vitae in sint magni aperiam error autem nam repudiandae omnis dolorum a modi unde quisquam tempore, suscipit dicta, repellendus reprehenderit laborum perspiciatis nihil beatae quaerat corporis accusamus dolor. Consequatur cum architecto qui a velit sed dolorem, magni voluptatem perferendis vel at maiores facilis quisquam assumenda quaerat rem?</p>
</body>
</html>p {
column-count: 3;
}
column-count로 단을 만들 수 있다.
화면의 크기가 변하면 계산하여 단을 다시 만든다.
p {
column-count: 3;
column-gap: 100px;
column-rule: 1px dashed gray;
/* text-align: justify; */
}
column-gap, column-rule 속성으로 단 사이에 여백을 만들고 선을 그을 수 있다.
영어는 양쪽 정렬하는 것을 비추천한다.
card layout
https://experience.sap.com/fiori-design-web/overview-page-fixed-card-layout/
Overview Page – Fixed Card Layout | SAP Fiori for Web Design Guidelines
The fixed card layout uses padding on both sides. The cards are displayed inside collapsible columns, making the page fully responsive. When the user resizes the browser or uses a smaller screen, the columns containing the cards collapse. To view all th
experience.sap.com
card layout에 대해서는 위 글을 참고하였다.
<header>, <section>
<header>문서의 머리말</header>
<section>콘텐츠</section><header> 태그는 문서의 머리말, <section> 태그는 콘텐츠로 표현을 한다.
의미를 강조하는 시맨틱 태그 중 하나이며, <div> 태그처럼 사용한다.
[CSS] 모서리 둥글기, fontawesome 활용
🍁모서리 둥글기 모서리 둥글기는 border-radius 속성을 사용한다. px, %를 사용하여 구현하며, px와 %를 사용할 때 각각의 정책이 다르다. px 단위 사용 Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse
isaac-christian.tistory.com
아이콘은 위 글을 참고하여 fontawesome에서 가져왔다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/ex41.css">
<script src="https://kit.fontawesome.com/a92e13dcf8.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- <h1>Card Layout</h1> -->
<header>
<div>
<h1>CSS Layout</h1>
<div>
<i class="fa-solid fa-moon"></i>
<i class="fa-solid fa-tree"></i>
<i class="fa-solid fa-tower-observation"></i>
</div>
</div>
</header>
<section>
<div class="title">
<div>Standard</div>
<div>Not Filtered</div>
</div>
<div class="content">
<!-- (div.item>((img[src=../asset/images/rect_icon$$.png])+(div.txt>lorem5)))*20 -->
<div class="item">
<img src="../asset/images/rect_icon01.png" alt="">
<div class="txt">Lorem ipsum dolor sit amet.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon02.png" alt="">
<div class="txt">Quidem exercitationem in eligendi sit.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon03.png" alt="">
<div class="txt">Officiis natus iure perferendis! Qui.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon04.png" alt="">
<div class="txt">Cum maxime non voluptates voluptate.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon05.png" alt="">
<div class="txt">Quia quasi adipisci harum pariatur.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon06.png" alt="">
<div class="txt">Voluptatem itaque amet porro distinctio!</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon07.png" alt="">
<div class="txt">Exercitationem asperiores nam laborum repudiandae?</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon08.png" alt="">
<div class="txt">Quae numquam totam unde ipsa?</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon09.png" alt="">
<div class="txt">Eius debitis beatae sed quisquam.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon10.png" alt="">
<div class="txt">Laborum cum recusandae unde impedit.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon11.png" alt="">
<div class="txt">Ad nobis officiis vel corrupti.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon12.png" alt="">
<div class="txt">At quisquam ab suscipit hic.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon13.png" alt="">
<div class="txt">Rem ab eum eaque similique!</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon14.png" alt="">
<div class="txt">Incidunt nemo molestias dolorem aut.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon15.png" alt="">
<div class="txt">Ullam optio ipsam quia praesentium.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon16.png" alt="">
<div class="txt">Ipsum quisquam cum laboriosam incidunt?</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon17.png" alt="">
<div class="txt">Praesentium aut id commodi impedit.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon18.png" alt="">
<div class="txt">Accusantium, fuga? Neque, consequuntur ipsa.</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon19.png" alt="">
<div class="txt">Illum voluptatum repudiandae totam accusantium?</div>
</div>
<div class="item">
<img src="../asset/images/rect_icon20.png" alt="">
<div class="txt">Provident, harum. Amet, qui voluptatum.</div>
</div>
</div>
</section>
</body>
</html>html, body {
margin: 0;
padding: 0;
background-color: #E5E8E9;
}
header {
background-color: #34495f;
color: #FFF;
padding: 10px;
}
header h1 {
margin: 0;
float: left;
font-size: 1.5rem;
}
header > div {
width: 1040px;
/* background-color: gold; */
margin: 0 auto; /* 중앙 정렬 */
}
header > div > div {
float: right;
margin-top: 5px; /* 아이콘 높이 header와 맞추기 */
}
header > div::after {
content: '';
display: block;
clear: both;
}
header > div > div > i {
margin-right: 20px; /* 아이콘 사이의 간격 */
}
section {
width: 1040px;
/* background-color: gold; */
margin: 0 auto; /* 중앙 정렬 */
}
section .title {
background-color: #FFF;
padding: 15px 15px 7px 15px;
}
section .title div:nth-child(1) {
color: #87acd1;
font-size: 1rem;
font-weight: bold;
}
section .title div:nth-child(2) {
color: #555;
font-size: 0.8rem;
}
section .content {
padding: 20px;
column-count: 5;
}
section .content .item { /* 콘텐츠 영역 */
border: 1px solid #AAA;
width: 160px;
margin: 0px auto 15px auto;
font-size: 14px;
background-color: #FFF;
color: #333;
border-radius: 3px;
box-shadow: 0px 0px 5px #999;
page-break-inside: avoid; /* 페이지 분리 현상 제거 */
}
section .content .item img {
display: block;
margin: 20px auto; /* 블럭 태그는 스스로 정렬할 수 있으므로 auto */
box-shadow: -1px -1px 1px #888;
}
section .content .item .txt {
margin: 0px 12px 20px 12px;
}
