반응형 정사각형 css 스니펫과 개행문자 css 스니펫 알려드려요

둘 다 상당히 까다로움

          <div className=" w-full  relative bg-neutral-80 after:block after:pb-[100%]">
            <div className=" whitespace-pre-wrap text-center absolute top-[50%] -translate-y-[50%] left-[50%] -translate-x-[50%] text-white">
              {" dsafsafa \n hdsfds"}
            </div>
          </div>

두개 모두 적용된 css입니다.

이렇게 가로세로가 일치하면서 개행문자 \n을 인식하여 개행을 시켜주고있는것을 확인할 수 있죠?

그냥 정사각형을 만드는 것은 쉽지만 반응형 정사각형을 만드는것은 상당히 까다롭습니다.

왜냐하면 현재 htmlelement의 가로길이가 유동적으로 변화하고있는 상황에서 가로길이를 명확히 캐치해내는것이 까다롭기 때문인데요

vw와 같은 단위를 사용하면 가능하긴하지만 vw를 쓰게되면 뷰포트 단위로 생각을 해야만하는 강제성이 생겨

유지보수하기가 매우 까다로워집니다.

 

물론 html element의 offSetWidth 등 현재 크기를 알 수 있는 돔 어트리뷰트에 접근하는 방법도 있습니다.

그러나 이방법의 문제점은

1. 무조건 js를 통해 접근할 수 밖에 없다.

2. offSetWidth 와 같은 어트리뷰트에 접근하는 경우 리플로우가 발생한다.

크게 두가지를 꼽을 수 있습니다.

 

따라서 css 단에서 현재 w에 접근할 우회적인 방법이 필요하게 됩니다.

after: 가상요소 선택자를 이용하면 의외로..쉽게.. 가능한데요..

테일윈드 문법을 css로 치환하면 다음과 같은 형태가 됩니다.

.parent {
  width:'원하는 값을 지정합니다'
  position:'relative'
}

.parent::after {
  position:'block'
  padding-bottom: 100%;
  content:''
}

.child {
  position:'absolute'
  
}

이 방법의 단점은 항상 정사각형을 유지하기 위해 가상요소의 패딩값을 사용하고 있기 때문에

부모 요소의 height이 0이어야만 합니다.

따라서 부모 요소 내부에 실제 컨텐츠는 자식요소를 통해 배치해야하며

이 자식요소를 배치할 때에도 relative / absolute를 통해 배치해주어야만 한다는 제약이 존재합니다.

 

만약 가운데 정렬을 하고 싶은 경우에는

transform 속성과 top / left 속성을 적절히 활용하시면 되겠습니다.

top-[50%] -translate-y-[50%] left-[50%] -translate-x-[50%]

이런 형태로 우선 위치를 top/ left속성을 통해 중앙으로 가져다놓은 뒤 

요소의 크기만큼을 transform 속성으로 빼주면 가운데로 정렬됩니다.

 

정말...css 귀찮네요 하하

.whitespace-pre-wrap {
    white-space: pre-wrap;
}

개행문자를 인식하도록 하는 것은 좀 더 쉽습니다.

이렇게 white-space 속성을 pre-wrap으로 설정해주면 되는데요

그 이후 개행문자 \n을 이용해주면 적절히 \n을 인식하여 개행을 시켜줍니다.

 

다만 리액트를 사용하고 계시다면 개행문자를 사용하는 부분을 {} 중괄호로 감싸주어

자바스크립트 문법으로 인식하게 해주셔야 동작합니다.

            <div className=" whitespace-pre-wrap text-center absolute top-[50%] -translate-y-[50%] left-[50%] -translate-x-[50%] text-white">
              {" dsafsafa \n hdsfds"}
            </div>

그래서 이렇게 작성을 했던것이지요

---

마치며

위 두가지 문제는 사소하지만 가장 많이 겪었던 어려움 중 하나였습니다.

특히 개행문자의 경우 어거지로 구현하느라 개행문자를 기준으로 split한뒤

block 속성을 가진 요소를 만들어 나열하는 등의 행위도 해봤었는데..

인생 절반 손해 본 기분이니까 여러분들은 잘 기억해두시고 인생 절반 이득보시기바랍니다.