- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
Web Design (웹디자인) HTML DIV tag - 테두리 그리기 STYLE - BORDER
2020.08.26 15:22
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
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>
여기는 DIV영역이지만, 테두리 선을 표시하지 않음
</div>
1-1.[실제 적용한 모습]
여기는 DIV영역이지만, 테두리 선을 표시하지 않음
2.[태그 모양: 영역의 사방 테두리를 일괄적으로 표시함]
<div style="height: auto; width: 100%; border:1px solid gold;">
여기는 DIV영역이며, 테두리 선을 일괄적으로 표시함
</div>
여기는 DIV영역이며, 테두리 선을 일괄적으로 표시함
</div>
2-1.[실제 적용한 모습]
여기는 DIV영역이며, 테두리 선을 일괄적으로 표시함
3.[태그 모양: 영역의 윗쪽 테두리만 표시함]
<div style="height: auto; width: 100%; border-top:1px solid gold;">
여기는 DIV영역이며, 윗쪽 테두리선만 표시함
</div>
여기는 DIV영역이며, 윗쪽 테두리선만 표시함
</div>
3-1.[실제 적용한 모습]
여기는 DIV영역이며, 윗쪽 테두리선만 표시함
4.[태그 모양: 영역의 오른쪽 테두리만 표시함]
<div style="height: auto; width: 100%; border-right:1px solid gold;">
여기는 DIV영역이며, 오른쪽 테두리선만 표시함
</div>
여기는 DIV영역이며, 오른쪽 테두리선만 표시함
</div>
4-1. [실제 적용한 모습]
여기는 DIV영역이며, 오른쪽 테두리선만 표시함
5.[태그 모양: 영역의 왼쪽 테두리만 표시함]
<div style="height: auto; width: 100%; border-left:1px solid gold;">
여기는 DIV영역이며, 왼쪽 테두리선만 표시함
</div>
여기는 DIV영역이며, 왼쪽 테두리선만 표시함
</div>
5-1.[실제 적용한 모습]
여기는 DIV영역이며, 왼쪽 테두리선만 표시함
6.[태그 모양: 영역의 아래쪽 테두리만 표시함]
<div style="height: auto; width: 100%; border-bottom:1px solid gold;">
여기는 DIV영역이며, 아래쪽 테두리선만 표시함
</div>
여기는 DIV영역이며, 아래쪽 테두리선만 표시함
</div>
6-1.[실제 적용한 모습]
여기는 DIV영역이며, 아래쪽 테두리선만 표시함
[출처] https://ojji.wayful.com/2013/12/HTML-DIV-Border-Sepecify-what-kind-of-border-line-to-display.html
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
