상하좌우 선 만들고 색과 스타일 바꾸기 div 태그

글쓰기중 선을 그거 제목을 분류할때나 문단을 나눌때 사용하기 좋은 태그 입니다.

 

 

div 태그에 테두리를 만들고 색깔을 지정해 주기 위해서는 CSS 의 border 속성을 사용합니다.
그런데 border 속성은  div 박스의 상하좌우의 테두리를 한꺼번에 지정합니다.

한쪽 면씩 다른 테두리를 지정하려면 방향을 지정해 주면 됩니다.

<div style="border-top: 1px groove; padding: 10px;">상 -&gt; border-top</div>
<p>&nbsp;</p>
<div style="border-bottom: 1px groove; padding: 10px;">하 -&gt; border-bottom</div>
<p>&nbsp;</p>
<div style="border-left: 1px groove; padding: 10px;">좌 -&gt; border-left</div>
<p>&nbsp;</p>
<div style="border-right: 1px groove; padding: 10px;">우 -&gt; border-right</div>

 

상 -> border-top

 

하 -> border-bottom

 

좌 -> border-left

 

우 -> border-right

 

테두리마다 다른 스타일과 굵기

<div style=" □■□ padding:10px;"> 문장 </div>

위쪽 실선 border-top:1px solid; 

오른쪽은 입체적인 선 border-right:1px groove; 

아래쪽 굵은 선 border-bottom:10px solid; 

왼쪽 점선 border-left:1px dashed;

 

<div style="border-top: 1px solid; border-bottom: 10px solid; border-left: 1px 
dashed; border-right: 1px groove; padding: 10px;">
문장
</div>

문장

 

테두리마다 다른 색깔 지정

 

<div style=" □■□ padding:10px;"> 문장 </div>

 

위쪽 파란색 border-top:2px solid blue; 

오른쪽 노란색  border-right:2px solid yellow;

아래쪽 붉은색 border-bottom:2px solid red;

왼쪽 녹색 border-left:2px solid chartreuse; 

<div style="border-top: 2px solid blue; border-bottom: 2px solid red; border-left: 2px solid chartreuse; 
border-right: 2px solid yellow; padding: 10px;">
문장
</div>

 

 

 

문장