박스 모델
기본적인 CSS3의 box-model은 위와 같습니다.
테두리 속성
box-model에서 가장 흔히 사용되는 테두리 스타일의 속성은 다음과 같습니다.
박스 속성
< box-radius >
박스의 둥근 모서리 속성값은 위와 같이 설정합니다.
<box-shadow>
박스의 그림자를 설정하는 기본적인 css구문은 아래와 같습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="box-shadow">
<img src="./img/nature1.jpg" alt="nature1" class="shadow1">
<img src="./img/nature2.jpg" alt="nature2" class="shadow2">
</div>
</body>
</html>main.css
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#box-shadow {
margin: 10px 20px;
}
#box-shadow img[src*="jpg"] {
width: 300px;
height: 200px;
object-fit: cover;
padding: 20px;
margin-right: 20px;
}
#box-shadow .shadow1 {
box-shadow: 5px 10px 10px #000;
}
#box-shadow .shadow2 {
box-shadow: 5px -5px 20px#000;
}
위와 같이 잘 그림자가 나타나는 것을 볼 수 있습니다.
레이아웃 속성
< position >
position은 box-modeling에서 엄청 중요한 부분을 담당합니다. 이에 대한 속성은 크기 4가지가 있는데, 아래와 같습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="position">
<div class="ap1">
Position: absolute
</div>
<div class="ap2">
Position: fixed
</div>
</div>
</body>
</html>main.css
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#position {
position: relative;
background: violet;
width: 300px;
height: 6rem;
margin-bottom: 100px;
}
#position .ap1 {
position: absolute;
background-color: skyblue;
top: 1rem;
bottom: 1rem;
left: 1rem;
right: 1rem;
text-align: center;
line-height: 4rem;
}
#position .ap2 {
position: fixed;
background-color: bisque;
bottom: 0;
width: 100%;
height: 5rem;
line-height: 5rem;
text-align: center;
}
#position .ap2:before {
content: "asdf";
position: absolute;
display: block;
background-color: green;
bottom: -10px;
left: 100px;
width: 30%;
}
다음과 같이 가상클래스, position: relative, position: absolute, position: fixed를 이용하여 기본적인 배치를 해보았습니다. absolute는 조상이 static이 아닌 것을 기준으로 움직이고 fixed는 최상위 body태그를 기준으로 움직임을 확인했습니다.
< float >
float속성은 요소를 어떻게 띄울
것인지를 나타내는 것입니다. float속성을 사용하면, 다른 요소들이 해당 요소 근처에 떠다니게 됩니다. float속성을 사용해 이미지를 좌, 우로 정렬할 수도 있으며, 이를 활용해 웹페이지 레이아웃도 구성할 수 있습니다.
또한 개인적으로 float에서 가장 중요하다고 생각하는 것은
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float 해제 방법</title>
<style>
.box_wrap {
width: 400px;
margin: 0 auto;
}
.box_parent {
background: #f1c40f;
padding: 10px;
}
.box {
width: 100px;
height: 100px;
color: #fff;
text-align: center;
}
.box1 {
background-color: #2ecc71;
float: left;
}
.box2 {
background-color:#3498db;
float: right;
}
</style>
</head>
<body>
<div class="box_wrap">
<div class="box_parent">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
</div>
</body>
</html>
이와 같은 코드가 있는데 이처럼 float을 사용하면 .box parent가 box1과 box2의 너비를 품지 않고 자체의 padding값만 가지고 있는 것을 볼 수 있습니다.
이문제는 크게 두 가지 방법으로 해결할 수 있습니다.
< overflow를 활용한 방법 >
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float 해제 방법</title>
<style>
.box_wrap {
width: 400px;
margin: 0 auto;
}
.box_parent {
background: #f1c40f;
padding: 10px;
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
color: #fff;
text-align: center;
}
.box1 {
background-color: #2ecc71;
float: left;
}
.box2 {
background-color:#3498db;
float: right;
}
</style>
</head>
<body>
<div class="box_wrap">
<div class="box_parent">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
</div>
</body>
</html>가장 쉬운 방안은 float으로 떠있는 요소들의 부모요소에 overflow속성을 주는 것입니다. 값은 visible만 아니면 무엇이든 상관없습니다.
하지만 이는 overflow: hidden을 활용해 float을 해제했는데 .box_parent가 고정된 width/height값을 가지고 있는 상태고 자식 요소 중 하나가 그 width/height크기보다 크다면 overflow 속성 때문에 자식 요소의 크기가 잘려서 나오게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float 해제 방법</title>
<style>
.box_wrap {
width: 400px;
margin: 0 auto;
}
.box_parent {
height: 100px;
background: #f1c40f;
padding: 10px;
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
color: #fff;
text-align: center;
}
.box1 {
background-color: #2ecc71;
float: left;
}
.box2 {
background-color:#3498db;
float: right;
}
.box3 {
width: 100%;
height: 150px;
background: #e67e22;
}
</style>
</head>
<body>
<div class="box_wrap">
<div class="box_parent">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</div>
</body>
</html>
이를 해결하기 위해서 다음과 같은 방법은 저를 주로 사용합니다.
< clear를 활용한 방법 >
clear 속성은 float해제 전용 속성입니다. clear: left는 float: left를, clear: right는 float: right를, clear: both는 양 쪽 모두의 float을 해제하는데 사용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float 해제 방법</title>
<style>
.box_wrap {
width: 400px;
margin: 0 auto;
}
.box_parent {
background: #f1c40f;
padding: 10px;
}
.box {
width: 100px;
height: 100px;
color: #fff;
text-align: center;
}
.box1 {
background-color: #2ecc71;
float: left;
}
.box2 {
background-color:#3498db;
float: right;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="box_wrap">
<div class="box_parent">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
이 방법은 의미 없는 <div class="clear"></div>를 사용해야 한다는 점이 있습니다. 이를 해결하기 위해서 float을 적용한 요소의 부모 요소에 가상요소를 생성하고 거기에 clear속성을 부여해 float을 해제하는 방법을 사용합니다. 글로는 복잡하지만 가장 효과적으로 float을 해제할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float 해제 방법</title>
<style>
.box_wrap {
width: 400px;
margin: 0 auto;
}
.box_parent {
background: #f1c40f;
padding: 10px;
}
.box {
width: 100px;
height: 100px;
color: #fff;
text-align: center;
}
.box1 {
background-color: #2ecc71;
float: left;
}
.box2 {
background-color:#3498db;
float: right;
}
.box_parent::after {
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div class="box_wrap">
<div class="box_parent">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
</div>
</div>
</body>
</html>
또한 이를 통해서 공통 레이아웃을 한번 만들어 보았습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="float">
<div id="header">
<h1>Header</h1>
</div>
<div id="navigation">
<h1>Navigation</h1>
</div>
<div id="wrap">
<div id="aside">
<h1>Aside</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore eaque eos excepturi fugit. Esse, itaque soluta quae aut tempora alias at nemo ratione eligendi ipsam! Corrupti, accusantium nisi? Animi perferendis tempora sint libero obcaecati quod aliquid voluptas a dolor non alias ipsam minima, ratione dignissimos neque doloremque voluptatibus expedita, reprehenderit nihil. Sunt dolor fuga iusto eos autem. Natus atque harum rerum dolor, quae cum ipsum architecto asperiores distinctio adipisci porro quod enim aperiam quaerat corporis non accusantium! Cum quas quam alias consequatur. Alias, itaque quo debitis beatae sit sunt. Quisquam adipisci recusandae nulla culpa sit voluptate cumque aliquam facere impedit ipsam non quasi ratione consequatur itaque tempora neque, ullam quam assumenda distinctio deleniti eius dignissimos minima ea. Architecto dicta cupiditate eveniet aspernatur similique molestias, vero laudantium eligendi minus ea voluptates. Deserunt doloremque molestias maxime aspernatur in eius, mollitia nemo repellendus ipsa non ad ipsam alias accusamus sequi repellat esse voluptas illo aut aperiam rerum totam aliquid dolore quod? Quia, aliquam. Officia, perferendis! Vitae reprehenderit cum, minus excepturi, voluptatibus numquam similique tempore odit magni amet deleniti quis eius enim ea aut, doloribus non temporibus laborum. Sint sed, tempora molestias sapiente expedita aspernatur blanditiis ducimus tempore quo inventore ipsum iure facilis maiores nam rem incidunt, pariatur sit neque officia atque natus soluta ex? Culpa id doloremque quas iusto omnis libero ex impedit, repellendus atque sed aut deserunt temporibus? Ea repellendus, est vero sunt a deleniti adipisci dolorum. Eos doloribus totam qui ea sed cum officia repellat corrupti in. Laudantium, quos nihil. Atque, voluptate! Enim, accusamus maxime? Ratione obcaecati, reprehenderit sed voluptatibus eaque perspiciatis nisi itaque vel deleniti distinctio non modi amet cum aperiam recusandae cupiditate iusto temporibus molestias voluptates iste porro magnam! Earum animi quibusdam laboriosam ex, praesentium, blanditiis ratione similique modi fugit voluptatem quas aliquam deserunt ad, commodi minima vitae alias?</p>
</div>
<div id="section">
<div id="sub-section1">
<h1>Post</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos perferendis, impedit odio cumque eligendi consequuntur architecto. Fugit hic aut id, nesciunt cupiditate saepe quaerat ut beatae temporibus ipsa ullam voluptatum natus iste sed eligendi necessitatibus? Distinctio in, cum illum impedit explicabo aut magnam praesentium rerum est unde accusamus ducimus ex sint cupiditate maiores quia ipsam hic ea reiciendis sed dolore. Asperiores ex similique illo optio, porro quibusdam consequuntur molestias nesciunt ipsum neque ratione ducimus culpa consequatur reprehenderit eum? Nobis dignissimos, sunt esse maxime quibusdam molestias assumenda voluptatum sint consectetur vel tempora vitae ab corrupti veritatis inventore quis aspernatur nam expedita magnam earum excepturi modi eaque! Nemo, exercitationem maiores architecto ducimus ipsam praesentium et quia repudiandae dolores explicabo facere quod fuga beatae culpa porro ipsa sequi ex nisi ipsum reiciendis rerum aperiam deserunt. Suscipit fuga cumque cupiditate quibusdam tempore saepe iure odio veritatis ut a, distinctio deserunt beatae exercitationem quaerat quas eos repudiandae et excepturi iusto commodi reiciendis dolorum sit. At molestiae harum quae consectetur deleniti incidunt dolore sapiente soluta quibusdam corporis enim quasi sunt nisi, iusto voluptates eum atque dolorem adipisci tempora nobis quas cum rem temporibus! Pariatur perspiciatis ipsum, dignissimos accusantium earum eveniet quos ex quaerat, possimus officia dolores! Recusandae minima doloremque rerum dolor alias accusantium molestiae possimus libero optio est, nostrum non amet sint ex distinctio, officiis nulla porro? Enim laboriosam minima doloremque, sequi omnis amet hic expedita cupiditate laborum temporibus exercitationem eligendi dolore fuga quod cum tempore ex ullam vitae ad, harum quis? Necessitatibus tempore modi aliquam, ex temporibus dicta, fuga ullam nam, sit eos porro! Error qui ex optio id quam aliquam quisquam autem! Illum quidem vitae enim harum nemo molestias praesentium optio vel. Nostrum harum mollitia amet obcaecati ipsum vitae? Eaque possimus mollitia deleniti quidem facere architecto, dolor in? Et quam atque error labore saepe.</p>
</div>
<div id="sub-section2">
<h1>Post</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos perferendis, impedit odio cumque eligendi consequuntur architecto. Fugit hic aut id, nesciunt cupiditate saepe quaerat ut beatae temporibus ipsa ullam voluptatum natus iste sed eligendi necessitatibus? Distinctio in, cum illum impedit explicabo aut magnam praesentium rerum est unde accusamus ducimus ex sint cupiditate maiores quia ipsam hic ea reiciendis sed dolore. Asperiores ex similique illo optio, porro quibusdam consequuntur molestias nesciunt ipsum neque ratione ducimus culpa consequatur reprehenderit eum? Nobis dignissimos, sunt esse maxime quibusdam molestias assumenda voluptatum sint consectetur vel tempora vitae ab corrupti veritatis inventore quis aspernatur nam expedita magnam earum excepturi modi eaque! Nemo, exercitationem maiores architecto ducimus ipsam praesentium et quia repudiandae dolores explicabo facere quod fuga beatae culpa porro ipsa sequi ex nisi ipsum reiciendis rerum aperiam deserunt. Suscipit fuga cumque cupiditate quibusdam tempore saepe iure odio veritatis ut a, distinctio deserunt beatae exercitationem quaerat quas eos repudiandae et excepturi iusto commodi reiciendis dolorum sit. At molestiae harum quae consectetur deleniti incidunt dolore sapiente soluta quibusdam corporis enim quasi sunt nisi, iusto voluptates eum atque dolorem adipisci tempora nobis quas cum rem temporibus! Pariatur perspiciatis ipsum, dignissimos accusantium earum eveniet quos ex quaerat, possimus officia dolores! Recusandae minima doloremque rerum dolor alias accusantium molestiae possimus libero optio est, nostrum non amet sint ex distinctio, officiis nulla porro? Enim laboriosam minima doloremque, sequi omnis amet hic expedita cupiditate laborum temporibus exercitationem eligendi dolore fuga quod cum tempore ex ullam vitae ad, harum quis? Necessitatibus tempore modi aliquam, ex temporibus dicta, fuga ullam nam, sit eos porro! Error qui ex optio id quam aliquam quisquam autem! Illum quidem vitae enim harum nemo molestias praesentium optio vel. Nostrum harum mollitia amet obcaecati ipsum vitae? Eaque possimus mollitia deleniti quidem facere architecto, dolor in? Et quam atque error labore saepe.</p>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum quod corporis architecto aspernatur quis doloremque ex consequatur earum sint aliquid totam provident ut repellat magni saepe, deserunt distinctio excepturi harum voluptatem exercitationem quisquam. Cum sint voluptatum debitis iusto quia nam quisquam minus enim ut, dolore eligendi inventore in voluptatibus necessitatibus cupiditate, vel nihil assumenda odio voluptates quo porro eaque qui. Sunt similique asperiores aut eum nihil minima. Adipisci numquam nostrum harum fuga reprehenderit, itaque cum rerum et aspernatur? Quidem dignissimos, quos aspernatur, nisi numquam dicta amet est omnis enim obcaecati quo magni accusantium delectus blanditiis nihil ipsam illum aperiam earum?</p>
</div>
</div>
</body>
</html>main.css
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#float > p > img {
width: 140px;
height: 140px;
float: left;
margin: 0 0 10px 10px;
object-fit: cover;
}
#float {
background-color: #eee;
padding: 20px;
width: 90%;
margin: auto;
text-align: justify;
}
#float > #header {
background-color: #fff;
border-radius: 10px;
padding: 28px 10px;
margin-bottom: 20px;
}
#float > #navigation {
background-color: #fff;
border-radius: 10px;
padding: 8px 4px;
margin-bottom: 30px;
}
#float > #wrap > #aside {
float: left;
width: 40%;
background-color: #fff;
margin: 0 1% 1% 0;
border-radius: 10px;
padding: 1% 4%;
}
#float > #wrap #sub-section1 {
width: 55%;
float: right;
background-color: #fff;
margin: 0 1% 3% 0;
border-radius: 10px;
padding: 1% 2%;
}
#float > #wrap #sub-section2 {
width: 55%;
float: right;
background-color: #fff;
margin: 0 1% 1% 0;
border-radius: 10px;
padding: 1% 2%;
}
#float > #wrap:after {
display: block;
content: "";
clear: both;
}
#float > #footer {
background-color: #fff;
border-radius: 10px;
padding: 1% 2%;
}
결과는 위와 같습니다.
Overflow 속성
overflow속성은 부모 요소를 넘는 자식요소가 있다면 어떻게 처리해 줄것인지에 대해서 서술 한 것입니다. 다음과 같이 overflow: auto;를 하게 되면 이미지가 부모 요소 안으로 쏙 들어가게 됩니다. 이런 속성의 특성 탓에 float에서 부모 요소가 자식요소의 크기를 감싸지 못할 때 overflow: visible이 제외한 값을 지정해 주게 되면 자식요소의 크기를 알게 되는 것과 비슷한 원리입니다.
z-index속성
z-index는 position이 absolute, relative, fixed, sticky인 값에 대해서 어떻게 쌓일지에 대해 규칙을 지정한 것입니다.
다음과 같이 z-index의 값이 높을 수록 앞에 쌓이게 되고 낮을 수록 뒤로 쌓이게 됩니다.
'Web > Advanced Web Programming' 카테고리의 다른 글
| 고급 웹 프로그래밍 - 정리 - 2 (0) | 2022.06.04 |
|---|---|
| 고급 웹 프로그래밍 - 기말 정리 - 1 (0) | 2022.06.04 |
| Advanced Web Programming - CSS (1) (0) | 2022.04.03 |
| Advanced Web Programming - 멀티미디어 태그 (0) | 2022.03.15 |
| Advanced Web Programming - HTML 기본태그 (0) | 2022.03.08 |