9월 13, 2020

[HTML] HTML에서의 줄바꿈에 유용하게 사용할 수 있는 "< pre >" "< /pre >" 태그

구글 블로거 서비스를 이용하면서 페이지를 조금씩 수정할 일이 생깁니다.

주로 블로거 테마에서 html 편집을 통해 html을 조금씩 수정을 합니다.

 

Html을 전문적으로 배우지도 않았고 잘 알지도 못하지만 다른 사이트도 참고하고 수정한 후에 적용되는 부분을 보면 그럭저럭 간단한 부분은 수정을 할 수 있습니다.


 

최근에는 새롭게 <pre> </pre>라는 줄바꿈 태그를 알게 되었는데, 앞으로 유용하게 사용할 수 있을 것 같습니다.

 

원래 제가 줄바꿈에 주로 사용하던 태그는 <br><p> </p> 태그입니다.

 

<br> 태그는 'break'의 약자로 Line break라고 해서 단순히 줄을 바꾸기 위해 사용합니다.

두 줄을 띄우고 싶으면 <br> 태그를 두 번 입력하는 식입니다.

 

그런데, 문제는 구글 블로거의 html 편집에서는 <br>태그를 적용하면 에러가 나고 저장이 되지 않습니다.

 

그래서 대안으로 <p></p> 태그도 이용을 해 봤습니다.

p 태그는 'paragraph'의 약자입니다. 문단의 시작 부분에 <p>, 문단이 끝나는 부분에 </p>를 입력하여 사용합니다.

 

그런데, <p> 태그는 문단의 위 아래에 일정한 공백이 생기는 형식으로 줄바꿈을 여러 번 하는 경우 등에는 적합하지 않고 번거롭기도 합니다.

 

그래서 찾아낸 것이 <pre></pre> 태그입니다.

 

pre 'preformatted' 약자입니다.

<pre></pre>를 적용하면 그 사이에 있는 EnterSpace가 그대로 웹 브라우저에 적용됩니다.

, <pre></pre>를 적용하면 그 태그 사이에 있는 부분은 워드처럼 사용할 수 있습니다.

 

Html 편집에서 줄바꿈이 필요할 때 편리하게 <pre></pre> 태그를 이용해 보시기 바랍니다.


9월 09, 2020

[Google Blogger Template] 블로거 템플릿 추천 / Alexis Blogger Template

블로거 템플릿을 찾아보다가 마음에 드는 템플릿을 발견했습니다.

 

Alexis Blogger Template입니다.

gooyaabitemplates에서 다운받을 수 있습니다.

 

다운로드 링크가 있는 주소는 여기를 클릭하시면 됩니다.

Alexis Blogger Template 다운로드 



전반적인 디자인이 마음에 들고 기능도 모두 갖추고 있습니다.

그런데, 물 빠진 듯한 색상과 흐린 글씨체가 마음에 들지 않아서 몇 군데 html을 수정 했습니다.

 

상단 메뉴의 색상을 변경했고, 게시글 제목의 색상과 게시글의 색상을 수정했습니다.

포스트를 share 하는 부분에서 이미 서비스가 종료된 Google+를 삭제했고, 트위터로 글을 배포하는 부분이 문제가 있어 이 부분도 수정했습니다.

 

전반적인 디자인도 만족스럽지만 대부분의 기능을 블로거의 레이아웃에서 조정할 수 있는 부분도 마음에 듭니다.

 

최종 완성본은 아래 사이트를 방문하시면 확인할 수 있습니다.

 

Alexis Blogger Template이 적용된 Google blogger

MAKEMY WRITINGS GREAT WORKS.


Most Popular