레이아웃

모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.

문제시, 비공개로 전환하겠습니다.

<레이아웃>

- 인라인 vs 블럭레벨 -
html 엘리먼트들은 크게 두가지로 구분됩니다.
1. 화면 전체를 사용하는 태그 => block element
2. 화면의 일부를 차지하는 태그 => inline level element
이번 시간에는 inline element와 block level element의 차이점을 다룹니다.
그 과정에서 display라는 중요한 속성에 대해서도 배우게 됩니다.

어떤 element가 block이고 어떤 element가 inline인가?

h1은 한 행을 다 쓴다. => block level element
a tag는 자기 자신만 쓴다. => inline element

inline-block.html

<!DOCTYPE html>

<html>

<head>

<style>

h1,a{border:1px solid red;}

h1{display: inline;} => blocklevel이 inline으로 바뀜.

a{display:block;} => inline이 block으로 바뀜.

</style>

</head>

<body>

<h1>Hello world</h1>

안녕하세요. <a href="https://opentutorials.org">생활코딩</a>입니다.

</body>

</html>

- 박스모델 (Box Model) -

박스모델은 각각의 태그들의 부피감, 크기 등을 결정한다.
각각의 태그들은 Box로 둘러쌓여있기에 Box Model이라고 쓴다.

box.html

<!DOCTYPE html>

<html>

<head>

border:10px solid red;

padding:20px;

margin:40px;

width: 120px;

height: auto;

}

</style>

</head>

<body>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

<p>

</p>

안녕하세요. <a href="https://a.com">생활코딩</a>입니다.

</body>

</html>

inline 방식에서는 width와 height값이 무시된다.

- box-sizing -
box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다.
width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서
테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다.
box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽습니다.
최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있습니다.

box-sizing.html

<!doctype html>
<html>
<head>
<style>
*{ box-sizing:border-box; }
div{ margin:10px; width:150px; }

#small{ border:10px solid black; }
#large{ border:30px solid black; }
</style>
</head>
<body>
<div id="small">Hello</div>
<div id="large">Hello</div>
</body>
</html>

- 마진겹침 현상 -

마진겹침(margin-collapsing) 현상은 상하 마진값이 어떤 상황에서 사라지는 현상을 의미합니다.
이 현상은 초심자에게는 중요한 내용이 아니기 때문에 지나치시길 바랍니다. 하지만
이것을 이해하지 못하면 실무를 할 때 이해할 수 없는 CSS의 동작으로 인해서 깊은 화남이 생길 수 있으니까 언젠가는 보시는게 좋겠습니다.

margin-collapsing-1.html

<!DOCTYPE html>
<html>

<head>
<style> h1{ border:1px solid red; margin:100px; }
</style>
</head>
<body>
<h1>Hello world</h1>
<h1>Hello world</h1>
</body>
</html>

margin-collapsing-2.html

<!doctype html>
<html>

<head>
<style> #parent{ /* border:1px solid tomato;*/ margin-top:100px; }
#child{ background-color: powderblue; margin-top:50px; }
</style>
</head>
<body>
<div id="parent">
<div id="child">
Hello world
</div>
</div>
</body>
</html>

margin-collapsing-3.html

<!doctype html>
<html>

<head>
<style>
#empty{ margin-top:50px; margin-bottom: 100px; /* border:1px solid tomato;*/ }
#normal{ background-color: powderblue; margin-top:100px; }
</style>
</head>
<body>
<div id="empty">
</div>
<div id="normal">normal</div>
</body>
</html>

- 포지션 -

Element의 화면상의 위치를 지정하는 방법으로 다음과 같은 4가지가 있다.
기본값은 static (위치를 지정하지 않는 값)이다.
1. static
2. relative
3. absolute
4. fixed

static vs relative
position type이 relative일 때 offset을 사용할 수 있다.

position_1.html

<!DOCTYPE html>

<html>

<head>

<style>

html{border:1px solid gray;}

div{

border:5px solid tomato;

margin:10px;

}

#me{

position: relative;

left:100px;

top:100px;

}

</style>

</head>

<body>

<div id="other">other</div>

parent

</div>

</body>

</html>

