웹/CSS

[CSS] 요소 겹치기 absolute relative

ohojee 2023. 8. 24. 19:38

전체 코드

const TodaySentencePage = () =>{
    return (
        <>
            <NavBar/>
            <Background className="container-fluid">
                <div className="container-fluid">
                <SentencesContainer className="row">
                    <EachSentence className="col-md-6">
                        <QuoteBox />
                        <QuoteText>고독을 배설한 자리에서 내려앉는 환희. 이 달콤함을 위해 그는 예술을 표방한다.</QuoteText>
                        <BookIcon size="250" color="#97A4E8"/>
                    </EachSentence>
                    <EachSentence className="col-md-6">
                        <QuoteBox></QuoteBox>
                        <BookIcon size="250" color="#97A4E8"/>
                    </EachSentence>
                    <EachSentence className="col-md-6">
                        <QuoteBox></QuoteBox>
                        <BookIcon size="250" color="#97A4E8"/>
                    </EachSentence>
                    <EachSentence className="col-md-6">
                        <QuoteBox></QuoteBox>
                        <BookIcon size="250" color="#97A4E8"/>
                    </EachSentence>
                </SentencesContainer>
                </div>
            </Background>
            <FooterBar/>
        </>
    )
}


const SentencesContainer = styled.div`
    justify-content: center;
    margin-left: 20px;
`;

const QuoteBox = styled.div`
    height: 162px;
    width: 489px;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient( to bottom, white, rgba(217, 217, 217, 0.5) );
    border: 2px solid white;
    clip-path: polygon(0% 0%, 100% 0, 83% 50%, 100% 100%, 0% 100%);
`;

const Background = styled.div`
    background-size: cover;
    background-color: #373747;
    padding-top: 10%;
    padding-left: 0;
    padding-right: 0;
`;

const EachSentence = styled.div`
    position: relative;
    width: 500px;
    margin: 30px 0;
    margin-right: 30px;
    margin-left: 70px;
    padding: 0;
`;

const QuoteText = styled.p`
    position: absolute;
    left: 100px;
    width: 310px;
    color: black;
    font-size: 20px;
    font-family: "KOTRA_GOTHIC";
`;

const BookIcon = styled(PiBookFill)`
    position: absolute;
    bottom: 5px;
    right: 350px;
`;


export default TodaySentencePage;

코드의 구성은 이렇다

나는 이렇게 책 아이콘을 박스 위에 띄우고 싶어서 요소를 겹칠 수 있는 방법을 검색했다.

부모요소에 position:absolute; 속성을 주고 자식요소에 position:relative; 속성을 주면 된다고 했다.

 

처음에는 <QuoteBox><BookIcon><QuoteBox> 이렇게 작성했었고 QuoteBox에 position:absolute; 속성을 주니 

이렇게 아이콘이 잘리는 현상이 발생했다.

<QuoteBox/>

<BookIcon/>

이렇게 병렬적으로 놓았다.

그랬더니 

이렇게 움직이는 범위가 달랐다. 내가 하고싶은건 저 박스 위에 아이콘이 고정되어 같이 움직여야 하는건데.

그래서 혹시나 아이콘과 같은 가동범위를 가질까 싶어서 EachSentence의 width를 %로 바꿔보았다. 

그래도 가동범위가 다를 뿐더러 1열은 움직이지 않고 2열만 움직였다.

다시 position 속성을 다시 찾아보았다.

absolute는 부모요소의 속성이 relative인 것을 기준으로 위치를 잡고, 부모 중에 relative인 것이 없다면 전체 화면을 기준으로 잡아 움직일 수 있게 한다.

relative는 원래의 배치대로 칸은 차지하지만 요소를 움직일 수 있게 한다.

fixed는 스크롤을 내려도 화면에 계속 떠있게 할 수 있다.

sticky는 요소를 움직인 곳에서 원래의 위치까지 스크롤을 내리면 움직이게 한다.

그래서 BookIcon에 relative 속성을 지정해봤다.

원하는 대로 배치가 되고, 하얀색 박스와 함께 붙어 움직였다.

거의 다 왔다!

이제 원래 아이콘이 원래 배치되는 자리만큼 빈 공간을 해결하면 된다.

자리를 차지하지 않으려면 BookIcon이 absolute여야 되는데 그러면 그 직전 상위 요소인 EachSentence에 relative를 주면 되지 않을까 싶어서 시도해봤다.

그랬더니 원하는대로 움직였다!

 

 

 

참고 자료

https://developer.mozilla.org/ko/docs/Web/CSS/position

저작자표시