728x90
반응형
<div> 블럭레벨용 width 100%
safd
<!DOCTYPE html> <htm> <head> <title>div엘리먼트(태그)</title> </head> <body style="margin:0px; padding: 0px;"> <h1>The div element</h1> <div style="background-color: gray;">1</div> <div style="width:100%; height:50%; background-color: blue;">2</div> <div style="width:50vw; height:50vh; background-color: red;"></div> <div style="width:300px; height:300px; background-color: yellow;"></div> <div style="background-color: gray; border:1px solid #000000"></div> <div style="width:100px; height:100px; background-color: lightblue; margin:0 auto;"></div> <div style="border: 5px solid red; background-color: lightblue;"></div> <br> </body> </html>
div
<!DOCTYPE html> <html> <head> <title>div엘리먼트(태그)</title> <style> body { margin: 0px; padding: 0px; } div { border: 1px solid #000000; } </style> </head> <body> <h1>The div element</h1> <div style="margin: 30px; background-color: crimson">내용</div> <br><br> <div style="padding: 30px; background-color: cyan">내용</div> <br><br> <div style="width: 100%; margin: 30px; background-color: crimson">내용</div> <br><br> <div style="width: 100%; padding: 30px; background-color: cyan">내용</div> <br><br> <div style="text-align: center"> <h1>div엘리먼트에 text-align:center 속성</h1> <div style="background-color: chocolate">내용</div> <br /> <table style=" margin: 0 auto; width: 100px; height: 100px; background-color: skyblue; " > <tr> <td>1</td> </tr> </table> <img src="../img/cute_dog.jpg"><br> <span style="background-color: hsla(60,100%,50%,0.8);">모두 다 정렬이 된다.</span> </div><br><br> <div style="margin:0 auto; text-align:right;"> <h1 style="width:50%;">div엘리먼트에 margin:0 auto속성 이해하기</h1> <div style="width:50px; height:50px; background-color: chocolate;">내용</div> <div style="width:50px; height:50px; background-color: chocolate;">내용</div> <img src="../img/iphone.png"><br> 가운데 정렬이 되지 않는다. </div><br><br> <div style="margin:0 auto; width:70%;text-align: center;"> <h1>div엘리먼트에 margin:0 auto과 width속성을 이용하여 가운데 정렬하기</h1> <div style="width:50px; height:50px; background-color: chocolate;">내용</div> <img src="../img/iphone.png" style="width:100%;"><br> div영역만 가운데 정렬이 된다. </div><br><br> </body> </html>
728x90
반응형
'[CSS]' 카테고리의 다른 글
| [CSS] hover 가상클래스( : ) 선택자 (0) | 2024.02.20 |
|---|---|
| [CSS] selector (0) | 2024.02.20 |
| [CSS] border (0) | 2024.02.19 |
| [CSS] <style = "background : ~~"> (0) | 2024.02.19 |
| [CSS] style, color, font (0) | 2024.02.19 |