Front-end 국비지원 #026일

JooSehyun·2022년 11월 22일
COLUMNCSShtmlphoto다단반응형포토
0

HTML / CSS

Column

CSS 다단(multi-column) 레이아웃은 다단 텍스트 정의가 쉽도록 블록 레이아웃 모드를 확장한다. 사람들은 줄이 너무 긴 경우 텍스트 읽는데 어려움이 있다. 한 줄 끝에서 다음 줄 시작까지 눈에 옮기기 너무 긴 경우, 어느 줄을 읽고 있었는 지를 잊어버린다. 그러므로, 큰 화면을 최대로 쓰기 위해서는, 너비가 제한된 텍스트 단을 나란히 놓아야 한다, 바로 신문이 하는 것처럼.

불행하게도 이는 CSS 및 HTML로 하기는 고정 위치에서 강제 단 바꿈 또는 텍스트에 허용되는 마크업의 심한 제한 혹은 위대한(heroic) 스크립팅 사용 없이는 불가능함. 이 제한은 전통 블록 레이아웃 모드를 확장하는 새로운 CSS 속성 추가로 해결됨.

ex)1

결과

HTML

<body>
    <div class="container">
        <h1>Heading 1</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae in tempore expedita harum, veniam iusto facere obcaecati voluptas autem cum? Asperiores eum impedit harum cumque animi accusamus quasi ad at.</p>
	<h3>Heading 3</h3>
        <p>repudiandae nostrum nemo id voluptate provident aliquid consectetur maiores qui laborum eum, alias dolorum veniam?</p>
		<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus, voluptates? Amet mollitia deleniti</p>
		<blockquote>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <p>Et mollitia incidunt provident. Illum numquam deleniti corporis et omnis neque accusamus, nemo maxime nihil, odit officiis eveniet, aspernatur iure minus suscipit.</p>
            <cite>James, Author</cite>
        </blockquote>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus rerum quos facere et hic. Nesciunt est aspernatur suscipit</p>
		<h3>Heading 3</h3>
        <p>Nam nulla ex ratione enim illum pariatur accusantium cum! Laborum, officia reprehenderit dolorum quas obcaecati quos quia dolor aliquid blanditiis enim saepe.</p>
		<figure>
            <img src="https://cdn.pixabay.com/photo/2022/11/02/09/43/sand-7564466__340.jpg" alt="">
            <figcaption>freedom</figcaption>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque sequi incidunt laboriosam ullam porro odio minima ex, obcaecati optio eligendi fuga neque recusandae dicta possimus quo culpa, dolorum quisquam magnam!</p>
			<h3>Heading 3</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <p> Sint eligendi ipsa magni beatae laborum explicabo</p>
            <p>ducimus dolor maiores praesentium dignissimos nulla perspiciatis, ab corrupti tempore, consequuntur blanditiis aperiam nihil in?</p>
            <button type="button">Read more</button>
        </figure>
    </div>
</body>

CSS

@charset "utf-8";
body{line-height: 1.5;}
.container{
    width: 75%;
    margin: 0 auto;
    columns: 3;
}
blockquote{font-weight: bold;}
blockquote cite{font-weight: normal;}
img{max-width: 100%;}

@media screen and (min-height: 400px) {
    .container{
    columns: 3;
    column-rule: 1px dashed red;
    column-gap: 40px;
    }
}
  • columns를 3칸으로 지정한다.
  • @media에 columns: 3; column-rule: 1px dashed red; column-gap: 40px;을 적용하면 화면과 같이 된다.

ex)2

결과

HTML

