2023.03.15 줄바꾸기

날마다 모르는 것을 발견하고 알아 가는 나를 발견한다

글을 쓸 때 필연적으로 사용하게 되는 줄바꿈이 나를 당황스럽게 할 줄은 몰랐다 

코드 상에서 줄을 바꾸는 방법 

그 방법을 논하라 하면 실로 다양한 것을 검색해 보니 알게되었다

제일 먼저 시도한것은 <p></p>의 나열

무식하기 그지 없지만 직관적이고 코딩에 대해서는 아직까지도

무지하다 할 수있는 나에게 있어서 나름 괜찮은 방법인듯 하였다

 

오늘도 누군가의 도움이 필요했다

https://hianna.tistory.com/300

[HTML] 줄바꿈(엔터) 하기

해당 블로그를 통해 어째서 줄간의 간극이 넓은지 알게 되었다

 <p></p>

'<p>와  </p> 태그로 내용을 감싸면, 내용의 위와 아래쪽에 일정 크기의 공백이 생긴다.'

그렇다 내가 생각하던 역할로 사용되는 태그가 아니었던 것이다

'이 공백의 크기는 css의 margin 속성을 이용하여 조정할 수도 있다'

.c_c{

    font-size: 18px;

    line-height: 80%;

}

공백을 줄여보고자 했던  노력의 흔적이 남아있다

 

블로그에는 내가 사용한 코드 말고 2가지가 더있는데

하나는 <br> break 의 약자로 닫는 태그없이 사용 할 때마다 줄바꿈을 해준다

다른 하나는 <pre></pre>

preformatted의 약자로

<pre></pre> 태그 내에 있는 엔터와 스페이스가 그대로 웹 브라우저에 적용되어 보여지게 된다

셋 중 어느걸 사용해도 결과는 같게 나오겠지만

태그에 <style> 을 입히거나 할때에는 넓은 영역을 포함 할 수있는 pre 태그가 범용성면에서 좋아보인다

일단 텍스트를 채워보고자 

        <p class="c_c">---</p>

        <p class="c_c">---습니다</p>

        <p class="c_c">---니다</p>

        <p class="c_c"> --니다</p>

        <p class="c_c1"> ---.com</P>

        <p class="c_c2"> ---/</P>

<p> 태그로 채워버린 모습을 보자니 여간 번거러워 보이지 않을 수가없다

문장이 짧은 편이라 그나마 봐줄 만한것이지

양이 많을 때 저 <p>들을 작성하라고 한다면 백기를 치켜들 것이다

<pre class="c_c">

사과

포도

딸기

딸기                 딸기

 

배

</pre>

결과물을 보니 만족스럽다

묶은 체증이 씻겨나가는 느낌이다

오전의 당혹감이 충실한 깨닳음이 되었다

내일의 나는 어떤 당황을 하고 배우게 될까