HTML DIV tag - 테두리 그리기 STYLE - BORDER

페이지 안에 영역을 설정하는 태그가 DIV이다.
DIV 영역은 설정하되 테두리선이 표시되지 않도록 할 수도 있고, 테두리선을 모두 또는 일부만 표시할 수도 있다.

테두리(border: 보더) 속성 주기

[사방의 테두리선을 일괄적으로 표시하는 방법]
border: 1px solid gold
의미 => 선굵기: 1px,  선종류: 직선(solid),  선색상: 금색(gold)

[특정한 쪽만 테두리선을 표시하는 방법]
영역 윗쪽 테두리선만 표시     border-top: 1px solid gold
영역 오른쪽 테두리선만 표시  border-right: 1px solid gold
영역 왼쪽 테두리선만 표시     border-left: 1px solid gold
영역 아래쪽 테두리선만 표시  border-bottom: 1px solid gold

1.[태그 모양: DIV 영역은 설정하되 테두리 선을 표시하지 않음]

<div style="height: auto; width: 100%;">
여기는 DIV영역이지만, 테두리 선을 표시하지 않음
</div>

1-1.[실제 적용한 모습]

여기는 DIV영역이지만, 테두리 선을 표시하지 않음

2.[태그 모양: 영역의 사방 테두리를 일괄적으로 표시함]

<div style="height: auto; width: 100%; border:1px solid gold;">
여기는 DIV영역이며, 테두리 선을 일괄적으로 표시함
</div>

2-1.[실제 적용한 모습]

여기는 DIV영역이며, 테두리 선을 일괄적으로 표시함

3.[태그 모양: 영역의 윗쪽 테두리만 표시함]

<div style="height: auto; width: 100%; border-top:1px solid gold;">
여기는 DIV영역이며, 윗쪽 테두리선만 표시함
</div>

3-1.[실제 적용한 모습]

여기는 DIV영역이며, 윗쪽 테두리선만 표시함

4.[태그 모양: 영역의 오른쪽 테두리만 표시함]

<div style="height: auto; width: 100%; border-right:1px solid gold;">
여기는 DIV영역이며, 오른쪽 테두리선만 표시함
</div>

4-1. [실제 적용한 모습]

여기는 DIV영역이며, 오른쪽 테두리선만 표시함

5.[태그 모양: 영역의 왼쪽 테두리만 표시함]

<div style="height: auto; width: 100%; border-left:1px solid gold;">
여기는 DIV영역이며, 왼쪽 테두리선만 표시함
</div>

5-1.[실제 적용한 모습]

여기는 DIV영역이며, 왼쪽 테두리선만 표시함

6.[태그 모양: 영역의 아래쪽 테두리만 표시함]

<div style="height: auto; width: 100%; border-bottom:1px solid gold;">
여기는 DIV영역이며, 아래쪽 테두리선만 표시함
</div>

6-1.[실제 적용한 모습]

여기는 DIV영역이며, 아래쪽 테두리선만 표시함

>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...