<body>
    <ul class="masonry">
        <li>
            <img src="https://cdn.pixabay.com/photo/2022/02/02/09/47/iceland-6988000__340.jpg" alt="">
            <h3>Lorem ipsum dolor sit</h3>
            <p>amet consectetur adipisicing elit.</p>
        </li>
        <li>
            <img src="https://cdn.pixabay.com/photo/2021/09/18/02/27/vietnam-6634082__340.jpg" alt="">
            <h3>Lorem ipsum dolor sit</h3>
            <p>amet consectetur adipisicing elit. omnis quos facere vitae nisi voluptas quo ab, ipsa nam dolorem iste laborum unde quasi expedita provident autem esse.</p>
        </li>
        <li>
            <img src="https://cdn.pixabay.com/photo/2022/10/05/05/40/sunset-7499759__340.jpg" alt="">
            <h3>Lorem ipsum dolor sit</h3>
            <p>Adipisci, eius magni omnis quos facere vitae nisi voluptas quo ab, ipsa nam dolorem iste laborum unde quasi expedita provident autem esse. amet consectetur adipisicing elit. Adipisci, eius magni omnis quos facere vitae nisi voluptas quo ab, ipsa nam dolorem iste laborum unde quasi expedita provident autem esse.</p>
        </li>
        <li>
            <img src="https://cdn.pixabay.com/photo/2022/10/31/04/55/woman-7558886__340.jpg" alt="">
            <h3>Lorem ipsum dolor sit</h3>
            <p>amet consectetur adipisicing elit. Adipisci, eius magni omnis quos facere vitae nisi voluptas quo ab, ipsa nam dolorem iste laborum unde quasi expedita provident autem esse.</p>
        </li>
        <li>
            <img src="https://cdn.pixabay.com/photo/2022/11/04/08/29/water-7569331__340.jpg" alt="">
            <h3>Lorem ipsum dolor sit</h3>
            <p>ipsa nam dolorem iste laborum unde quasi expedita provident autem esse. amet consectetur adipisicing elit. </p>
        </li>
        <li>
            <img src="https://cdn.pixabay.com/photo/2022/01/26/20/11/aluminum-foil-6969822__340.jpg" alt="">
            <h3>Lorem ipsum dolor sit</h3>
            <p>amet consectetur adipisicing elit. Adipisci, eius magni omnis quos facere vitae nisi voluptas quo ab.</p>
        </li>
        <li>
            <img src="https://cdn.pixabay.com/photo/2022/11/03/13/07/book-7567437__340.jpg" alt="">
            <h3>Lorem ipsum dolor sit</h3>
            <p>amet consectetur adipisicing elit. Adipisci, eius magni omnis quos facere vitae nisi voluptas quo ab, ipsa nam dolorem iste laborum unde quasi expedita provident autem esse. ipsa nam dolorem iste laborum unde quasi expedita provident autem esse.</p>
        </li>
        <li>
            <img src="https://cdn.pixabay.com/photo/2022/10/20/12/36/germany-7534750__340.jpg" alt="">
            <h3>Lorem ipsum dolor sit</h3>
            <p>amet ipsa nam dolorem iste laborum unde quasi expedita provident autem esse. consectetur adipisicing elit. Adipisci, eius magni omnis quos facere vitae nisi voluptas quo ab, ipsa nam dolorem iste laborum unde quasi expedita provident autem esse.</p>
        </li>
    </ul>
</body>

CSS

@charset "utf-8";

.masonry{list-style: none; padding: 0; margin: 3rem auto; width: 80%; columns: 15rem; column-gap: 2rem;}
.masonry li{margin-bottom: 5rem; break-inside: avoid;}
.masonry li img{max-width: 100%;}
  • columns: 15rem; 컬럼을 15rem 너비 만큼 가지고 창을 줄이면 반응형으로 떨어진다.
  • break-inside: avoid; 를 적용하면 상단에 비워지고 하단으로 내려오는 것들을 채워준다.

ex)3

결과

HTML

<body>
   <div class="c-multicol">
        <div class="post">
            <img src="https://cdn.pixabay.com/photo/2022/06/13/14/58/road-7260175__340.jpg" alt="">
            <h1>Lorem ipsum dolor</h1>
            <p>Libero beatae vel voluptas.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni consequatur totam, officiis dolore fugiat vitae ducimus ipsa! Quidem cupiditate nisi porro tempora sapiente maxime, illum perferendis, est quasi praesentium beatae!</p>
        </div>
        <div class="post">
            <img src="https://cdn.pixabay.com/photo/2022/10/24/14/04/mountains-7543535__340.jpg" alt="">
            <h1>Lorem ipsum dolor</h1>
             <p>Lorem illum perferendis, est quasi praesentium beatae!</p>
            <p>Libero beatae vel voluptas.</p>
        </div>
        <div class="post">
            <img src="https://cdn.pixabay.com/photo/2022/10/31/14/44/namib-desert-7559993__340.jpg" alt="">
            <h1>Lorem ipsum dolor</h1>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni consequatur totam, officiis dolore fugiat vitae ducimus ipsa! Quidem cupiditate nisi porro tempora sapiente maxime, illum perferendis, est quasi praesentium beatae!</p>
            <p>Libero beatae vel voluptas.</p>
        </div>
        <div class="post">
            <img src="https://cdn.pixabay.com/photo/2022/10/25/07/07/diamond-beach-7545049__340.jpg" alt="">
            <h1>Lorem ipsum dolor</h1>
            <p>Lorem ipsum dolor sit amet cupiditate nisi porro tempora sapiente maxime, illum perferendis, est quasi praesentium beatae!</p>
            <p>Libero beatae vel voluptas.</p>
        </div>
        <div class="post">
            <img src="https://cdn.pixabay.com/photo/2022/10/25/07/07/diamond-beach-7545049__340.jpg" alt="">
            <h1>Lorem ipsum dolor</h1>
            <p>Lorem ipsum dolor sit amet cupiditate nisi porro tempora sapiente maxime, illum perferendis, est quasi praesentium beatae!</p>
            <p>Libero beatae vel voluptas.</p>
        </div>
        <div class="post">
            <img src="https://cdn.pixabay.com/photo/2022/10/25/07/07/diamond-beach-7545049__340.jpg" alt="">
            <h1>Lorem ipsum dolor</h1>
            <p>Lorem ipsum dolor sit amet cupiditate nisi porro tempora sapiente maxime, illum perferendis, est quasi praesentium beatae!</p>
            <p>Libero beatae vel voluptas.</p>
        </div>
   </div>
