CSS

블로그 사이트 class로 css속성 가져와서 간단하게 만들기

이미사용 2023. 5. 11. 19:47
명언
-
728x90
반응형

같은 클래스 라도 추가로 넣는 class의 css의 값에 따라 적용되는 이미지 가 달라집니다.

.cards__inner > div {
    width: 24%;
}
.cards__inner.col2 > div {
    width: 49%;
}
.cards__inner.col3 > div {
    width: 32.3333%;
}
.cards__inner.col4 > div {
    width: 24%;
}
.cards__inner.col6 > div {
    width: 15.6666%;
}

전체 css

.blog__wrap {
    padding: 100px 0;
}

.blog__wrap h2 {
    display: inline-block;
    border: 1px solid var(--color__black);
    font-size: 0.8em;
    padding: 0.1em 1em;
    margin-bottom:  1.6em;
}
.blog__wrap h2:hover {
    background-color: var(--color__black);
    color: var(--color__white);
    cursor: grabbing;
}
.cards__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cards__inner > div {
    width: 24%;
}
.cards__inner.col2 > div {
    width: 49%;
}
.cards__inner.col3 > div {
    width: 32.3333%;
}
.cards__inner.col4 > div {
    width: 24%;
}
.cards__inner.col6 > div {
    width: 15.6666%;
}
.card__img {}
.card__img img {
    filter: saturate(0);
    transition: all 0.3s;
    border-radius: 10px;
}
.card__img img:hover {
    filter: saturate(1);
    transition: all 0.3s;

}
.card__title h3 {
    font-size: 1.2em;
    text-decoration: underline;
    text-underline-position: under;
    padding: 0.3em 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}
.card__title p {
    font-size: 1.1em;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    -webkit-box-pack: justify;
    margin-bottom: 1em;
}
.cards__inner.line3 .card__title p {
    -webkit-line-clamp: 3;
}
.cards__inner.line2 .card__title p {
    -webkit-line-clamp: 2;
}
.card__info {
    margin-bottom: 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card__info .more {
    position: relative;
    padding-left: 40px;
}
.card__info .more::before {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color__black);
    position: absolute;
    left: 0;
    top: -8px;

}
.card__info .more::after {
    content: '';
    width: 10px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.646447 8.64645C0.451184 8.84171 0.451184 9.15829 0.646447 9.35355C0.841709 9.54882 1.15829 9.54882 1.35355 9.35355L0.646447 8.64645ZM9.5 1C9.5 0.723858 9.27614 0.5 9 0.5L4.5 0.5C4.22386 0.5 4 0.723858 4 1C4 1.27614 4.22386 1.5 4.5 1.5L8.5 1.5L8.5 5.5C8.5 5.77614 8.72386 6 9 6C9.27614 6 9.5 5.77614 9.5 5.5L9.5 1ZM1.35355 9.35355L9.35355 1.35355L8.64645 0.646447L0.646447 8.64645L1.35355 9.35355Z' fill='white'/%3E%3C/svg%3E");
    position: absolute;
    left: 10px;
    top: 2px;
    transition: all 0.3s;

}
.card__info .more:hover::after {
    transform: rotate(405deg);
}

.card__info .author {
    position: relative;
    padding-left: 40px;
}
.card__info .author::after {
    content: '';
    width: 10px;
    height: 10px;
    background-image: url(../img/blog06.jpg);
    background-size: cover;
    background-position: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: -2px;
    transition: all 1s;

}
.card__info .author:hover::after {
    transform: rotate(1800deg);
}

.card__info .date {
    color: #666;
    font-size: 0.8em;
}

 

 

cards__inner에 col4을 같이 적은 경우

            <div class="blog__wrap bmStyle">
                <h2>javascript Topic</h2>
                <div class="cards__inner col4">
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog01.png, assets/img/blog01@2x.png 2x, assets/img/blog01@3x.png 3x" />
                            <img src="assets/img/blog01.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>코딩 기본 사항에 대한 자습서</h3>
                            <p>코딩을 처음 접하는 경우 변수, 조건문, 반복문과 같은 코딩의 기초를 이해하는 것이 중요합니다. 자습서는 이러한 개념을 설명하고 코딩의 기초를 배우는 방법을 단계별로 안내합니다.</p>
                        </div>
                        <div class="card__info">
                            <a href="#" class="more">더보기</a>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog02.png, assets/img/blog02@2x.png 2x, assets/img/blog02@3x.png 3x" />
                            <img src="assets/img/blog02.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>코딩 문제 해결에 대한 팁과 트릭</h3>
                            <p>코딩을 하다 보면 문제가 발생할 수 있습니다. 이러한 팁과 트릭은 문제를 해결하는 데 도움이 됩니다. 여기에는 디버깅, 오류 추적 및 문제 해결 방법에 대한 팁이 포함됩니다.</p>
                        </div>
                        <div class="card__info">
                            <a href="#" class="more">더보기</a>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog03.png, assets/img/blog03@2x.png 2x, assets/img/blog03@3x.png 3x" />
                            <img src="assets/img/blog03.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>코딩 경력에 대한 조언</h3>
                            <p>코딩 경력에 관심이 있다면 조언을 찾을 수 있는 좋은 출처가 많이 있습니다. 이러한 블로그 게시물은 취업 면접 기술, 이력서 작성 방법 및 경력 개발에 대한 팁을 제공합니다.</p>
                        </div>
                        <div class="card__info">
                            <a href="#" class="more">더보기</a>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog04.png, assets/img/blog04@2x.png 2x, assets/img/blog04@3x.png 3x" />
                            <img src="assets/img/blog04.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>다른 개발자의 코드 분석</h3>
                            <p>다른 개발자의 코드를 분석하는 것은 코딩 기술을 향상시키는 좋은 방법입니다. 이 분석은 다른 개발자가 문제를 해결하고 코드를 작성하는 방법을 배울 수 있습니다.</p>
                        </div>
                        <div class="card__info">
                            <a href="#" class="more">더보기</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //cards__inner1 -->

