티스토리 글설정- 엔터키 br 과 p 의 차이점

티스토리 관리자 모드에 들어가 보면 글설정이 보입니다.

일단 에디터를 위지윅 모드로 할 건지 HTML로 할 건지 정하도록 되어 있군요. 아마도 대부분은 위지윅 모드로 선택하실 겁니다.

그 다음 엔터키 설정 이 보입니다. 엔터를 칠 때 <br>에 해당되는 동작을 할 건지 <p>에 해당되는 동작을 할 건지 선택하라고 되어 있습니다. 그리고 그 옆의 설명에 의하면 <br>은 줄바꿈이고 <p>는 문단바꿈이라고 되어 있네요. 그리고 친절하게도 P 문단바꿈  설정 시 Shift + Enter 를 하면 br 에 해당되는 줄바꿈도 할 수 있다고 되어 있습니다.

이리저리 줄바꿈과 문단 바꿈에 관해 검색을 해 봤는데 정확하게 어떤 차이가 있는지 나오지를 않아요. 근 한 달 이상을 글을 써 올리면서 두 가지를 병행하다 보니까 정확한 차이점을 이제서야 알겠습니다. 그리고 HTML 모드에서 엔터키 입력시 줄바꿈 태그 <br>을 자동 추가하는 기능을 어떨 때 써 먹으면 좋을 지도 확실히 알았습니다. 결과 보고드리겠습니다.

 

br로 두번 줄을 바꾼 간격은 p로 바꾼 간격보다 넓다

▶ p 로 문단 바꿈을 했을 때의 간격

p로 문단 바꿈을 했을 때의 간격보기

 

중간 소제목인 "드라마에 관한 그들의 인식도 별반 다를 바가 없고" 위의 여백은 p 엔터로 설정한 뒤 두 번 엔터를 쳤을 때의 간격입니다. 그리고 한 단락마다 문단 바꿈을 해서 띄웠습니다.

▶ br 로 문단 바꿈을 했을 때의 간격은 아래를 보세요.

br로 줄 바꿈을 했을 때의 줄간격보기

 여기서 한 가지 - 다음 블로그등의 에디터에서는 엔터를 치면 p 명령어로 됩니다. 하지만, 이것은 문단을 바꾸는 것이 아니고 단순히 행을 바꾸는 역할을 하고 있습니다. br 과 같은 역할이죠. 하지만,  티스토리에서 p를 엔터로 둘 경우  행간에 문단  바뀜을 나타내는 여백 줄 간격이 들어 가게 됩니다. 줄바꿈의 역할이 아니고 실제로 문단바꿈의 역할을 하고 있습니다.

위의 두 캡쳐는 티스토리에서  p 엔터 설정을 둔 뒤 엔터 한번을 쳐서 문단을 바꾼 것과 br 엔터 설정을 두고 엔터 두 번을 쳐서 문단 사이 간격을 두었을 때 비교입니다.

가까이서 본 거라서 확연히 표시가 안 날 수도 있는데 br 로 설정했을 때의 문단 간격이 더 넓습니다. 더 헐렁하게 보인다는 거죠. 문단 간격이 넓으니 글간 간격조차 더 넓어 보입니다. 실제 두 개의 행간 간격은 같습니다.  참고로 제 블로그의 행간 간격은 170% 입니다. 

 사진 위주의 포스팅을 하고 글을 헐랭하게 쓸 때 여유로운 느낌으로 글 편집을 하고 싶을 때는 br 로 설정하는 게 더 낫지 않나 싶습니다. 포스팅이 장문이고 글 위주로 할 때는 p로 하니 조금 더 짜임새가 있어 보이는 장점이 있군요. 그리고 다음 소제목 문단과의 간격을 엔터키 2번으로 정해두니 전체 문단 짜임새가 더 나아 보입니다. 물론 베테랑 편집자들에게는 br로도 충분히 좋은 결과를 얻을 수 있겠지만 저처럼 "두번 엔터 쳤던가? 세번 쳤던가?" 문단 분리가 너무 많아지면서 마구 헷갈려하는 저같은 사람에게는 - ;;

