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



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

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

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

 

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


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

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

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

 

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


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

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 명령어가 들어가자 원래의 폰트크기로 작아진 본문

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태그로 통일을 했는데 그 부분도 문제가 되는 분이 많을 것 같습니다.

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


   
포스팅에 호감이 가신다면 구독하실 수도 있습니다!
        메일로 구독하기 메일구독방법안내 한RSS로 구독하기 피드버너로 구독하기 iGoogle or 구글리더로 구독하기 myYahoo에 추가하기 트위터 네이버 이웃추가
Posted by 아딸라

댓글을 달아 주세요

  1. 릿찡 2012.03.13 08:47  댓글주소  수정/삭제  댓글쓰기

    지금까지 이런것도 모르고 눈대중으로 살았지 말입니다. ㅎㅎ

  2. 더공 2012.03.13 09:11 신고  댓글주소  수정/삭제  댓글쓰기

    상당히 유용한 정보입니다.
    많은 분들이 자기 블로그가 어떤 설정으로 되어 있는지 잘 모르시더라고요. ^^

  3. 2012.03.13 09:23  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 아딸라 2012.03.13 09:29 신고  댓글주소  수정/삭제

      오옹 - 좀 자세히 가르쳐 주세요 - 지금 완전 솔깃 중~
      css를 어떻게 적용시키는 건지 어디 설명되어 있는 데가 있으면 링크라도 - ^ ^;;

  4. 주테카 2012.03.13 11:07 신고  댓글주소  수정/삭제  댓글쓰기

    HTML에 대해서 문외안이라 항상 </br> 코드를 스타일/CSS에 넣기도 짜증나고
    너비가 너무 넓은 것도 짜증났는데 이렇게 간단한 해결법이 있었다니.......;;;

    감사합니다. :-)

    • 아딸라 2012.03.13 14:47 신고  댓글주소  수정/삭제

      shift + Enter 를 말하시나 봐요 -
      전 알면서도 잘 까먹어요. 아무 생각없이 엔터두드리다가 행간이 너무 넓어서 황망해합니다. ㅎ

  5. Shain 2012.03.13 12:05 신고  댓글주소  수정/삭제  댓글쓰기

    이게 은근 골치가 아프죠..
    몇년전부터 CSS 중심의... 편집이 유행했는데
    이런 저런 이유로 이 P태그랑 br 태그 때문에 신경이 좀 쓰이곤 했었어요
    엔터로 들어가는 여백이.. 정말 중요하니까요..
    설정할 수 있게 되서 참 다행입니다..
    베타테스터할 때 의견이 반영되었더라구요

    • 아딸라 2012.03.13 14:49 신고  댓글주소  수정/삭제

      아항. 베타테스트하면서 나아진 부분이군요 -
      이전의 티스토리 역사는 쉐인님은 잘 아시겠네요 ^ ^
      p 엔터가 보통의 에디터와는 달라서 좀 당황스러웠어요 -

  6. 알 수 없는 사용자 2012.03.13 17:56  댓글주소  수정/삭제  댓글쓰기

    저는 편집모드와 실재 보여지는 화면이 조금씩 달라서
    그냥 눈대중으로 대충 쓰고 있습니다.

    스킨이나 글편집 내용을 보면 한숨만 나오지만,
    건드리기 진짜 귀찮다는...^^

    • 아딸라 2012.03.13 19:31 신고  댓글주소  수정/삭제

      제가 스킨 만지면서 드는 생각이요 -
      시험 준비 기간만 되면 책상 정리 시작하는 여학생같다는 거요.ㅎㅎ
      공부하려고 하면 꼭 주변에 지저분한 것들만 눈에 들어온다는요 -
      스킨 꾸밀 시간에 그냥 좋은 글이나 하나 쓰지, 누가 저보면 옆에서 이런 얘기할 것 같아요.

  7. 백전백승 2012.05.13 22:52 신고  댓글주소  수정/삭제  댓글쓰기

    저는 <br />인 경우 중앙정렬을 하면 폰트가 작아진다는 것도 모르고 아주 많은 것을 몰랐네요. 늘상 <br />를 사용해서 <p>에 대해서나 다른 사항에 대해서 깊이 생각한 적이 없었는데 아주 좋은 글을 올리셨군요.

    • 아딸라 2012.05.13 23:29 신고  댓글주소  수정/삭제

      예 ^ ^
      관리자 꾸미기- CSS 설정에서 뭘 고치면 중앙 정렬해도 폰트가 안 작아지게 할 수도 있다고 하던데 -
      제가 거기까지는 잘 모르겠더라고요 -
      중앙 정렬하거나 글상자 안에 적을 때 폰트 조정을 에디터 상에서 10pt로 하면 약간 적고 11 pt 하면 조금 더 크고 어중간해요 - ^ ^;;

  8. Jianist 2016.01.28 02:10 신고  댓글주소  수정/삭제  댓글쓰기

    ㅜㅜ와 자꾸 글 모양이 바껴서 궁금했는데 역시나 .. HTML은 너무 어렵네요