[Tistory]p, br, div, span 태그의 의미와 티스토리 글상자, 글자배경색 적용
by 랭크로2020. 5. 21.
티스토리의 구버전 글쓰기 편집기(구에디터)를 사용하면 비교적 쉽게 글자배경색과 글상자를 적용할 수 있습니다. 텍스트를 입력한 후 원하는 글자배경색이나 글상자를 적용하면 되죠. 생각보다 글자배경색이나 글상자를 입력하는 방법이 쉽고 간편기 때문에, 사용하는데 크게 불편함이 없다면 구에디터의 기능 그대로 사용해도 문제는 없습니다. 그런데, 가끔은 본인이 원하는 스타일로 조금 더 변형을 하고 싶은데 에디터로는 표현하지 못하는 경우가 생길 때도 있습니다. (사실 구버전 에디터로의 기능만으로도 웬만하면 원하는 스타일을 거의 만들어낼 수 있어요.)
그럼 좀 더 원하는 스타일대로 글상자, 글자배경색을 적용하려면 어떻게 하면 좋을까요? 편집기에 있는 html 에디터를 이용하면 됩니다. 간단한 html 편집을 하는거죠. 그래서 이번 시간에는 글상자나 글자배경색을 편집할 때 필요한 몇 가지 html 태그에 대하여 살펴볼 예정입니다. 여러 개를 한꺼번에 하면 머리 아프니까요, 오늘은 <p>, <div>, <br>, <span> 이렇게 네 가지 태그에 대해서만 확인해볼게요.
자, 그럼 지금부터 p태그, div태그, br태그, span태그 각각의 기능과 활용 방법, 그리고 이 태그들이 포스트 내에서 어떻게 동작을 하는지, 그리고 텍스트, 글상자, 글자배경색들에는 각각의 태그가 어떻게 적용되는지 등에 대하여 알아보도록 하겠습니다. 준비되셨다면 지금 바로 출발하겠습니다.
HTML에 대한 기본구조와 '문단 간격 없음' 기능 확인하기
◆ html 가장 기본적인 구조와 편집에 대한 내용은 이전에 설명드린 바가 있습니다. 태그라는 단어가 어색하신 분들은 아래의 포스트를 먼저 확인해주세요.
◆ 위 포스트에서 html의 기본구조와 태그의 개념에 대하여 확인하셨을테니 <p>, <div>, <br>, <span> 각각의 태그에 대하여 알아보도록 하겠습니다. 여기서는 먼저 p태그와 br태그.
<p> 태그
◆ p태그의 p는 'paragraph(문단)'의 앞글자를 딴 태그입니다. 즉, 문단을 지정하는 태그죠. 티스토리의 글쓰기 에디터에서는 문장을 쓰면 자동으로 p 태그가 따라붙습니다.
▼ 예를 들어 티스토리의 에디터에서 애국가 일부분을 한 문장으로 써보겠습니다.
▼ html 모드에서는 어떻게 표현이 될까요? 에디터 상단의 HTML 란을 체크해보겠습니다.
▼ 아래와 같이 <p> 태그로 시작하여 </p>태그로 끝나는 형태로 된 것을 알 수 있습니다. 즉, 해당 텍스트가 하나의 문단으로 표시가 되어있다는 의미입니다. (참고로, <p>태그는 </p>태그와 쌍을 이루지만, <p>태그 단독으로 사용할 수도 있습니다.)
▼ 이번에는 티스토리의 글쓰기 에디터에서 애국가 일부분을 두 문단으로 늘려서 써보겠습니다. 첫 번째 문장이 끝나는 곳에서 '엔터'키를 치면 새로운 문단이 생성이 됩니다.
▼ 위의 내용을 html 모드에서 확인해보겠습니다. 보시는 것처럼 <p> 태그로 시작하여 </p>태그로 끝나는 형태가 두 쌍이 있는 것을 알 수 있습니다. 즉, 문단이 두 개라는 의미가 됩니다.
<br>태그
◆ br태그의 br은 'Line Break'의 약자로 줄을 바꾸는 기능을 합니다. 다른 태그와는 다르게 두 개의 쌍이 아닌 하나의 태그 형태로 사용합니다. 예를 들어 <br>태그를 사용한 후에 </br>을 사용할 필요가 없는 거죠. 그런데, 이 br태그는 <br>태그로 단독사용해도 가능하고, </br>태그로 단독사용해도 되며, </ br>태그로 단독사용해도 동일한 기능을 합니다. 어떤 것을 사용해도 무방하지만, 무지무지 오래된 버전의 브라우저에서는 </ br>태그만 인식할 수 있다고 합니다. 그래서인지, 티스토리 에디터모드에서 줄바꾸기하면 작성하면 html모드에서 <br>이나 </br>형태가 아닌 </ br>태그로 나타나게 됩니다.
◆ br 태그를 사용하기 전에 먼저, 에디터모드에서 사용하는 키 중에서 '엔터'키와 'Shift + 엔터' 키의 기능을 잠깐 살펴보겠습니다.
▼ 보통 문단이 바뀔 때 새로운 문단을 표현하기 위하여 '엔터'키를 사용합니다. 그리고 그에 대한 결과는 위에서 확인했던 것처럼 <p>태그가 두 개가 생성이 된다는 것이었죠.
▼ 그럼 새로운 문단 생성이 아닌 단순 줄바꾸기를 하려면 어떻게 해야할까요? 티스토리에서 제공하는 단축키를 사용하면 되는데, 줄바꾸기 단축키는 'Shift + 엔터' 키입니다. 이 키를 사용하면 하나의 문장중간에서 줄바꿈을 할 수 있습니다. 위에서 작성했던 두 개의 문단을 볼까요?
▼ 이 예시에서 첫 번째 문단의 '닳도록'과 '하느님이' 사이에 커서를 둔 상태에서 'Shift + 엔터' 키를 쳐보도록 하겠습니다.
▼ 그럼 아래와 같이 문단 바꿈이 아닌 줄바꿈으로 표현되는 것을 알 수 있습니다.
▼ 그리고 위의 내용을 html 모드에서는 어떻게 표현될지 살펴보겠습니다. 기존에 만들어져 있던 문단의 형태 <p>와 </p>태그 두 개로 나뉘어져 있고, 첫 번째 문단의 '닳도록'과 '하느님이' 사이에 </ br>태그가 추가로 생성이 되어있는 것을 확인할 수 있습니다. 위에서 설명드린대로 br태그는 슬러시(/) 옆에 공란이 있는 형태로 되어 있는 것도 확인이 가능하구요. 아무튼 br태그는 단순 줄바꿈을 위한 태그라는 것을 기억하시면 되겠습니다.
◆ 이것으로 p태그 및 br태그의 용도와 차이점에 대하여 살펴보았습니다.
<div>태그와 <span> 태그
<div>태그
◆ div태그는 'division(나누기)'의 앞 세글자를 딴 태그입니다. html에서 특정 영역을 구분하거나 섹션을 나타낼 때 사용되는데, 태그의 특성상 '블록단위'로 구분이 됩니다. <div>태그로 시작하여 </div>태그로 끝나는 형태로 되어있습니다. 중요한 것은 이 태그는 '블록레벨(블록단위)' 요소라는 것입니다. div 태그로 끝을 맺으면 다음에 위치하는 내용이 강제로 다음 줄에서 시작하게 되기 때문에 '블록단위'라는 표현을 사용합니다.
▼ 구에디터에서 사용되는 '글상자'는 바로 이 <div>태그를 사용합니다. 에디터에서 텍스트를 작성한 후에 글상자를 적용해보겠습니다. 음... 에디터에서 애국가 일부분을 써보겠습니다. 아까 그 부분입니다.
▼ 위에서 확인했듯이 이 텍스트는 html 모드에서는 다음과 같이 <p>와 </p>태그로 감싸져 있습니다.
▼ 그럼 이 텍스트에 글상자를 넣어보겠습니다. (이 글상자 기능은 현재 구에디터에만 있어요. 신버전 에디터에서도 생겼으면 좋겠네요.) 텍스트에 커서를 둔 상태에서 글상자 버튼을 눌러서 원하는 글상자를 불러와봅시다.
▼ 그럼 아래와 같은 글상자가 만들어지는데요.
▼ 위의 글상자를 html로 살펴보면 <div>태그로 시작해서 </div>태그로 끝나는 것을 알 수 있습니다. (그 뒤에 붙은 class, style 등에 대한 내용은 다음 포스팅 때 알려드릴게요.) 물론 텍스트로 작성한 하나의 문단은 그 안에 <p>태그와 </p>태그로 삽입되어 있는 형태로 되어 있습니다.
◆ 여기서 글상자에 사용된 div태그는 하나의 블록단위로 되어있습니다. 커서를 글상자 다음 칸에 두고 텍스트를 입력하지 않고 글상자 내에서 텍스트를 작성하면 이 블록단위 내에서 글이 작성되게 되는 것이죠. (즉, 블록단위의 영역으로 그룹화가 된다는 의미입니다.)
◆ 나중에 다른 포스팅을 통해서 따로 설명드리겠지만, 만들어졌던 글상자를 지우고 그 자리에 텍스트를 작성하기 위해서는 이 div태그를 없애주어야 합니다. 즉,<div class="txc-textbox" style="border-style: solid; border-width: 1px; border-color: rgb(243, 197, 52); background-color: rgb(254, 254, 184); padding: 10px;">이 부분과 </div>이 부분 모두를 지워야 순수하게 텍스트만 남게 되는 것입니다. 그렇지 않으면 글상자 안에서 벗어나지 못하는 무한 반복의 슬픈 현실을 맞이하게 될 겁니다. 흑.
<span>태그
◆ span태그는 영문 그대로 span(폭, 좁은구간) 영역을 나타내는 태그입니다. div태그와 마찬가지로 특정 '영역'을 설정할 때 사용되는 태그이지만, div태그가 '블록단위'의 영역을 나타낸다면, span태그는 '라인단위'의 영역을 표현합니다. 블록 전체가 적용되는 대신에 선택하는 영역 일부분만 적용이 되죠. 이 태그도 <span>태그로 시작하여 </span>태그로 끝나는 형태입니다. span태그는 우리가 티스토리 포스팅을 할 때 자주 사용하는 글자색과 글자배경색에 적용됩니다. 하나씩 살펴볼까요?
▼ 먼저 텍스트를 작성해보겠습니다.
▼ 그리고 이 텍스트는 html에서 아래와 같은 형태입니다. (지겹지만 정확하게 이해시켜드리기 위해 반복 설명드립니다.)
▼ 이 상태에서 '우리나라 만세' 부분의 글자색을 빨강색으로 변경해보겠습니다. 텍스트를 드래그해주세요.
▼ 그리고 글자색 아이콘을 클릭하여 원하는 글자색으로 적용해줍시다.
▼ 그럼 아래와 같이 '우리나라 만세' 부분이 빨강색으로 변경되었습니다.
▼ 이 내용을 html로 살펴보면 아래와 같습니다. 텍스트 문장은 <p>태그로 시작하여 </p>태그로 끝나지만, '우리나라 만세' 부분만 <span>태그와 </span>태그로 감싸져 있습니다.
▼ 만약 여기서 텍스트의 빨강색 글자를 지워주려면 어떻게 해야할까요? 보통은 아래와 같이 하실겁니다. 변경적용했던 '우리나라 만세' 부분을 다시 드래그 하겠죠.
▼ 그리고 다시 텍스트 글자색을 선택하여 다시 원래의 색(보통은 검정색)으로 되돌려놓는 거죠.
▼ 결과를 볼까요? 오~ 다시 돌아왔네요.
▼ 그럼 위의 텍스트를 html로 확인해볼까요? 그랬더니, 아직까지 <span> 태그가 남아있네요. 이렇게 생각하시면 됩니다. 원래는 기본값(보통은 검정색이나 검정색과 가까운 진회색)으로 텍스트 색깔이 정해져 있는데, 굳이 특정 구간을 다시 설정해서 (여기서는 '우리나라 만세') 해당 구간을 다시 검정색을 넣은 것과 같은 상황이 됩니다. 다시말해 군더더기가 되는거죠.
◆ 참고로 태그 안의 rgb(0, 0, 0)는 색상을 나타내는 부분인데요, 이 부분은 이전 포스팅에 상세히 설명드렸으니 궁금하시면 살펴보시고 오세요! (여기서의 rgb 값은 순수한 검정색이 됩니다.)
◆ 여기서 텍스트만 남기려면 어떻게 해야할까요? 위에서 확인했던 div태그와 마찬가지로 span태그에 해당하는 부분을 삭제해야 합니다. 즉, '<span style="color: rgb(0, 0, 0);">' 이 부분과 </span> 이 부분을 날려버려야 하는 것이죠. 보통 글쓰기 에디터에서 직접 글을 쓰지 않고 다른 곳에서 썼던 글을 복사하여 에디터에 붙이기를 하면 보통은 글꼴이나 색상 등의 내용이 div 태그 또는 span 태그가 따라붙는 경우가 많아서 글을 쓸 때 오류가 발생하는 경우가 있습니다. 오류가 발생할 때에는 해당 태그들을 날려주는 것이 가장 바람직합니다.
▼ 아무튼 span태그를 삭제한 후의 html은 아래와 같구요.
▼ 해당 태그를 날린 후에는 에디터의 화면도 정상적으로 바뀐것을 확인할 수 있습니다.
▼ 이번에는 글자배경색도 같은 방법으로 적용해보겠습니다. 원하는 영역을 선택해서 글자배경색을 적용해줍니다.
▼ 그럼 아래와 같이 '우리나라 만세' 부분에 글자배경색이 적용되었구요.
▼ 글자배경색에 대한 html은 아래와 같습니다. 이 경우에도 글자 배경색을 날리고 싶으시다면 span 태그부분을 날려주시면 되겠습니다.
▼ 그 외 나머지 부분은 글자색과 동일한 방법으로 처리해주시면 되겠습니다.
마치며...
쓸까말까 고민하던 html에 대한 포스팅을 하기 시작했네요. 글상자와 글자배경색을 설명하기 위한 간단한 코딩이지만, 사실 html을 잘 모르는 분들께는 높은 장벽일 수가 있을 것 같아서 간단하게 설명을 드렸습니다. html이라는 언어를 적당히 이해하고 잘 다룰 줄 알면 홈페이지와 블로그를 좀 더 멋있게, 본인이 원하는 형태로 좀 더 가깝게 표현할 수 있을 겁니다. 하지만, html을 잘 모르더라도 마음에 드는 스킨을 적용하면 어느 정도 만족스러운 디자인을 구현할 수 있고, 에디터(편집기)의 기본 기능을 활용하면 웬만한 편집은 가능하니 html은 필요에 따라 활용하면 될 것 같습니다.
티스토리 시스템 팀에서는 신버전 에디터의 기능을 조금씩 개선해나가고 있는 것 같습니다. 그러나 구버전 에디터가 기능면에서 좋아졌다는 내용은 없는 것으로 보아 결국에는 신버전 에디터로 갈아타야할 것 같습니다. 하지만 현재의 신버전 에디터의 기능은 아직 완벽하지는 않은 상황이라 블로거들의 구미에 맞춘 수준까지 되려면 상당한 시간이 소요될 것 같아요. 그 때까지는 지금처럼 구버전과 신버전 에디터가 병행되는 수준이겠죠. 신버전 에디터에 현재 없는 '글상자'만들기 기능이 후에라도 만들어지게 될지는 모르겠지만, 오늘 설명드린 내용과 코딩을 조금씩 익혀두시면 언젠가는 도움이 될 거예요. 오늘은 여기까지만 할게요. 다음 시간에 다시 돌아오겠습니다. 안녕. ^^