absolute
position type이 지정되지 않은 부모의 위치를 기준으로 offset값이 정해진다.
자신의 contents만큼으로 크기가 정해진다.

position_2.html

<!DOCTYPE html>

<html>

<head>

<style>

#parent, #other, #grand{

border:5px solid tomato;

}

#grand{

position: relative;

}

#me{

background-color: black;

color:white;

position: absolute;

left:0;

top:0;

}

</style>

</head>

<body>

<div id="other">other</div>

grand

parent

</div>

</body>

</html>

fixed
화면에 고정되어 스크롤로부터 자유로운 것.
Header, Footer,고정 버튼, 뱃지 등의 UI를 사용할 때 활용한다.
width / height 값을 지정하지 않으면 부모가 없어지기 때문에 딱 자기 content의 크기가 된다.

position_3.html

<!DOCTYPE html>

<html>

<head>

<style>

body{

padding-top:30px;

}

#parent, #other{

border:5px solid tomato;

}

#large{

height:10000px;

background-color: tomato;

}

#me{

background-color: black;

color:white;

position: fixed;

left:0;

top:0;

text-align: center;

}

</style>

</head>

<body>

<div id="other">other</div>

parent

</div>

<div id="large">large</div>

</body>

</html>

flex
CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다.
지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다.
flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다.

Layout을 만들기 위해 써왔던 것들...
table, position, float,

flex를 사용하기 위해서는 두 단계의 태그가 필요하다.

<container>...</container>

<item>

display

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

order

flex-grow

flex-shrink

flex-basis

flex

align-self

flex의 기본
flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 합니다.
또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있습니다. 기본은 row입니다.

<div>....</div>는 block level element라고 하며, 화면 가로 전체를 쓴다.

flex_1_basic.html

<!doctype>

<html>

<head>

<style>

.container{

background-color: powderblue;

height:200px;

display:flex;

flex-direction:row;

}

.item{

background-color: tomato;

color:white;

border:1px solid white;

}

</style>

</head>

<body>

</div>

</body>

</html>

grow & shrink
아이템은 컨테이너의 크기에 따라서 작아지기도 하고 커지기도 합니다.
이 때 작아지고, 커지는 비율을 지정하는 방법이 바로 grow & shrink입니다.
여기서는 이 속성들에 대해서 알아보겠습니다.

flex-grow=0;일 경우, 화면의 창이 줄어들더라도 해당 박스의 크기는 줄어들지 않는다.

flex_2_grow_shrink.html

<!doctype>

<html>

<head>

<style>

.container{

background-color: powderblue;

height:200px;

display:flex;

flex-direction:row;

}

.item{

background-color: tomato;

color:white;

border:1px solid white;

/*flex-grow:1; */ 각각의 element들이 n빵한다.

}

.item:nth-child(1){

/*flew-grow:2;*/ 1번째 class의 크기는 2/6를 가져간다.

flex-basis: 150px;

flex-shrink: 1;

}

.item:nth-child(2){

flex-basis: 150px;

flex-shrink: 2;

}

</style>

</head>

<body>

</div>

</body>

</html>

Holy Grail Layout
Holy Grail은 성배라는 뜻입니다.
많은 사람들이 성배를 찾기 위해서 노력했지만 찾지 못한 것처럼
많은 사람들이 아래와 같은 레이아웃을 만들기 위해서 노력했지만 완벽한 방법을 찾지 못했습니다.
이것에 비유해서 이런 레이아웃을 성배 레이아웃이라고 부르곤 합니다.

flex는 아주 세련된 방법으로 이 문제를 간편하게 해결합니다. 여기서는 플랙스를 이용해서 성배 레이아웃을 만드는 법을 알아봅니다.

flex_3_holyGrailLayout.html

<!doctype>

<html>

<head>

<style>

.container{

display: flex;

flex-direction: column;

}

header{

border-bottom:1px solid gray;

padding-left:20px;

}

footer{

border-top:1px solid gray;

padding:20px;

text-align: center;

}

.content{

display:flex;

}

.content nav{

border-right:1px solid gray;

}

.content aside{

border-left:1px solid gray;

}