그런데, 이게 다가 아니에요. 두 개 사이에는 또 엄청난 차이점이 하나 더 있습니다.

 

다음 블로그의 에디터에서 엔터키는 뭘로 설정되어 있나 한번 볼까요?

왼쪽의 글을 html 소스 보기로 해 보니까 오른쪽처럼 보입니다. 줄이 바뀔 때마다  /p 로 맺고  p 로 시작하는 것을 볼 수 있습니다. 문단이 바뀌는 건 아니고 그냥 줄만 새 줄로 바뀝니다.

위는 세 줄을 드래그 한 뒤 중앙 정렬 시키고 html 소스를 봤을 때입니다. 정렬이 어떻게 되어 있나요? 당연히 p 로 줄바뀜 되어 있으니까 [p style="TEXT-ALIGN: center" ]로 되어 있습니다.

 

아래는 티스토리에서 br 로 엔터키를 설정 했을 때의 html 소스보기입니다.

p와  /p 로 끝나던 p 엔터설정 때와는 달리 줄의 끝 부분에서 /br 로만 끝나는 군요. 이걸 중앙 정렬해볼까요?

 

p align="center" 가 아니라 div 명령어가 나와 있습니다. [div style="TEXT-ALIGN: center"] 입니다. 이게 왜 문제가 되냐하면요, 많은 티스토리 블로그의 경우 전체 본문의 폰트 크기 설정을 div 로 해 두었습니다. div 명령어로 폰트 크기를 맞추어 두었는데 다시 중간에 다른 div 명령어가 들어가면서 원래의 폰트크기 설정이 사라져버린다는 거죠. 아래는 크기 변경없이 원래 폰트 크기 그대로 캡쳐한 것입니다.

 

div 명령어가 들어가자 원래의 폰트크기로 작아진 본문 - 마법이 풀려 빅이 스몰로 -

조오기 위의 본문 캡쳐랑 비교해 보면 확 쪼그라들어 있죠? 고양이가 가져왔던 마법 구슬이 사라지자 마자 원래의 초가삼간집으로 변해버린 어부의 집같습니다. 마법이 풀렸쓰요 - ;;

 

아래는 p 를 엔터키로 설정했을 때입니다.

 

이것의 소스를 보면 당연히 아래 같이 나옵니다. 줄 바꿈하면 br/ 도 나오겠죠. Shift + Enter 하면 줄바꿈도 된다고 했으니 시키는 대로 해서 줄바꿈 해 넣은 것이 아래입니다.

 

자, 이걸 중앙 정렬 해 보겠습니다.

 

그리고 이것의 소스도 보겠습니다.

p style 로 나오는군요. 그럼 당연히 글자 크기 는? 네, 안 작아집니다. 마법이 유지되고 있어요.

 

그대로죠?

 

장단점 정리하면서 마무리하겠습니다.

 

P로 엔터 설정하면 -

장점 : 글이 빼곡할 때 좀 더 정돈되어 보인다. 챕터등을 나눌 때도 일목요연해 보인다. 왼쪽 정렬과 중앙 정렬을 섞어 가며 쓸 때도 폰트크기가 일정하게 유지된다.

단점 : 줄바꿈할 때 꼭 쉬프트를 같이 눌러 줘야 되는데 쪼꼼~ 귀찮다. p 문단 바꿈하면 조금 갑갑해 보이는 점이 있다. 그렇다고 p 두번 치면 너무 간격이 넓다. 이를 극복하려면 p 한번에 br 한번을 같이 해 주면 좋은데 그게 생각보다 좀 귀찮은 일이다. 그냥 엔터 에 쉬프트 + 엔터 를 연이어 해 줘야 되니까.

그리고 관리자페이지 설명에 있는 html 모드에서 엔터가 br 로 쓸 수 있다는 건 P 로 엔터설정했을 때는 해당이 안 되는 얘기이다.