-이 처럼 cards__inner 옆에 추가 class로 col4를 넣어주면 width값이 24% 가 되어 한줄에 4개의 컨텐츠가 나오게 됩니다.

 

cards__inner에 col2을 같이 적은 경우

	 <div class="blog__wrap bmStyle">
                <h2>javascript Topic</h2>
                <div class="cards__inner col2 line2">
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog07.png, assets/img/blog07@2x.png 2x, assets/img/blog07@3x.png 3x" />
                            <img src="assets/img/blog07.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>코딩 기본 사항에 대한 자습서</h3>
                            <p>코딩을 처음 접하는 경우 변수, 조건문, 반복문과 같은 코딩의 기초를 이해하는 것이 중요합니다. 자습서는 이러한 개념을 설명하고 코딩의 기초를 배우는 방법을 단계별로 안내합니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">JJJ</span>
                            <span class="date">2023.05.11</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog06.png, assets/img/blog06@2x.png 2x, assets/img/blog06@3x.png 3x" />
                            <img src="assets/img/blog06.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>코딩 문제 해결에 대한 팁과 트릭</h3>
                            <p>코딩을 하다 보면 문제가 발생할 수 있습니다. 이러한 팁과 트릭은 문제를 해결하는 데 도움이 됩니다. 여기에는 디버깅, 오류 추적 및 문제 해결 방법에 대한 팁이 포함됩니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">JJJ</span>
                            <span class="date">2023.05.11</span>
                        </div>
                    </div>
                </div> 
            </div>
            <!-- //cards__inner2 -->

- cards__inner 옆에 추가 class로 col2를 넣어주면 width값이 49% 가 되어 한줄에 2개의 컨텐츠 만 나오게 됩니다.

 

 

cards__inner에 col6을 같이 적은 경우

            <div class="blog__wrap">
                <h2>javascript Topic</h2>
                <div class="cards__inner col6 line2">
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog03.png, assets/img/blog03@2x.png 2x, assets/img/blog03@3x.png 3x" />
                            <img src="assets/img/blog03.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>코딩 기본 사항에 대한 자습서</h3>
                            <p>코딩을 처음 접하는 경우 변수, 조건문, 반복문과 같은 코딩의 기초를 이해하는 것이 중요합니다. 자습서는 이러한 개념을 설명하고 코딩의 기초를 배우는 방법을 단계별로 안내합니다.</p>
                        </div>
                        <div class="card__info">
                            <a href="#" class="more">더보기</a>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog04.png, assets/img/blog04@2x.png 2x, assets/img/blog04@3x.png 3x" />
                            <img src="assets/img/blog04.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>코딩 문제 해결에 대한 팁과 트릭</h3>
                            <p>코딩을 하다 보면 문제가 발생할 수 있습니다. 이러한 팁과 트릭은 문제를 해결하는 데 도움이 됩니다. 여기에는 디버깅, 오류 추적 및 문제 해결 방법에 대한 팁이 포함됩니다.</p>
                        </div>
                        <div class="card__info">
                            <a href="#" class="more">더보기</a>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog05.png, assets/img/blog05@2x.png 2x, assets/img/blog05@3x.png 3x" />
                            <img src="assets/img/blog05.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>코딩 경력에 대한 조언</h3>
                            <p>코딩 경력에 관심이 있다면 조언을 찾을 수 있는 좋은 출처가 많이 있습니다. 이러한 블로그 게시물은 취업 면접 기술, 이력서 작성 방법 및 경력 개발에 대한 팁을 제공합니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">JJJ</span>
                            <span class="date">2023.05.11</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog06.png, assets/img/blog06@2x.png 2x, assets/img/blog06@3x.png 3x" />
                            <img src="assets/img/blog06.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>다른 개발자의 코드 분석</h3>
                            <p>다른 개발자의 코드를 분석하는 것은 코딩 기술을 향상시키는 좋은 방법입니다. 이 분석은 다른 개발자가 문제를 해결하고 코드를 작성하는 방법을 배울 수 있습니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">JJJ</span>
                            <span class="date">2023.05.11</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog07.png, assets/img/blog07@2x.png 2x, assets/img/blog07@3x.png 3x" />
                            <img src="assets/img/blog07.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>다른 개발자의 코드 분석</h3>
                            <p>다른 개발자의 코드를 분석하는 것은 코딩 기술을 향상시키는 좋은 방법입니다. 이 분석은 다른 개발자가 문제를 해결하고 코드를 작성하는 방법을 배울 수 있습니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">JJJ</span>
                            <span class="date">2023.05.11</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source srcset="assets/img/blog08.png, assets/img/blog08@2x.png 2x, assets/img/blog08@3x.png 3x" />
                            <img src="assets/img/blog08.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title">
                            <h3>다른 개발자의 코드 분석</h3>
                            <p>다른 개발자의 코드를 분석하는 것은 코딩 기술을 향상시키는 좋은 방법입니다. 이 분석은 다른 개발자가 문제를 해결하고 코드를 작성하는 방법을 배울 수 있습니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">JJJ</span>
                            <span class="date">2023.05.11</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //cards__inner4 -->

 

-위와 같이 한줄에 6개의 콘텐츠가 차지 하는것을 볼수 있습니다. class를 잘 활용하면 다양한 디자인을 손쉽게 만들수 있습니다.

'CSS'의 다른글

  • 현재글블로그 사이트 class로 css속성 가져와서 간단하게 만들기

관련글

댓글

티스토리툴바