nav, aside{

flex-basis: 150px;

flex-shrink: 0;

}

main{

padding:10px;

}

</style>

</head>

<body>

</header>

<nav>

<ul>

<li>javascript</li>

</ul>

</nav>

<main>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum, sunt autem illum quam dolore, quae optio nemo vero quidem animi tempore aliquam voluptas assumenda ipsa voluptates. Illum facere dolor eos, corporis nobis, accusamus velit, similique cum iste unde vero harum voluptatem molestias excepturi. Laborum beatae, aliquid aliquam excepturi pariatur soluta asperiores laudantium iste, architecto ducimus fugiat sed, saepe quaerat recusandae exercitationem sapiente, impedit nostrum error. Doloremque impedit, eos in quos assumenda illo eum dicta. Voluptatum quaerat excepturi consectetur, doloremque esse deleniti commodi natus, maxime sit? Officia rerum quibusdam porro dolorum numquam harum soluta ex quo! Vero, nam? Necessitatibus rem hic perferendis maiores obcaecati voluptate sunt autem id doloribus, similique repudiandae nesciunt vel facere ex accusantium ipsum provident iste itaque? Perferendis culpa nostrum repellendus dolores repudiandae assumenda, tempora laudantium in quibusdam placeat facilis ex voluptatem provident velit iusto fuga eum nobis deserunt enim minus. Explicabo vel labore, eum doloremque, impedit recusandae aut illum corporis quis atque sit vero quasi tempore placeat ipsam similique quo delectus provident animi distinctio debitis eligendi voluptatum! Dolorem perspiciatis similique non fugit eaque? Commodi suscipit earum aliquam rem, neque ad. Obcaecati nisi beatae officia inventore laborum nostrum natus perspiciatis iste, aperiam vero quisquam saepe labore facilis veritatis illo excepturi vitae autem quis! Voluptatibus atque doloribus perferendis, eligendi ex aliquid debitis laudantium omnis accusamus similique cum mollitia quos adipisci reprehenderit assumenda sequi, dolore tenetur ipsam, odio, vero reiciendis iure. Dolore itaque nesciunt ipsam, id maxime saepe officiis dolorum molestias earum temporibus? Possimus ipsum accusamus quasi minima, quod magnam iusto non cupiditate facilis pariatur aliquam omnis, blanditiis assumenda magni ad voluptas dicta est optio reprehenderit rem ratione earum ipsa, dolor vero! Totam, adipisci eos nihil repellendus. Maiores, blanditiis. Officiis aspernatur iure culpa illo sint ex id perferendis, explicabo architecto ipsa voluptatibus nesciunt pariatur commodi cum quam. Obcaecati ut quidem quam error nemo. Pariatur aliquid autem inventore laboriosam, velit totam, temporibus ad magnam minus, quis nesciunt aperiam veritatis. Vitae porro provident magni eos sit sed dignissimos iure natus odio nostrum molestiae atque mollitia saepe adipisci ut velit quo hic fuga ex, voluptates vel eum ipsum amet, sunt corporis. Maxime odit alias, ratione tenetur, asperiores consequuntur deserunt modi velit ab maiores pariatur voluptates beatae aut nesciunt perspiciatis sed veritatis doloremque quibusdam amet vero. Qui, labore. Atque ratione quae ducimus reprehenderit perferendis nisi earum, debitis commodi maxime sequi facere optio doloribus, repudiandae ex quidem amet iusto inventore quaerat at praesentium sint. Omnis mollitia esse illum suscipit, quis dolorem maxime sunt eaque, autem nisi corrupti perferendis provident tempore quas, unde! Doloribus, at, accusamus, maiores enim amet quod provident temporibus atque, ipsam fugiat incidunt. Quasi iusto ea quibusdam eveniet porro officiis dicta fugiat fugit laudantium ipsum esse quisquam quo laboriosam odit voluptates alias veritatis expedita quidem consectetur eos, impedit, incidunt dolorum? Laborum, facere nulla ullam, aliquid rerum nihil non adipisci, architecto obcaecati iure quam, fuga minus alias eligendi provident ex odio sit. Ducimus, facilis veritatis numquam, maxime quos natus animi, a magnam itaque veniam pariatur sed alias eos quas? Voluptatum fugit doloribus fugiat iste adipisci quidem odit consectetur, sapiente culpa magnam laborum, laboriosam exercitationem cupiditate dignissimos, nisi doloremque hic itaque aspernatur. Ab labore dolorum cumque rem vitae repellat quo quae porro cupiditate minus. Perspiciatis cumque sequi provident fugit. Nulla reiciendis voluptates molestiae corporis voluptate, quidem consequuntur, dolor vero necessitatibus deleniti tempora ab facilis similique, ea error deserunt fuga quia atque omnis nam earum non, illo. Minima quos optio nostrum eos aperiam? Quam, obcaecati velit deserunt tempore, iure vitae repudiandae quos illum quasi esse quas quaerat at consectetur necessitatibus. Cum, quod, dolore voluptatibus quibusdam accusamus aliquam consequatur dolorum illo! Sequi commodi adipisci explicabo soluta necessitatibus magni expedita cumque, officiis voluptas, vel amet recusandae sunt, quidem eum aliquid deleniti unde, impedit non magnam consectetur est minima facere architecto. Molestias cum vero nostrum saepe, dignissimos eius beatae natus fugiat deserunt esse, nesciunt eos ducimus id amet magnam possimus? Optio adipisci quisquam earum totam nemo sunt provident iure ab consectetur et deleniti molestiae blanditiis laudantium, autem consequatur rerum labore ipsa ipsam deserunt nisi, expedita doloremque quibusdam! Illo nemo laborum a sequi in, ad ipsum blanditiis alias! Eaque eos eligendi hic dolorum sint, tempore voluptatum ut numquam. Corporis similique itaque accusantium, esse porro ea dolor, quae consequuntur ullam necessitatibus magni rem optio officiis totam in dicta quas, odio quam blanditiis dolores pariatur? Dolorem, fuga? Harum ratione nemo perspiciatis culpa eum repudiandae esse, atque impedit nihil debitis, assumenda est. Sapiente rerum alias ipsa tempore obcaecati deserunt maiores distinctio officiis itaque fugit optio, eveniet facere amet ipsum, harum laboriosam eius, enim magni blanditiis temporibus nobis consequuntur ut. Quia magnam vero atque modi aspernatur in perferendis voluptas reprehenderit, rerum dolore unde iusto ab non eius molestiae quasi tenetur beatae ipsam quidem, quos at architecto voluptate alias eos. Deserunt velit beatae, ullam, accusantium sit asperiores! A vero perferendis, harum praesentium dolorem deserunt. Numquam voluptas necessitatibus, aliquam ullam saepe harum amet consequatur minima neque officia maxime quo beatae ab aliquid ex placeat rerum unde, reiciendis aspernatur similique, doloremque ad laboriosam modi. Minus quam aperiam, sed aliquid. Fugiat amet harum consequuntur reprehenderit id eum ratione quos temporibus, quae. Ab ut omnis tempora voluptates, sed ea animi voluptatem pariatur quod mollitia corrupti voluptas repellendus consequatur quae adipisci, enim vitae harum nulla natus iusto hic totam officia architecto quam. Debitis dignissimos praesentium, hic. Ad assumenda, aliquid consequuntur dolore eum repudiandae ab explicabo ipsa sed blanditiis. Quidem unde necessitatibus facilis, quis commodi. Dignissimos perferendis, nihil labore corrupti autem cumque ipsum vel voluptatum? Nostrum labore, omnis provident ullam repellendus culpa amet rem consequatur animi, necessitatibus porro. In consequatur optio recusandae, quisquam accusantium at deserunt voluptatem fugit quibusdam neque libero assumenda consectetur numquam ratione quaerat. Quos omnis neque atque, id perferendis possimus, alias, dignissimos doloribus ducimus similique ratione vitae eos laudantium, tempore cupiditate quod consectetur! Voluptas enim laboriosam nesciunt rem. Recusandae beatae numquam asperiores adipisci neque, vel pariatur suscipit provident, a est magni. Laborum dolore incidunt saepe ipsam? Eveniet doloremque animi maxime aliquid rem fugit dolor dignissimos! Quo, ut quod ab.