br 로 엔터 설정하면 -

장점 : 늘상 쓰던 거라서 아무 생각없이 쓰면 된다.

중앙 정렬 때 폰트크기가 작아지긴 하지만 그것도 장점으로 승화시킬 수도 있다. 예를 들어 사진 위주의 포스팅을 할 때는 중앙 정렬시키고 폰트 크기가 작아지면 사진에 더 집중하게 할 수 있다. 사진 아래 폰트가 크면 살짝 산만해 보이는 경향도 있으니까 - 하지만, 블로그 가로폭이 아주 크고 사진 크기도 엄청 넓은 경우에도 또 얘기가 달라지므로 이건 다 취향에 따라 변동가능한 얘기다.

html 모드에서 엔터가 br 줄바꿈되는 것을 유용하게 쓸 수 있는데 예를 들면 다음 블로그에서  글을 옮겨 오거나 할 때 - 무단 펌 아님 ; 예전 본인의 다음 자료를 티스토리로 옮겨 올 때의 이야기임. 베캄 여행기들 다 옮겨 온다고 힘들어 죽는 줄 알았음 ;;  - 그 쪽 폰트 설정등이 같이 복사되어 와서 편집하기가 힘들다. 하지만 html 모드로 두고 복사한 걸 붙인 뒤에 줄이 바뀌는 부분마다 엔터를 쳐 주고 편집모드로 돌아오면 깔끔하게 옮겨진다. 무슨 얘기인지는 해 본 사람만이 안다. ;;

단점 : 편집 때 신경 써야 한다. 하지만, 챕터 바뀔 때 엔터 3번이면 3번, 혹은 4번이면 4번이라든가 스스로 정한 규칙을 잊지 말고 잘 지켜주기만 하면 정돈된 편집의 어려움따위 극복할 수 있다.

중앙 정렬하려면 처음부터 끝까지 그 포스팅 안에서는 주욱 같이 가야 된다. 만약 폰트 크기가 바뀐 것을 바꾸고 싶으면 - 일일이 html 소스에서 div 를 p 로 수정해 주어야 한다.

 

---

전 뭘로 했냐구요? 지금 이 글은 P 엔터 설정해서 쓴 글입니다. 그리고 앞으로도 주욱 이걸 쓸 지 br 로 바꿀지 실은 고민중입니다. ☞☜

 실제 블로그 꾸미기에 들어가서 html 소스를 볼 때, - 예를 들어 오른쪽의 사이드바들 간격을 띄우거나, 아니면 하단의 카테고리 다른 글보기 상자와 추천글, 인기글 사이를 띄우기 위해 소스 수정하러 들어갔을 때 - p보다 br 을 쓰면  간격이 아주 약간 더 넓게 됩니다. 

즉 사이드 바 두 개가 찰싹 달라붙어서 떼 놓으려고 할 때 위의 것의 소스 뒤에 </p>를 붙이거나 아래 소스 앞에 </p> 를 붙이게 되는데 조금 더 간격을 미세하게 더 띄우고 싶을 때는 </br> 을 쓰시면 됩니다. 

이 글상자 안의 폰트 크기가 작은 것은 이 글상자가 div 로 된 것이기 때문입니다. ^ ^

 

4월 2일 덧붙입니다. P 태그로 줄바꿈을 할 경우, 모바일로 보면 줄바꿈 표시가 되어 있지 않고 다닥 다닥 붙어 있습니다. 이전에 몰랐던 문제점이네요. 티스토리가 현재 새 에디터로 바꾸면서 P태그로 통일을 했는데 그 부분도 문제가 되는 분이 많을 것 같습니다.

읽어 주셔서 고맙습니다. 아래의 손가락 모양 추천 버튼은 로그인하지 않아도 클릭 가능합니다.
다음 로그인 중이시라면 지금  구독 +  하시고 새 글이 올라 올 때 편하게 보실 수 있습니다.