개발일지 48 - 게시글 꾸미기

 

문득 들었던 생각이다. 다른 사이트에서 유명한 문구가 옆에 작게 공간을 차지하고 슬라이드 쇼처럼 지나가는 것을 본적이 있다. 

 

비슷하게 내 사이트를 꾸며주면 괜찮을 것 같아서 바로 코드를 짜보았다. 

 

일단 어떤 문장이든 상관이 없었기 때문에 옛날 사람들이 한 명언들을 복사 붙여넣기 했다.

 

<div class="quote-slider">
    <div class="quote-slide active">"행복은 선택이다." - 에픽테토스</div>
    <div class="quote-slide">"우리는 우리가 반복적으로 하는 것이다." - 아리스토텔레스</div>
    <div class="quote-slide">"할 수 있다고 믿는 것이 반이다." - 테오도르 루즈벨트</div>
    <div class="quote-slide">"성공은 준비가 기회를 만나는 곳이다." - 세네카</div>
    <div class="quote-slide">"미래는 우리가 만드는 것이다." - 엘리너 루즈벨트</div>
</div>

 

 

이후 css로 어떻게 슬라이드 바꿀지 코드를 구현했다.

 

.quote-slider {
    position: relative;
    overflow: hidden;
    height: 100px; 
    margin: 20px 0;
}

.quote-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease; /* 전환 효과 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px; /* 글자 크기 조정 */
}

.quote-slide.active {
    opacity: 1; /* 현재 활성화된 슬라이드만 보이게 함 */
}

 

 

overflow: hidden;은슬라이드가 컨테이너의 경계를 넘어갈 경우 잘리도록 한다. 이는 슬라이드가 전환될 때 이전 슬라이드가 보이지 않도록 한다.

 

transition: opacity 1s ease;는 opacity 속성이 변경될 때 1초 동안 부드럽게 전환되도록 한다. 애니메이션 효과와 비슷한 것이다.

 

.quote-slide.active는 현재 활성화된 슬라이드의 스타일이다. opacity: 1은 이 클래스가 적용된 슬라이드는 완전히 보이도록 설정한다.