[문제 상황]

부모태그가 공간을 차지하지 못하고

자식이 부모 공간을 무시.

 

text-align.html

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>글씨가 정 중 앙 에</title>
    <link rel="stylesheet" href="text-align.css">
  </head>

  <body>
    <div class="button">
      <a href="#" class="font_big font_italic font_bold font_center">Button</a>
    </div>

<br><br><br>
<!-- span 속성은 display: inline이기 때문에 너비를 가지지 않음.-->
<!-- 감싸는 태그 안에서만 존재가능. -->
    <span class="font_center">CSS 노가다 리얼루다가 홍콩가버려</span>
    <!-- p, h, div는 display: block (영역 너비 가짐) -->
    <p class="font_center"> 얘는 정렬 되는데 ? </p>

    <h2> H2 터줏대감 </h2>
    <div>
      <div class="box red">df</div>
      <div class="box green">ㅇㄹ </div>
      <div class="box blue">ㄹㅇ ㅁㄴ</div>
    </div>
    <h2> H2 아래대감 </h2>
  </body>


</html>
text-align.css
.font_big{
  font-size : 2em;
}
.font_italic{
  font-style: italic;
}
.font_bold{
  font-weight: bold;
}
.font_center{
  text-align: center;
  font-family: 'Malgun Gothic';
}

/* css에 먼저 정의된 순서중 가장 먼저 선언된 것이 나옴. */
.box{
  width: 100px;
  height: 100px;
  position: absolute;
}
/* body의 바로아래 자식 div에 상대 포지션 지정 */
/* 부모 태그가 공간을 차지하게 하고 싶다면? 부모에
height or position:relative 적용 */
body > div {
  /* width: 400px; height: 100px; */
  border: 3px solid black;
  /* position:relative; */
}
.red {
  background-color: red;
  left: 10px; top:10px;
}
.green{
  background-color: green;
  left: 50px; top:50px;
}
.blue{
  background-color: blue;
  left: 100px; top:100px;
}
.button{
  width: 150px;
  height: 70px;
  background-color: "FF6A00";
  border: 10px solid #808080;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #A16931;
}

.button a {
  display: block;
  line-height: 60px;
}

 


결과창

부모격인 h2태그가 공간을 차지하지 못하고 box가 절대경로 자리잡음 (매우 혼란)

 

[해결]

1. 부모 태그에 postion : relative 지정

OR

2. 부모 태그에 height 값 부여

 

둘 중 하나만 해도 해결된다.
부모 사이에 위치하기 시작함 ^ㅡ^

 

원래 CSS는 태그 암기하기 시작하면 끝이없는데 

자주쓰이고 디버깅이 어려운 이런 부분은 별도 정리가 필요해보임

 

다시 콕콕

position absolute 사용시 부모 태그에 height or postion:relative 지정!
저작자표시

'Web' 카테고리의 다른 글

HTTP  (0) 2020.09.18
스타일 적용 우선순위 & n-th selector  (0) 2020.02.20
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client  (0) 2020.01.21
atom display automatically documentation(reference)  (0) 2020.01.16
Postman Post -> Get Redirection Error  (0) 2020.01.09

티스토리툴바