안녕하세요, 이번 포스트는 포스트 작성 시 HTML을 활용하여 만들 수 있는 각종 글상자 디자인 탬플릿을 공유드리려고 합니다.
웹페이지나 블로그 포스트를 작성할 때 HTML을 활용하면 다양한 형태의 도형이나 디자인을 활용할 수가 있습니다. 네이버 블로그의 경우 보안상의 이유로 HTML을 허용하지 않는 것으로 알고 있지만, 제가 주로 활동하는 티스토리의 경우 HTML편집기능을 지원하기 때문에 좀 더 커스터마이즈 된 디자인 활용이 가능합니다.
물론 일부 구분선이나 글상자 템플릿은 기본 기능으로 제공 중에 있지만.. 아무래도 만족스럽지 못한 경우가 많습니다. 때문에 저는 HTML로 각종 탬플릿을 만들어 사용하고 있습니다.
필요할 때마다 만들어서 저장을 해두고 있는데, 혼자만 활용하기에는 아쉬워서 많은 분들도 같이 활용할 수 있도록 공유드리고자 포스트를 작성하게 되었습니다.
1. 참고 정보용 글상자
본문 내용에 대한 추가 정보나 참고용 정보를 전달해야 하는 경우에 활용할 수 있는 글상자입니다. 중요 내용을 전달하는 것이 아니기 때문에 강조되는 효과는 제외하고 회색조의 컬러감을 주면서 시선이 집중되는 것을 방지할 수 있습니다.
HTML로 생성한 참고 정보용 글상자 안에 텍스트를 입력할 수 있습니다
이 글상자를 만드는 HTML코드는 아래와 같습니다. 활용하실 때에는 아래 코드를 복사하셔서 HTML모드로 변경 후 붙여 넣으시고 사용하실 수 있는데요. 일부 속성의 변경이 필요하시면 아래 설명을 참고하시면 되겠습니다.
<div style="
background-color: #f0f0f0;
padding: 5px;
padding-left: 30px;
border: 1px dashed #999;">
<p data-ke-size="size16">HTML로 생성한 참고 정보용 글상자 안에 텍스트를 입력할 수 있습니다</p>
</div>
- background-color :
글상자의 배경색입니다. 현재 템플릿에는 옅은회색(#f0f0f0)으로 되어 있지만 다른 색상으로 변경을 원하시면 해당 색의 코드로 변경하시면 됩니다.
(ex. 흰색 배경으로 설정 시 background-color : #ffffff;) - padding :
글상자 안쪽의 여백 값입니다. 현재는 5px 정도의 여백으로 지정되어 있고 픽셀의 숫자를 조정하시면 여백을 늘리거나 줄일 수 있습니다. - padding-left :
글상자 여백 중 왼쪽의 여백입니다. 현재 양식에서는 들여 쓰기의 효과를 주기 위해서 30px의 여백을 준 상태입니다. 숫자를 조정하셔도 되고, 필요 없으신 경우 삭제하셔도 무방합니다. - border :
글상자의 외곽선 속성입니다. 현재는 외곽선의 두께는 1px, 외곽선의 형태는 끊어진 실선(dashed), 색상은 회색(#999)으로 지정되어 있습니다. 마찬가지로 필요시 두께와 형태, 색상을 모두 변경하실 수 있습니다.
(ex. 검은색 점선 외곽선 설정 시 border : 1px dotted #000;)
2. 원형 글상자
본문 중간에 중요한 체크포인트나 강조사항을 전달하는 경우, 또는 섹션의 구분이 필요할 때 활용할 수 있는 원형 글상자입니다.
눈에 띄는 글상자를 통해 시선을 끌 수 있습니다.
위 형태의 글상자는 다음의 HTML코드로 작성할 수 있습니다. 마찬가지로 HTML 코드를 수정하시면 글상자 디자인을 입맛에 맞게 변경해서 활용하실 수 있습니다.
<div style="
width: 70%;
margin: 0 auto;
background-color: #ffffff;
padding: 10px;
border: 1px solid #999999;
border-radius: 10px;
box-shadow: 5px 5px 10px #add8e6;">
<p style="text-align: center;" data-ke-size="size16">
<i><b>눈에 띄는 글상자를 통해 시선을 끌 수 있습니다.</b></i></p>
</div>
- width :
글상자의 가로길이의 비율입니다. 반응형 웹페이지를 기준으로 70% 정도의 크기로 고정해 둔 상태입니다. 크기를 조정하고 싶으시면 숫자를 변경하시면 됩니다. - margin :
글상자 외부의 여백입니다. 해당 글상자는 페이지의 가운데에 정렬하기 위해 margin : 0 auto를 설정했습니다.
외부 여백을 변경하고 싶다면, 위/오른쪽/아래/왼쪽의 시계방향 순으로 숫자를 입력하여 변경할 수 있습니다.
(ex. 외부 여백 설정 시, margin : 20px 10px 20px 10px) - border-radius :
글상자의 모서리를 둥글게 만드는 속성입니다. 위의 글상자는 10px의 값을 설정했고, 개인적으로는 가장 무난한 값이라고 생각합니다. 더 둥글게 만들고 싶으시다면 값을 크게 하시면 되겠습니다. - box-shadow :
글상자에 그림자 효과를 주는 코드입니다. 위에서는 각각의 두께를 5px, 10px로 설정했고 그림자의 색상을 #add8e6으로 설정함으로써 좀 더 강조되는 효과를 주었습니다. 그림자의 두께나 색상은 숫자와 색코드를 변경하는 방식으로 조정하실 수 있습니다. - background-color, padding, border 등의 옵션은 앞서 설명드렸기 때문에 따로 언급하지 않겠습니다.
3. 텍스트 배경용 글상자
텍스트 자체를 강조하고 싶을 때 사용하는 글상자입니다. 텍스트의 배경색을 넣는 것처럼 특정 텍스트 블록을 글상자로 감싸면서 하이라이트 효과를 줄 수가 있습니다.
입력하는 특정 텍스트 블록을 강조합니다.
제목 또는 소주제를 표현해야 하거나, 정말로 강조해야 하는 문구가 있을 때 활용할 수가 있습니다. 해당 글상자는 아래의 HTML코드를 참고하셔서 활용하실 수 있습니다.
<div style="
background-color: #c3e9fd;
border: 1px solid transparent;
padding: 0px;
display: inline-block;
max-width: 100%;
border-bottom: 2px solid #333;">
<p data-ke-size="size16">입력하는 특정 텍스트 블럭을 강조합니다.</p>
</div>
- display :
해당 요소(글상자)를 어떻게 표현할 것인가에 대한 속성입니다. 하나의 블록으로 구분할지, 숨길지 또는 내용에 맞추어 크기를 조정할지에 대한 속성값으로, 위의 글상자는 내용에 작성되는 텍스트의 크기에 따라 조정되도록 설정했기 때문에 display: inline-block;이라고 설정한 것입니다.
오늘 포스트에서는 HTML을 활용하여 만들 수 있는 글상자(텍스트박스) 탬플릿 공유와 함께 활용방법은 말씀드렸습니다. 혹시나 만들어보고 싶거나 필요한 탬플릿들에 대해서 의견을 주시면 다음 포스트에서 한번 다루어보도록 하겠습니다.