블로그 만들기 CSS로 레이아웃 쉽게짜보자, 텍스트 제한

블로그 만들기 CSS로 레이아웃 쉽게짜보자, 텍스트 제한

 

 

 

 

블로그 만들기를 하면서

CSS로 레이아웃 틀을 미리 만들어놓고

HTML에서 입력만 해주면 바로 레이아웃이 바뀌도록 작업해줬는데요

정리를 한번 해보겠습니다.

 

 

 

HTML

        <div class="bolg__inner">
            <div class="blog__wrap bmStyle">
                <h2>Javascript Topic</h2>
                <div class="cards__inner col">
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 12.jpg, ../html/assets/img/Frame 12.jpg 2x, ../html/assets/img/Frame 12.jpg 3x" />
                        <img src="../html/assets/img/Frame 12.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>지속적인 학습과 개발</h3>
                            <p>IT 산업은 빠르게 변화하고 발전하고 있습니다. 새로운 기술과 도구들이 출시되는 속도는 더더욱 빨라지고 있기 때문에, 개발자로서 적극적인 학습과 개발이 필수적입니다. </p>
                        </div>
                        <div class="card__info">
                            <a href="#" class="more">더보기</a>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 19.jpg, ../html/assets/img/Frame 19.jpg 2x, ../html/assets/img/Frame 19.jpg 3x" />
                        <img src="../html/assets/img/Frame 19.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=".../html/assets/img/Frame 17.jpg, ../html/assets/img/Frame 17.jpg 2x, ../html/assets/img/Frame 17.jpg 3x" />
                        <img src="../html/assets/img/Frame 17.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=".../html/assets/img/Frame 15.jpg, ../html/assets/img/Frame 15.jpg 2x, ../html/assets/img/Frame 15.jpg 3x" />
                        <img src="../html/assets/img/Frame 15.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>
            <div class="blog__wrap bmStyle">
                <h2>Javascript Topic</h2>
                <div class="cards__inner col2 line2">
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 12.jpg, ../html/assets/img/Frame 12.jpg 2x, ../html/assets/img/Frame 12.jpg 3x" />
                        <img src="../html/assets/img/Frame 12.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>지속적인 학습과 개발</h3>
                            <p>IT 산업은 빠르게 변화하고 발전하고 있습니다. 새로운 기술과 도구들이 출시되는 속도는 더더욱 빨라지고 있기 때문에, 개발자로서 적극적인 학습과 개발이 필수적입니다. </p>
                        </div>
                        <div class="card__info">
                            <span class="author">jin</span>
                            <span class="date">2023.04.03</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 19.jpg, ../html/assets/img/Frame 19.jpg 2x, ../html/assets/img/Frame 19.jpg 3x" />
                        <img src="../html/assets/img/Frame 19.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>팀워크와 소통 능력 향상</h3>
                            <p>개발자는 혼자서 일하는 경우가 드뭅니다. 대부분의 경우 팀을 이루어 프로젝트를 수행하게 됩니다. 따라서, 팀원과의 원활한 소통과 협력이 필수적입니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">jin</span>
                            <span class="date">2023.04.03</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 17.jpg, ../html/assets/img/Frame 17.jpg 2x, ../html/assets/img/Frame 17.jpg 3x" />
                        <img src="../html/assets/img/Frame 17.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>코드 가독성 및 유지보수성 고려</h3>
                            <p>개발자가 작성한 코드는 다른 개발자들이 이해하고 유지보수할 수 있어야 합니다. 따라서, 코드 가독성과 유지보수성을 고려하여 코드를 작성해야 합니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">jin</span>
                            <span class="date">2023.04.03</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 15.jpg, ../html/assets/img/Frame 15.jpg 2x, ../html/assets/img/Frame 15.jpg 3x" />
                        <img src="../html/assets/img/Frame 15.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>문제 해결 능력</h3>
                            <p>프로젝트를 진행하다 보면 다양한 문제가 발생할 수 있습니다. 개발자는 이러한 문제를 빠르게 파악하고, 효과적인 문제 해결 방안을 찾아내야 합니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">jin</span>
                            <span class="date">2023.04.03</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="blog__wrap bmStyle">
                <h2>Javascript Topic</h2>
                <div class="cards__inner col3 line3">
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 12.jpg, ../html/assets/img/Frame 12.jpg 2x, ../html/assets/img/Frame 12.jpg 3x" />
                        <img src="../html/assets/img/Frame 12.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>지속적인 학습과 개발</h3>
                            <p>IT 산업은 빠르게 변화하고 발전하고 있습니다. 새로운 기술과 도구들이 출시되는 속도는 더더욱 빨라지고 있기 때문에, 개발자로서 적극적인 학습과 개발이 필수적입니다. </p>
                        </div>
                        <div class="card__info">
                            <span class="author">jin</span>
                            <span class="date">2023.04.03</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 19.jpg, ../html/assets/img/Frame 19.jpg 2x, ../html/assets/img/Frame 19.jpg 3x" />
                        <img src="../html/assets/img/Frame 19.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>팀워크와 소통 능력 향상</h3>
                            <p>개발자는 혼자서 일하는 경우가 드뭅니다. 대부분의 경우 팀을 이루어 프로젝트를 수행하게 됩니다. 따라서, 팀원과의 원활한 소통과 협력이 필수적입니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">jin</span>
                            <span class="date">2023.04.03</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 17.jpg, ../html/assets/img/Frame 17.jpg 2x, ../html/assets/img/Frame 17.jpg 3x" />
                        <img src="../html/assets/img/Frame 17.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>코드 가독성 및 유지보수성 고려</h3>
                            <p>개발자가 작성한 코드는 다른 개발자들이 이해하고 유지보수할 수 있어야 합니다. 따라서, 코드 가독성과 유지보수성을 고려하여 코드를 작성해야 합니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">jin</span>
                            <span class="date">2023.04.03</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 15.jpg, ../html/assets/img/Frame 15.jpg 2x, ../html/assets/img/Frame 15.jpg 3x" />
                        <img src="../html/assets/img/Frame 15.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>문제 해결 능력</h3>
                            <p>프로젝트를 진행하다 보면 다양한 문제가 발생할 수 있습니다. 개발자는 이러한 문제를 빠르게 파악하고, 효과적인 문제 해결 방안을 찾아내야 합니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">jin</span>
                            <span class="date">2023.04.03</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 15.jpg, ../html/assets/img/Frame 15.jpg 2x, ../html/assets/img/Frame 15.jpg 3x" />
                        <img src="../html/assets/img/Frame 15.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>문제 해결 능력</h3>
                            <p>프로젝트를 진행하다 보면 다양한 문제가 발생할 수 있습니다. 개발자는 이러한 문제를 빠르게 파악하고, 효과적인 문제 해결 방안을 찾아내야 합니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">jin</span>
                            <span class="date">2023.04.03</span>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 15.jpg, ../html/assets/img/Frame 15.jpg 2x, ../html/assets/img/Frame 15.jpg 3x" />
                        <img src="../html/assets/img/Frame 15.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>문제 해결 능력</h3>
                            <p>프로젝트를 진행하다 보면 다양한 문제가 발생할 수 있습니다. 개발자는 이러한 문제를 빠르게 파악하고, 효과적인 문제 해결 방안을 찾아내야 합니다.</p>
                        </div>
                        <div class="card__info">
                            <span class="author">jin</span>
                            <span class="date">2023.04.03</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="blog__wrap">
                <h2>Javascript Topic</h2>
                <div class="cards__inner col6">
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 12.jpg, ../html/assets/img/Frame 12.jpg 2x, ../html/assets/img/Frame 12.jpg 3x" />
                        <img src="../html/assets/img/Frame 12.jpg" alt="소개이미지">
                        </figure>
                        <div class="card__title"> 
                            <h3>지속적인 학습과 개발</h3>
                            <p>IT 산업은 빠르게 변화하고 발전하고 있습니다. 새로운 기술과 도구들이 출시되는 속도는 더더욱 빨라지고 있기 때문에, 개발자로서 적극적인 학습과 개발이 필수적입니다. </p>
                        </div>
                        <div class="card__info">
                            <a href="#" class="more">더보기</a>
                        </div>
                    </div>
                    <div class="card">
                        <figure class="card__img">
                            <source
                            srcset=".../html/assets/img/Frame 19.jpg, ../html/assets/img/Frame 19.jpg 2x, ../html/assets/img/Frame 19.jpg 3x" />
                        <img src="../html/assets/img/Frame 19.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=".../html/assets/img/Frame 17.jpg, ../html/assets/img/Frame 17.jpg 2x, ../html/assets/img/Frame 17.jpg 3x" />
                        <img src="../html/assets/img/Frame 17.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=".../html/assets/img/Frame 15.jpg, ../html/assets/img/Frame 15.jpg 2x, ../html/assets/img/Frame 15.jpg 3x" />
                        <img src="../html/assets/img/Frame 15.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=".../html/assets/img/Frame 15.jpg, ../html/assets/img/Frame 15.jpg 2x, ../html/assets/img/Frame 15.jpg 3x" />
                        <img src="../html/assets/img/Frame 15.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=".../html/assets/img/Frame 15.jpg, ../html/assets/img/Frame 15.jpg 2x, ../html/assets/img/Frame 15.jpg 3x" />
                        <img src="../html/assets/img/Frame 15.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>
        </div>