</main>

<aside>

</aside>

</section>

</footer>

</div>

</body>

</html>

media query
media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능입니다.
특히 최근의 트랜드인 반응형 디자인의 핵심 기술이라고 할 수 있습니다.

mediaquery.html

<!doctype html>

<html>

<head>

<style>

@media (max-width:600px){

body{

background-color: green;

}

@media (max-width:500px){

body{

background-color: red;

}

@media (min-width:601px){

body{

background-color: blue;

}

</style>

</head>

<body>

<ul>

<li>501~600px : green</li>

</ul>

</body>

</html>

mediaquery_2.html

<!doctype>

<html>

<head>

<style>

.container{

display: flex;

flex-direction: column;

}

header{

border-bottom:1px solid gray;

padding-left:20px;

}

footer{

border-top:1px solid gray;

padding:20px;

text-align: center;

}

.content{

display:flex;

}

.content nav{

border-right:1px solid gray;

}

.content aside{

border-left:1px solid gray;

}

@media(max-width:500px){

.content{

flex-direction: column;

}

.content nav, .content aside{

border:none;

flex-basis: auto;

}

main{

order:0;

}

nav{

order:1;

}

aside{

order:2;

display: none;

}

nav, aside{

flex-basis: 150px;

flex-shrink: 0;

}

main{

padding:10px;

}

</style>

</head>

<body>

</header>

<nav>

<ul>

<li>javascript</li>

</ul>

</nav>

<main>

</main>

<aside>

</aside>

</section>

</footer>

</div>

</body>

</html>

float

Float는 편집 디자인에서 이미지를 삽화로 삽입할 때, 레이아웃을 잡을 때 사용하는 기능이다.
현재는 flex가 등장했기 때문에 앞으로 사용 빈도가 줄어들 가능성이 있다.

float.html

<!doctype html>

<html>

<head>

<style>

img{

width:300px;

float:left;

margin:20px;

}

border:1px solid gray;

}

</style>

</head>

<body>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita

</p>

<p style="clear:both;"> => 위에 나온 float: left를 무시하는 것

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita

</p>

</body>

</html>

float를 활용한 holy grail layout

float_2_holy_grail_layout.html

<!doctype html>

<html>

<head>

<style>

box-sizing:border-box;

}

.container{

width:540px;

border:1px solid gray;

margin:auto;

}

header{

border-bottom: 1px solid gray;

}

nav{

float:left;

width:120px;

border-right:1px solid gray;

}

article{

float:left;

width:300px;

border-left:1px solid gray;

border-right:1px solid gray;

margin-left:-1px;

}

aside{

float:left;

width:120px;

border-left:1px solid gray;

margin-left:-1px;

}

footer{

clear:both;

border-top:1px solid gray;

text-align: center;

padding:20px;

}

</style>

</head>

<body>

<h1>

CSS

</h1>

</header>

<nav>

<ul>

<li>position</li>

<li>float</li>

</ul>

</nav>

<h2>float</h2>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quae earum enim ab distinctio corrupti eius reprehenderit non, rerum ut nisi autem cum sint perferendis eum id velit, molestias nesciunt. Ullam dignissimos consequuntur explicabo id voluptas vel deleniti nesciunt veritatis iusto commodi, laudantium cumque vero deserunt laboriosam. Ea, quia est?

</article>

<aside>

</aside>

copyleft

</footer>

</div>

</body>

</html>

box모델에서는 테두리값도 포함된다.
이 때, 박스의 크기를 포함하기위한 태그는 box-sizing이 있다.

다단(multi column)

신문과 같이 화면 분할을 통해 가독성을 높이는 레이아웃을 의미한다.

multi_column.html

<!DOCTYPE html>

<html>

<head>

<style>

.column{

text-align: justify

column-count: 4;

/* column-width: 200px;*/

column-gap:30px;

column-rule-style: solid;

column-rule-width: 5px;

column-rule-color: red;

}

h1{ column-span: all; }

</style>

</head>

<body>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis nostrum eum ipsam, quam expedita distinctio aspernatur voluptas inventore in officia at, a repudiandae modi vel dicta exercitationem accusamus? Tenetur minima doloremque, sequi id, necessitatibus deleniti porro ex maxime perferendis quaerat rerum molestias dolor fugit ullam expedita? Earum velit eaque, esse aliquid labore, ex, corporis odit deserunt consectetur sit aspernatur <h1>Lorem ipsum dolor sit amet.</h1> ipsam quos cupiditate dolores voluptatem non nam voluptas ab animi quidem adipisci repellat id quod. Laboriosam, distinctio, ut. Quia deserunt, voluptates illum eos, qui, doloremque recusandae laudantium aliquam amet rerum nulla, eveniet. Libero quas iusto, suscipit esse beatae voluptas labore. Nobis facere architecto adipisci ipsa molestias, possimus tempore. Obcaecati, quae laborum atque perspiciatis natus dolore repellendus in officia, sit! Placeat, nesciunt cupiditate similique vitae minima iusto blanditiis perferendis obcaecati enim odio delectus. Quaerat quos deserunt, voluptas aperiam. Quo neque ducimus accusamus quibusdam minima incidunt, voluptatem saepe iusto sit numquam, expedita distinctio aliquid voluptatum alias voluptate sint est ab similique ipsam unde quas porro error? Illum unde consequuntur ab optio architecto, adipisci odit saepe dolor est perferendis error autem iusto a iste tempore nam enim quaerat dicta fugit vel eaque itaque, laborum? Dolores consequatur quo labore dolorem nemo in, tempora animi enim delectus ipsam amet possimus et deserunt recusandae eveniet provident cum quaerat dolorum esse, nam doloremque! Porro sapiente labore aliquam incidunt temporibus praesentium est tempora magnam placeat rem. Autem non provident eos perferendis nihil numquam quisquam suscipit aut, vero minima ex iure cum possimus eveniet veniam aliquam nulla a dignissimos, fugit tempora eaque totam temporibus! Magni minus expedita tempore deserunt necessitatibus, quibusdam, repellat sequi quos exercitationem aliquam sapiente libero eius vitae rem ea nihil deleniti nemo debitis tempora soluta a similique inventore. Sit vero dignissimos facere dolore dicta nulla iure magni quos officiis esse hic accusantium, praesentium adipisci laudantium impedit provident fuga suscipit, placeat porro itaque voluptatum dolorem ullam velit quasi. Laboriosam distinctio explicabo, ullam fugit nesciunt nam itaque repellendus nemo doloribus officia unde quaerat aspernatur odit. Porro quisquam at officia, ad totam minima minus aliquid aliquam rerum dicta, odio sint optio. Exercitationem similique, dignissimos sit nihil fuga ex dolores molestiae ratione impedit error, vitae aliquid reiciendis maxime id odit sed eveniet. Corporis in mollitia assumenda, exercitationem ullam explicabo dolorum tempore architecto cum. Possimus natus ipsam facilis porro magni deleniti nulla eveniet aliquam incidunt minima nihil alias voluptatem, odio molestiae quaerat suscipit, officiis temporibus itaque veritatis, placeat modi corporis saepe harum delectus officia. Libero rerum expedita dolorem porro architecto reprehenderit eligendi molestiae, amet minima quae assumenda neque nulla error, officiis suscipit placeat, illo eius. Aliquid dicta cupiditate culpa consequatur totam. Qui consequuntur eveniet eum dicta repellendus quam ea quisquam dolore, distinctio, quidem facilis minus ratione ullam perferendis. Ad ea, aliquid doloremque distinctio enim hic sunt illum dolore, commodi iusto nobis temporibus nesciunt, vero quae velit perferendis dicta. Quod necessitatibus sit, accusamus odit aspernatur! Sequi, nisi aut at totam perspiciatis fugit quos minus sapiente consequatur neque officiis quibusdam qui nemo, voluptatibus minima dolore laboriosam. Recusandae similique accusamus vel eaque tempore fugiat dolore adipisci, tempora, impedit harum facere aspernatur et nam sequi, facilis architecto voluptate sunt iusto soluta. Itaque laboriosam tempore ab harum fugit natus, eius laborum culpa, impedit autem magni totam. Et dicta animi molestiae, aliquam, sequi enim. Accusamus consectetur eum eligendi nemo sunt provident ut repudiandae, distinctio! Recusandae harum animi quia perferendis maiores! Ratione quis cupiditate odio dolore nulla minus iure veritatis hic temporibus neque beatae delectus doloribus repellat quisquam alias mollitia accusantium perferendis, quibusdam recusandae, iusto modi maiores excepturi corrupti voluptatibus! Facere, maiores ea natus culpa necessitatibus temporibus, eaque, vitae nihil animi repudiandae expedita aspernatur quo sequi, soluta. Minus eligendi tenetur ullam, doloremque, quod libero provident excepturi beatae cumque quo, voluptate. Quam deleniti minus officiis. Sit velit, debitis voluptatem modi consequatur doloremque aperiam assumenda expedita odio nesciunt quis ipsam, cumque impedit quia veritatis error quidem similique accusantium eos, qui sunt? Blanditiis facere tenetur eius minus dolorum, praesentium doloremque consequatur accusamus quis expedita, reiciendis odio optio illo voluptatibus ut asperiores quos officia totam distinctio eaque. Aspernatur eaque nihil porro illo laboriosam ex ea id fuga ipsa! Cum reprehenderit, cumque dolorum aliquam quidem aliquid soluta corrupti pariatur fugiat quae excepturi tempora, nostrum eveniet accusamus consectetur alias minus nulla unde. Rem expedita vitae labore culpa, id sit reiciendis quaerat, temporibus nemo eos modi error excepturi voluptatem. Non officia, accusantium inventore reiciendis cupiditate laboriosam ullam quaerat officiis facilis modi eum iste eius, soluta, iure nobis dolor. Similique deserunt beatae officia reprehenderit quo, aliquam facilis autem nihil in! Quisquam minima sunt corporis, ipsum maiores nam quia corrupti, odit id suscipit ratione voluptate nisi incidunt sequi eum facilis dicta deleniti aliquid ducimus maxime esse qui. Sunt eius, deserunt illo quod ducimus quasi, sed soluta ipsum inventore nisi! Optio modi omnis, ex, fugit nemo eveniet. Nostrum, incidunt porro, dolores non, dolor velit commodi eius recusandae eaque necessitatibus molestiae dolorem unde ipsa voluptatum. Ipsa ab minus atque non quis debitis delectus similique excepturi, ipsum suscipit perferendis doloribus deleniti nam blanditiis architecto quae fuga porro perspiciatis magnam ipsam pariatur. Quia, temporibus. Molestias quia nesciunt vitae quam, deserunt dolor adipisci architecto minus natus facere, molestiae, sint eum. Soluta magni totam ducimus, deserunt quam, nisi unde, asperiores iusto, repudiandae aperiam dolorem ab libero aliquam fugit ratione voluptatem sunt vel earum saepe debitis id nostrum minus ullam quaerat. Amet molestias deserunt quae assumenda ut odit corporis accusantium saepe labore ad. Distinctio in doloremque, deleniti provident ducimus quisquam at, temporibus odio eligendi, consequuntur sequi quibusdam facere aut enim vel similique eius asperiores aperiam ratione suscipit est eum dolore. In eius dignissimos, quod illum dolores! Molestiae possimus eius, illo incidunt optio deleniti, nihil odit nisi harum, quo ex. Corporis omnis accusantium consequuntur ratione laudantium magni tempora expedita. Earum ullam, aspernatur quisquam doloremque soluta quae eius tempora atque magni omnis ex vel iusto, similique eos provident! Autem ipsum aliquam quasi minima, incidunt perferendis facere, optio nobis rerum dolor ipsam quas. Quam consectetur recusandae voluptatem. Praesentium excepturi sunt ut neque eum labore ducimus repudiandae eveniet quibusdam explicabo, iure obcaecati nobis, veritatis quis et accusantium ipsa.

</div>

</body>

</html>

저작자표시 비영리 변경금지

con-templatio

레이아웃

댓글

티스토리툴바

레이아웃

관련글

댓글

티스토리툴바