HTML로 글상자 만들기-[기본 박스]

티스토리로 글을 쓰고자 할 때 소제목이든, 인용구든 그냥 글만 쓰기에는 부족함이 있습니다. 그래서 CSS없이 HTML만으로 초간단 글상자 만드는 법을 알려드리고자 합니다.

 

초간단 박스

 

border 속성으로 테두리 만들기

<div style="border: 1px solid black; padding: 10px;">안녕하세요 글 내용이 제대로 입력되는지 테스트 중입니다.</div>

 

안녕하세요 글 내용이 제대로 입력되는지 테스트 중입니다.

 

div라는 속성에 Style을 정의한다는 뜻인데, border은 테두리의 두께이며, solid black은 일반적인 검은 테두리를 정의한다는 뜻입니다. solid부분에 blue, yellow의 영어로 색을 표현할 수 있으며 영어 대신 html색상표(예: #000000)를 입력해도 적용됩니다.

 

점선과 도트 테두리

<div style="border:1px dashed; padding:10px;">
안녕하세요 점선 테두리 테스트 중입니다.
</div>

 

안녕하세요 점선 테두리 테스트 중입니다.

 

안녕하세요 점선 테두리 테스트 중입니다.

 

예: 파란색으로 변경은 dashed blue; 나  dashed #0054FF; 로 색 변경 가능합니다.

 

<div style="border:1px dotted; padding:10px;">
안녕하세요 도트 점선 테두리 테스트 입니다.
</div>

 

안녕하세요 도트 점선 테두리 테스트 입니다.

 

점선의 색 변경(예: 파란색) 역시 dotted blue; / dotted #0054FF; 로 변경 가능 합니다.

 

<div style="border: 1px dotted; border-radius: 5px; padding: 10px;">안녕하세요 테두리의 모서리 테스트 입니다.</div>

 

안녕하세요 테두리의 모서리 테스트 입니다.

 

border-radius: 5px 에서 px의 숫자를 조절하여 둥근 정도를 조절할 수 있습니다.