Amarans
0219 | Column | Background | 본문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="amarans">
<style>
img{
width: 222px;
float: left;
}
.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>
<div class="column">
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, <img src="sample.jpg">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>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
div{
font-size: 55px;
height: 600px;
border: 5px solid gray;
background-color: tomato;
background-image: url('angle.png');
/* background-repeat: no-repeat; */
/*반복한다 = repeat 반복하지 않는다 = norepeat
repeat-x = 행 으로 반복 repeat-y 열 반복*/
/* background-attachment: fixed; 이미지는 스크롤되지 않음 이코드를 지우면 or fixed 말고 scroll 로 바꾸면 가능합니다.
기본값이 스크롤 상태입니다.*
/* background-size: contain; = 화면 전체에 이미지를 / 이미지 깨짐. cover = 이미지 전체를 살짝 작게해서 화면안에 안깨짐 */
/* background-position: center; 이미지가 반복하지 않을때 그 하나의 이미지 위치를 정해줄수 있음. */
/* background: tomato url('angle.png') no-repeat fixed center; < 한번에 표현하는 방법 */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus tempora porro aliquid quaerat ipsam odit maxime dolores, sunt rerum natus laudantium praesentium eum nulla vel facilis quod expedita nostrum eius maiores ipsa, enim harum. Suscipit, nam repudiandae vel porro a, assumenda iure mollitia quis sequi fugiat debitis vero consequatur eos numquam voluptatum repellat expedita! Error, voluptatem ad, quis delectus rem omnis nihil eum accusantium consequuntur veniam quos amet sapiente dolor exercitationem aperiam ipsam? Dicta laudantium pariatur minima perferendis necessitatibus similique eveniet, minus consequatur? Ea ex repellendus modi? Commodi perspiciatis soluta quam tempora minima, ab provident odio esse id? Dolor ea officiis eaque debitis temporibus quod error fuga facere nulla cum magnam soluta voluptatem, doloribus odio nisi cupiditate. Repudiandae doloremque quae dolore harum architecto at amet et consectetur facilis in non nobis magnam, cum, unde facere dolorem? Qui sint veniam minima illum, similique quam placeat voluptatem. Tempora ducimus nihil, temporibus optio libero vitae! Obcaecati aliquid et esse repellendus eius aliquam adipisci cum necessitatibus sint placeat, doloremque dolorum! Dicta omnis suscipit esse similique dolorum in quo ducimus explicabo aliquam quia quos aut neque, architecto possimus quas? Doloremque iste sequi, iure repudiandae itaque reprehenderit vitae illo, at amet, ratione deleniti debitis cumque! Neque commodi error porro officiis debitis sequi repudiandae officia repellat, autem aspernatur tenetur, ullam fugiat velit laudantium maxime ad labore odit temporibus incidunt facilis soluta odio, consectetur blanditiis! Sunt necessitatibus facere perferendis at ducimus eius, neque blanditiis dolores et aliquam tempora aut distinctio ea delectus id minus debitis excepturi labore. Hic natus explicabo quo reprehenderit ratione impedit eveniet quasi, accusantium quod dicta velit magnam tempora, dignissimos sed minima alias voluptatibus fugiat illum perferendis molestias quam quaerat. Amet dolorum fuga consequuntur aliquam, alias molestiae quae aut totam, explicabo omnis at ducimus. Ducimus minus quo eligendi necessitatibus culpa aliquid, repudiandae recusandae. Iure officia eligendi modi placeat quibusdam, culpa eos atque accusantium natus quas inventore consequatur doloribus ipsum ut nulla at cupiditate corporis. Facere fuga fugit dicta eum accusantium veniam a assumenda adipisci consequuntur itaque earum sunt quaerat, corporis asperiores nostrum quibusdam ab cumque. Vel tempore harum error corrupti iusto commodi incidunt ut culpa obcaecati, veniam soluta deleniti perspiciatis, earum assumenda praesentium in rem velit alias debitis eos. Placeat eligendi minus, voluptatibus maxime veritatis magnam, dicta aspernatur enim quaerat doloribus quibusdam animi quam ex architecto non nam distinctio ipsam! Quas illo alias, voluptatem corrupti tempora molestias nam accusantium neque similique natus sequi doloremque, cupiditate molestiae voluptatum iste inventore ducimus laborum nisi consequuntur eveniet ea rem corporis sapiente a. Cumque itaque iste tenetur odio corrupti eveniet blanditiis eum dicta, veritatis hic? Nesciunt possimus recusandae excepturi dicta exercitationem ratione voluptatibus mollitia. Dolorum eos, iste accusamus unde ratione et minima commodi provident repellat nesciunt quod! Rerum fuga inventore nihil voluptatum non sint ducimus quae corrupti reiciendis eos neque corporis culpa, facilis ut repudiandae explicabo animi quod magni nisi aperiam illo. Totam ullam placeat repudiandae fuga rerum pariatur odit vitae, eaque tempora voluptate voluptatum qui. Sunt eius dicta sed delectus illum aspernatur cum aut dolorum voluptate, reprehenderit quisquam!
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 0220 CSS-| Link | Pontello (0) | 2020.02.20 |
|---|---|
| 0220 CSS-|Filter|Transtion| (0) | 2020.02.20 |
| 0219 Flot | holy_grail_layout (0) | 2020.02.19 |
| 0219 Flex | grow&shrink | holy_grail_layout (0) | 2020.02.19 |
| 0218 CSS| Position | text_align | (0) | 2020.02.19 |
'CSS' Related Articles
more
Comments