반응형
index8.html
<!DOCTYPE html>
<html>
<head>
<title>08 overflow</title>
<link rel="stylesheet" href="style8.css">
</head>
<body>
<div class="box">
<img class="left" src="left.png">
<p>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>
<img class="right" src="right.png">
</div>
</body>
</html>style8.css
body{
background-color: #ddd;
}
.box{
background-color: white; /*float된 left,right는 위에 떠있기 때문에 box는 float된 요소의 높이는 고려하지 않는다.
box의 높이는 0이 되어버렸기 때문에 흰색이 보이지 않음
그래서 left, right를 이렇게 float로 사용하면 부작용 발생한다.
해결법 1) clear, 2) overflow: hidden*/
overflow: hidden; /*원래 용도는 아니지만 많이 사용 float된 요소까지 포함되어 있는 Block formatting context를 생성해줌.
overflow는 새로운 문서를 시작하는 일, 독립적인 문서가 시작된다. = Block formatting context*/
}
.box p{
margin-left: 100px;
border: 10px solid orangered;
}
.left{
float: left;
}
.right{
float: right;
}
아래 강의를 수강하고 개인적으로 정리하는 글입니다.
https://programmers.co.kr/learn/courses/4521
한 걸음 더 CSS: 코딩가나다 | 프로그래머스
× 본 강의 시리즈는 총 14개의 자음 개수에 따라 순차적으로 제작됩니다. 7/13 기준으로 8강까지 업로드 되어있으며, 하나씩 순차적으로 업데이트 됩니다. 한 걸음 더 CSS: 코딩가나다 부트스트랩 없으면 CSS는 쳐다도 안보는 분들께 추천! 한글 자음 순서대로, 각 자음으로 시작하는 CSS 속성들에 대해 부담없이 알아보는 빔캠프의 동영상 강의. 라이브 코딩을 구경하며 CSS에 대해서 조금씩, 조금씩 알아갈 수 있습니다. CSS는 디자이너들의
programmers.co.kr
반응형
'Programming > FrontEnd' 카테고리의 다른 글
| [HTML] <table>의 row index와 cell index 구하는 법 (0) | 2021.07.23 |
|---|---|
| [CSS] 크로스 브라우징 시 필요한 css 접두어 webkit, moz, ms, o 의 의미 (0) | 2021.07.23 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 상속(Inheritance) (0) | 2019.12.17 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 버티컬 얼라인(세로 정렬, vertical-align) (0) | 2019.12.16 |
| [CSS] 한 걸음 더 CSS: 코딩가나다 마진 병합(Margin Collapsing) (0) | 2019.12.16 |
댓글