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

이번엔 지난 HTML로 박스 만들기가 부족함이 있어서 이어서 응용하여 글상자 만드는 법을 알려드리고자 합니다.

 

초간단 박스

 

점선과 배경색 넣기

 

<div class="border: 1px dashed blue; padding: 10px; background-color: #dbe8fb;">

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

</div>

 

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

 

dashed는 점선이고 dashed blue로 파란 점선을, 배경색은 background-color로 표현하였는데 html색상표에서 원하시는 색을 입력하시면 됩니다. dashed의 색 역시 #0054FF 과 같은 html색상으로 가능합니다.

 

더 작은 점선

 

<div class="border: 1px dotted blue; padding: 10px; background-color: #dbe8fb;">

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

</div>

 

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

 

dotted는 좀 더 촘촘한 점선이고, dotted blue나 html색상표로 원하시는 색을, background-color 역시 html 색상표로 원하시는 색을 입력하시면 됩니다.

 

모서리 둥글게

 

<div class="border: 1px dotted blue; border-radius: 5px; padding: 10px;

background-color: #dbe8fb;">

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

</div>

 

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

 

border-radius 픽셀(px) 부분의 숫자를 변경하셔서 원하는 정도로 모서리를 둥글게 할 수 있습니다.