[문제 상황]
부모태그가 공간을 차지하지 못하고
자식이 부모 공간을 무시.
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;
}
결과창
[해결]
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 |
