Programming/HTML|CSS
[Programming/HTML|CSS] 중요한 레이아웃 공식 같은 CSS설정
scii
2020. 8. 11. 01:59
위치 관련
position 속성
* 자손의 position 속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용해야 한다.
* 자손의 position 속성에 absolute 키워드를 적용하면 부모의 position 속성에는 relative 키워드를 적용해야 한다.
float 속성
* 자손에 float 속성을 적용하면 부모의 overflow 속성에는 hidden 키워드를 적용해야 한다.
위의 예를 보듯이 자식이 float속성을 지녔을 때 부모는 overflow 속성의 hidden을 가지고 있어야 제대로 나오는 것을 확인할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body > div {
overflow: hidden;
border: 3px solid yellow;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
float: left;
background-color: red;
}
</style>
</head>
<body>
<div>
<div class="box">1</div>
<div class="box">2</div>
</div>
</body>
</html>clear 속성에 both 키워드를 적용해도 마찬가지 기능을 수행한다. 하지만 현대에는 overflow 속성을 더 많이 사용한다.
레이아웃을 구성할 때 가장 많이 사용하는 공식이다. 이 방법을 One True Layout 방식이라고 부른다.
글자 생략
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}