</body>

CSS

@charset "utf-8";
*{box-sizing: border-box;}
body{padding: 2rem; margin: 0; background: #e3e7f2; line-height: 1.5; color: rgba(17, 20, 45, 1); counter-reset: item; columns: 3;}
p{color: rgba(17, 20, 45, .8);}
h1{text-transform: uppercase; font-size: 18px; margin: 2rem 0 1.5rem;}
.post{
    position: relative;
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: rgba(255, 255, 255, .1) 0 1px 1px 0 inset, rgba(50, 50, 93, .25) 0 50px 10px -20px, rgba(0, 0, 0, .3) 0 30px 60px -30px;
}
.post::before{
    content: counter(item);
    counter-increment: item;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: #fff;
    background: #ff2c6d;
    text-align: center;
    line-height: 1.5rem;
    font-size: 80%;
}
.post img{width: 100%; display: block;}

@media screen and (min-width: 768px) {
    .c-multicol{
    column-width: 30%;
    column-gap: 2rem;
    }
    .post{
        break-inside: avoid;
    }
}

다단에 일괄로 번호를 부여하고 싶다면, body에 counter-reset: item; 적용하고
::before의 가상선택자를 만든 후 content: counter(item); , counter-increment: item; 을 적용한다.

ex)4

결과

HTML

<body>
   <div class="c-grid">
    <div class="item" style="background-image: url(https://source.unsplash.com/random/1);"></div>
    <div class="item">
        <figure>
            <blockquote>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</blockquote>
            <cite>ipsum dolor</cite>
        </figure>
    </div> 
    <div class="item" style="background-image: url(https://source.unsplash.com/random/2);"></div>
    <div class="item">
        <figure>
            <blockquote>Loremconsectetur, adipisicing elit.</blockquote>
            <cite>ipsum dolor</cite>
        </figure>
    </div> 
    <div class="item" style="background-image: url(https://source.unsplash.com/random/3);"></div>
    <div class="item" style="background-image: url(https://source.unsplash.com/random/4);"></div>
    <div class="item">
        <figure>
            <blockquote>Loremadipisicing ipsumadipisicing dolor sit amet consectetur, adipisicing elit.</blockquote>
            <cite>ipsum dolor</cite>
        </figure>
    </div> 
    <div class="item" style="background-image: url(https://source.unsplash.com/random/5);"></div>
	</div>
</body>

CSS

@charset "utf-8";

*{box-sizing: border-box;}

body{
    margin: 0; 
    padding: 0;
    line-height: 1.5;
    counter-reset: set;
}
.c-grid{
    padding: 2rem;
}
.item{
    position: relative;
    background-size: cover;
    border: 3px solid #fff;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item::before{
    content: counter(set);
    counter-increment: set;
    display: block;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    top: 0;
    left: 0;
    color: #fff;
    background: red;
    line-height: 1.5rem;
    text-align: center;

}
.item:nth-child(6n){height: 150px; background: rgb(37, 175, 209);}
.item:nth-child(6n-1){height: 450px; background: rgb(158, 177, 182);}
.item:nth-child(6n-3){height: 300px; background: rgb(78, 111, 119);}
.item:nth-child(6n-4){height: 500px; background: rgb(168, 237, 255);}
.item:nth-child(6n-5){height: 670px; background: rgb6(3, 52, 65);}

figure{padding: 0 2em; margin: 0; text-align: center;}
blockquote{margin-bottom: 1rem;}

@media screen and (min-width: 768px){
    .c-grid{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        height: 100vh;
    }
    figure{padding: 0; max-width: 10vw;}
    .item:nth-child(6n){height: 40%;}
    .item:nth-child(6n-1){height: 30%;}
    .item:nth-child(6n-3){height: 50%;}
    .item:nth-child(6n-4){height: 60%;}
    .item:nth-child(6n-5){height: 25%;}
}

"ex)4" 는 새로침 할 때마다, 랜덤으로 사진이 바뀐다.
background-image:
url(https://source.unsplash.com/random/1);
url(https://source.unsplash.com/random/2);
url(https://source.unsplash.com/random/3); 으로 url에 넣는다.

profile
JooSehyun
이전 포스트

Front-end 국비지원 #025일

다음 포스트

Front-end 국비지원 #027일

0개의 댓글