- 전체
- 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)
HTML HTML div 왼쪽, 오른쪽 배치
2020.06.02 15:51
HTML div 왼쪽, 오른쪽 배치
1 개요[편집]
- HTML div 왼쪽, 오른쪽 배치
- HTML div 왼쪽, 오른쪽 배열
- HTML div 좌우 배열, 양쪽 배치
2 예시 1[편집]
<style>
.left-box {
background: red;
float: left;
}
.right-box {
background: blue;
float: right;
}
</style>
<div class='left-box'>왼쪽</div>
<div class='right-box'>오른쪽</div>
html5
3 예시 2[편집]
<style>
.left-box {
background: red;
float: left;
}
.right-box {
background: yellow;
float: right;
}
</style>
<div class='left-box'>왼쪽1</div>
<div class='left-box'>왼쪽2</div>
<div class='right-box'>오른쪽2</div>
<div class='right-box'>오른쪽1</div>
html5
4 예시 3[편집]
- http://zetawiki.com/ex/css/div-left-right-2.html
- 대략 좋지 않음. 양쪽 1개씩만 가능 (2개 이상되면 겹침)
<style>
.left-box {
position: absolute;
top: 0; left: 0;
background: red;
}
.right-box {
position: absolute;
top: 0; right: 0;
background: blue;
}
</style>
<div class='left-box'>왼쪽</div>
<div class='right-box'>오른쪽</div>
[출처] https://zetawiki.com/wiki/HTML_div_왼쪽,_오른쪽_배치
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
