글상자 서식 다양하게 바꿔보기(색깔, 테두리)

2021.06.14 - [블로그 관리] - html 이용해서 기본적인 글 상자 만들기

html 이용해서 기본적인 글 상자 만들기

지난 글에서 기본적인 글 상자를 만들어봤다 

 

이번에는 

핑크  

 

두줄 박스

이런 아이들을 만들어볼 예정 

 

 

색깔 바꾸기 

<div class="txc-textbox" style="background-color: #dbe8fb; padding: 10px;">
<p data-ke-size="size16">파랑 &nbsp;</p>
</div>

 

<div class="txc-textbox" style="background-color: #fadadb; padding: 10px;">
<p data-ke-size="size16">핑크 &nbsp;</p>
</div>

파란 글상자와 핑크의 html 태그는 다음과 같다 

 

거의 같지만 이 중 다른 부분은 

 

<div class="txc-textbox" style="background-color: #dbe8fb; padding: 10px;"> 

<p data-ke-size="size16">파랑 &nbsp;</p> 

</div>

 

<div class="txc-textbox" style="background-color: #fadadb; padding: 10px;">
<p data-ke-size="size16">핑크 &nbsp;</p>
</div>

 

바로 RGB 색깔 

 

html 태그를 입력할 때 좋아하는 RGB 색깔로 바꿔서 입력하면 바로 적용된다 

 

 

<div class="txc-textbox" style="background-color: #fefeb8; border: #f3c534 1px solid; padding: 10px;">
<p data-ke-size="size16">노란색</p>
</div>

 

<div class="txc-textbox" style="background-color: #e7fdb5; padding: 10px;">
<p data-ke-size="size16">&nbsp;</p>
</div>

다양하게 적용 가능 

 

 

 

 

테두리 변경하기

 

<div class="txc-textbox" style="background-color: #dbe8fb; padding: 10px; ">
<p data-ke-size="size16">파란색</p>
</div>

 

<div class="txc-textbox" style="background-color: #dbe8fb; padding: 10px; border: #79a5e4 1px solid;">
<p data-ke-size="size16">파란색</p>
</div>

이번에는 같은 파란색이지만 테두리가 다른 두 글상자들이다. 

 

거의 같지만 이 중 다른 부분은 

<div class="txc-textbox" style="background-color: #dbe8fb; padding: 10px; ">
<p data-ke-size="size16">파란색</p>
</div>

<div class="txc-textbox" style="background-color: #dbe8fb; padding: 10px; border: #79a5e4 1px solid;">
<p data-ke-size="size16">파란색</p>
</div>

 

border: #79a5e4 1px solid;  이 부분 

 

 

https://www.dummies.com/web-design-development/html5-and-css3/how-to-add-borders-in-html5-and-css3-programming/

border 속성의 styles는 이렇게 다양해서 원하는대로 설정할 수 있다 

* double의 경우 px를 3px이상 설정해야 유의미해짐 

 

<div class="txc-textbox" style="background-color: #dbe8fb; padding: 10px; ">
<p data-ke-size="size16">&nbsp;</p>
</div>

 

<div class="txc-textbox" style="background-color: #dbe8fb; padding: 10px; border: 1px solid #79a5e4;">
<p data-ke-size="size16">&nbsp;</p>
</div>

 

<div class="txc-textbox" style="background-color: #dbe8fb; padding: 10px; border: 1px dashed #79a5e4;">
<p data-ke-size="size16">&nbsp;</p>
</div>

 

<div class="txc-textbox" style="background-color: #dbe8fb; padding: 10px; border: 3px double #79a5e4;">
<p data-ke-size="size16">&nbsp;</p>
</div>