HTML코드는 이렇습니다.

 

blog__wrap안에 card__inner 안에 card안에 card__img, card__title, card__info이렇게 구조를 잡아주고

한줄에 이미지가 몇개 나오게 할건지 글씨는 몇줄로 할건지를 CSS로 잡아주고 

 

전체 틀인 card__inner에 css명만 넣어주면 구조를 편리하게 마음데로 바꿀 수 있습니다.

 

나중에 다른곳에서 작업할때도 css명만 넣어주면 되니 엄청 편리하겠죠?

 

CSS

.cards__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cards__inner>.card {
    width: 24%;
}

.cards__inner.col2>.card {
    width: 49%;
}

.cards__inner.col3>.card {
    width: 32.3333%;
}

.cards__inner.col4>.card {
    width: 24%;
}

.cards__inner.col6>.card {
    width: 15.6666%;
}

이미지 레이아웃 부분입니다.

 

col명에 숫자만 붙여서 이미지가 몇개 나오게 할건지 정해주고

width값을 이미지 숫자에 맞게 지정해줬습니다.

 

 

글자 줄 제한 지정

.cards__inner.line3 .card__title p {
    -webkit-line-clamp: 3;
}

.cards__inner.line2 .card__title p {
    -webkit-line-clamp: 2;
}

블로그의 게시글 글의 줄 수는 다 다양하니까 맞춰주지 않는다면 레이아웃이 엉망이되겠죠?

 

그럴때 쓰는 CSS입니다.

 

-webkit-line-clamp: 3을 해주면 한번에 최대 3줄까지만 출력되어

전체 레이아웃을 맞출수가 있습니다.

이런식으로 위와 마찬가지로 line이라는 이름으로 지정해주고

 

HTML에서 3줄로 나오게 하고싶다면 line3을 2줄로 나오게하고싶다면 line2만 붙여주면 됩니다.