1. clear.both;
양쪽 정렬 제거.
float속성을 사용하면 요소를 정렬시켜주는데 그걸 하고 싶지 않은 경우 사용한다.
.div1{
float: left;
width: 100px;
height:40px;
margin:0px;
border: 3px solid green;
}
.div2{
border: 1px solid red;
height: 50px;
}
.div3{ clear: both;}
</style>
</head>
<body>
<h2>float 속성 사용</h2>
<div class="div1">div1</div>
<div class="div2">div2 float 속성을 사용하여 대상 요소를 웹 문서에 배치한다</div>
<div class="div1">다시한번 div1</div>
<div class="div3">clear를 통해서 초기화한다.</div>
2. overflow
<style>
div{border:3px solid green}
.img1{float:right;}
.auto{overflow: auto;}/*자동으로 크기를 맞춰준다.*/
.hidden{overflow:hidden;}
</style>
</head>
<body>
<p>이미지가 박스영역을 벗어남</p>
<div class="auto">
<img class="img1" src="/cssExam/images/icon1.png" width="50" height="50">
이미지가 오른쪽 정렬로 되어 있는데 박스영역을 벗어났다.
</div>
<br><br><br>
<div class="hidden">
<img class="img1" src="/cssExam/images/icon2.png" width="50" height="50">
이미지가 박스영역을 벗어날 경우에는 overflow속성을 설정하여 해결한다.
</div>
</body>
3. box-sizing
다른 요소에 따라 박스의 크기가 달라지는데 이 코드를 쓰면 박스의 크기를 정한 사이즈로 유지시켜준다.
<style>
div{box-sizing: border-box; width:200px;height:100px;}
#div1{border: 1px solid blue; padding:10px;}
#div2{border: 1px solid red;}
</style>
</head>
<body>
<div id="div1">시멘틱 구조에 유용하게 사용할 수 있습니다</div>
<div id="div2">시멘틱 구조에 유용하게 사용할 수 있습니다</div>
</body>아래가 아무것도 설정하지 않았을 때라면
아래가 border-box를 적용했을 때이다.
'코딩 공부 > CSS' 카테고리의 다른 글
| CSS 예제들 (0) | 2022.10.23 |
|---|---|
| CSS Table (0) | 2022.10.22 |
| CSS header session footer등의 구조 (0) | 2022.10.21 |
| CSS 예제 (ul, li, border, margin, position) (0) | 2022.10.19 |
| CSS (0) | 2022.10.18 |
