개발/react

react 부트스트랩 carousel 활용/ slide 텍스트 위치 변경

모그 2022. 9. 23. 00:08

요즘 부트스트랩으로 반응형웹을 만들면서..

미디어쿼리로 노가다 할 때와는 다른 편리함을 느끼고 있는중^^

근데 문제는 부트스트랩 레이아웃은 이것저것 건들여서 활용해보지 않으면

표현 가능한 디자인이 너무 한정적이라는 것이다..

 

이번에 슬라이더를 만드는데 왠지..

애니메이션 효과를 주고싶은 욕망이 끝없이 들어서

부트스트랩을 뒤적거렸다.

 

http://https://react-bootstrap.netlify.app/components/carousel/#rb-docs-content

 

나는 이 부트스트랩을 이용하기로했다.

 

 

내가 원하는 레이아웃은

 

1.텍스트가 세로 중앙정렬 되어있고, 슬라이드 왼쪽 부분에 붙어있을 것

2. 반응형이기때문에 화면 넓이가 좁아지면 그에 따라 텍스트의 위치도 일정하게 변화할 것

 

근데 보다시피 기본 템플릿은 텍스트가 가로 중앙정렬, 아래쪽에 붙어있는 형태..

나는 텍스트 위치만 옮기고 싶은 강한 욕망에 휩싸였다..

 

부트스트랩에서 제공하는 기본 코드

import Carousel from 'react-bootstrap/Carousel';

function UncontrolledExample() {
  return (
    <Carousel>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=First slide&bg=373940"
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Second slide&bg=282c34"
          alt="Second slide"
        />

        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Third slide&bg=20232a"
          alt="Third slide"
        />

        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

export default UncontrolledExample;

 

기본 제공 코드를 이리저리 만져 본 결과..

 

이 Carousel.Caption이 겁나 말 안듣는다. 

css가 잘 먹히지 않는다.

형님 이 녀석 딜리트 맛 좀 보여줄까요?

없애버리면 어떨까 싶어서 한 번 없애봄.

안되면 다시 살리면되지 머.ㅋ

 

하나씩 삭제해본 결과

  <Carousel>

    <Carousel.Item>

         슬라이더화면1

    </Carousel.Item>

    <Carousel.Item>

         슬라이더화면2

    </Carousel.Item>

</Carousel>

 

최소 이렇게는 써 줘야 우리가 원하는 회전하는 슬라이더를 만들 수 있더라.

한 마디로 Carousel.Caption 없이도 돌아갔다.

수정한 코드

<Carousel>
    <Carousel.Item>
        <div className='slidercontents'>
            <div className='wrapText'>
                <h1>Organic fresh fruits for your health</h1>
                <div className="d-none d-md-block">
                    <p>Interdum et malesuada fames ac ante ipsum primis in 
                    faucibus. Mauris eleifend sagittis mollis. 
                    Nulla finibus arcu eu tortor gravida aliquet</p>
                </div>
                <button>SHOP NOW</button>
            </div>
        </div>
    </Carousel.Item>
    <Carousel.Item>
        <div className='slidercontents2'>
            <div className='wrapText'>
                <h1>Organic fresh fruits for your health</h1>
                <div className="d-none d-md-block">
                    <p>Interdum et malesuada fames ac ante ipsum primis in 
                    faucibus. Mauris eleifend sagittis mollis. 
                    Nulla finibus arcu eu tortor gravida aliquet</p>
                </div>
                <button>SHOP NOW</button>
            </div>
        </div>
    </Carousel.Item>
</Carousel>

css

.slidercontents {
  height: 480px;
  background-image: url(../public/img/slider.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
}

.wrapText {
  margin-left: 12%;
}

 

.slidercontents

아예 전체 화면의 백그라운드 이미지로 사진을 넣었다.

 

 .wrapText

퍼센테이지나 픽셀로 마진을 주면 그 고정된 숫자때문에 어그러지니까

display flex를 이용해 세로 정렬을 center로 맞추었다.

이러니 가로 길이가 줄어들어도 display flex 속성이 자동으로 알맞는 마진값으로 변경해줘서

텍스트가 슬라이더 밖으로 빠져나가지 않았다.

 

 

이 때, 화면 넓이에 상관없이 슬라이드 높이를 일정하게 유지하고싶다면 height값을 직접적으로 줘도 되지만

height 대신 padding을 주는 것도 하나의 방법이다! 

 

 

이렇게 가로 크기가 작아져도 텍스트의 마진은 알아서 조절 됨..!

 

결과물

(왼) pc버전 (오) mobile버전

 

화면 폭이 좁아져도 텍스트가 길을 잃지 않고 일정한 마진을 유지한다. 

 

저작자표시