pre태그

회사에서 마크업을 치는데

data = {
content: {
      d: `아리아리랑
쓰리쓰리랑
아라리가났네.`,
    }
}

<BenefitWrapper>
          {courseBenefitContents.map(({ title, image, content }: CourseBenefitDataType) => (
            
              <p className="content">{content.d}</p>
            
          ))}
</BenefitWrapper>

위와 같이 작성을 하면 백틱 문자열속의 줄바꿈이 적용이 안되고 계속 아래와 같이 렌더링되었다.

나는 globalStyle에서 p태그에 적용된 속성때문에 줄바꿈이 적용되지 않는줄 알았다.

그런데 그것이 아니었다.

 

이런 상황을 위한 pre태그란 놈이 있었다.

 

<pre> 요소 내의 텍스트는 시스템에서 미리 지정된 고정폭 글꼴(fixed-width font)을 사용하여 표현되며, 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타납니다.
이러한 <pre> 요소를 사용하면, 독특한 서식의 텍스트나 컴퓨터 코드 등을 HTML 문서에 그대로 표현할 수 있습니다.

//as-is
<p className="content">{content.d}</p>

//to-be
<pre className="content">{content.d}</pre>

p태그를 pre태그로 바꿔주니 줄바꿈이 잘 적용이 되었다.

 

---

더불어 p태그는 paragraph

<p> 태그는 문단(paragraph)을 정의할 때 사용합니다.
 
브라우저는 자동으로 <p> 요소의 위쪽과 아래쪽에 약간의 여백을 추가합니다.
이러한 여백은 CSS의 margin 속성을 사용하여 조정할 수 있습니다.