Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

nomad-programmer

[Programming/HTML|CSS] 중요한 레이아웃 공식 같은 CSS설정 본문

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 키워드를 적용해야 한다.

overflow: hidden; 을 적용하지 않았을 때
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;
}
저작자표시 비영리 변경금지

'Programming > HTML|CSS' 카테고리의 다른 글

[Programming/HTML|CSS] 반응형 웹  (0) 2020.12.20
[Programming/HTML|CSS] 많이 사용하는 StyleSheet 초기화 코드  (0) 2020.12.18
[Programming/HTML|CSS] 동위 선택자의 활용 예시  (0) 2020.08.10
[Programming/HTML|CSS] 웹 개발할 때 유용한 사이트 모음  (0) 2020.08.10
[Programming/HTML|CSS] 애니메이션 속성  (0) 2020.08.07
'Programming/HTML|CSS' Related Articles more
Comments