문제 상황

위 사진처럼 만들어야 하는데 줄바꿈을 어떻게 해야할지 모르겠다.

문제 해결 방안

first attempt:
<p class="col-md-8 fs-4">
본인의 맛집을 소개하는 사이트입니다. 맛집을 소개해주세요!
</p>

second attempt:
<p class="col-md-8 fs-4">
본인의 맛집을 소개하는 사이트입니다.
맛집을 소개해주세요!
</p>

태그 안에서 enter키를 입력해도 적용이 안 된다.

방안

• 태그 안에서 하나의 뭉텅이로 인식하니까, 바꿈 줄마다 태그를 나누면 될 거 같다.
• 줄바꿈에 사용하는 태그가 있는지 검색.

문제 해결

<p></p>

<p>본인의 맛집을 소개하는 사이트입니다.<p>맛집을 소개해주세요!</p></p>

결과를 보면 둘의 글씨 크기도 다르고 문장과 문장 사이에 공백이 생겼다.
내가 원하던 결과는 아니다.
다른 방법으로 가보자!

<br>

<p>본인의 맛집을 소개하는 사이트입니다.<br>맛집을 소개해주세요!</br></p>

<p>본인의 맛집을 소개하는 사이트입니다.<br>맛집을 소개해주세요!</p>

p태그로 문장을 나눈것과 다르게 글씨의 크기도 같고, 문장 사이에 공백도 없다.

• br태그는 'line break'를 의미하며, 닫는 태그가 없는 태그로 enter키로 이해하면 된다. br태그를 만나면 다음줄로 이동한다.
• <br></br>태그는 문장 사이에 공백없이 자연스럽게 줄바꿈할 때 사용할 수 있다.

나는 구분하기 위해 '</br>'로 닫았다.

<pre></pre>

case1:
    <pre>
안녕하세요!
줄바꿨습니다!!
    </pre>

case2:
    <pre>
    안녕하세요!
    줄바꿨습니다!!
    </pre>

<pre></pre>는 위의 것들하고 조금 다르다.
pre태그 내부의 글을 있는 그대로 출력한다.

• 아니, 진짜 비유적인 표현이 아니라 진짜 있는 그대로 출력한다.

case1과 case2의 결과를 보면 확실하게 이해될 것이다.

• case1은 코드를 보면 글자가 적히는 시작부분에 빈칸없이 작성됐다.
• case2의 코드는 글자를 보면 앞에 4칸이 띄어서 적혀있다.

pre 태그는 있는 그대로 날것의 느낌이다.

참고

html 줄바꿈 참고 사이트1
html 줄바꿈 참고 사이트2