CSS도 분명히 프로그래밍 되어있을 텐데

작성하다보면 이렇게 되야 하는게 맞는데 예상하지 않은 결과가 나올 때가 많다.

우리가 잘 모르는 요소들이 많기 때문인데 이런 원리를 잘 설명해논 글을 찾기가 쉽지 않다.

css문서를 직접 찾아서 자세히 읽어보면 나와있겠지만 언어의 압박과 그 분량이 너무 많다.

시간나면 읽어보는게 좋지만 css를 깊이 이해하는 것은 항상 우선 순위에 밀려나 있다.


그 동안 이상하게 생각해왔던 것들 중 원리를 이해하고 풀린것 중 하나가 마진의 작동 방식이다.


1. 마진은 마진끼리 영향을 주지 않는다.

2. inline 타입은 마진이 적용되지 않는다.

3. inline-block은 부모 태그를 마진으로 밀어낼 수 있다.

4. block타입은 부모 태그 자체를 마진으로 밀어내지 않는다.

   하지만 마진이 부모에 포함된 solid한 객체를 만나면 밀어낸다.

   border나 padding이 solid한 것에 포함된다. 

5. overflow: hidden 인 부모도 margin collapsed 가 안된다.


아직 그런 적이 없지만 5번때문에 왜 안되는 지 몰라서 개고생하면 참 억울 할 것 같다.

solid하다는 개념도 참 애매하다.

단순히 W3로 css를 공부했다면 이런 개념을 알기 어렵다.

왜 이렇게 직관적으로 파악하기 힘든 개념이 만들어졌는지 모르겠다.




'CSS, HTML' 카테고리의 다른 글

input tag는 before가 안먹는다.  (0) 2018.10.10
css 마진의 비밀  (0) 2018.09.16

table cell 안에 가로 숫자 바를 넣고 싶다.

div 안의 div의 넓이를 조절해서 바를 표현한다.

여기까지는 아무런 문제가 없다.

그런데 바를 우측 정렬을 하고 싶다면 문제가 발생한다.


<!doctype html>
<html>
<head>
<style>
table {
width : 20rem;
border-collapse: collapse;
}
td {
border : 1px solid black;
height : 1.3rem;
text-align : center;
}

td:nth-of-type(1) {
width : 33.3%;
}
td:nth-of-type(2) {
width : 33.3%;
}
td:nth-of-type(3) {
width : 33.3%;
}

.depthBar {
text-align : left;
padding : 3px 5px;
}
.depthBar > div {
display : inline-block;
line-height: 1rem;
width : 2%;
background-color: blue;
overflow: visible;
}

</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td><div class="depthBar"><div>12345</div></div></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><div class="depthBar"><div>1234</div></div></td>
</tr>
</table>
</body>
</html>


우측정렬이라서 글자를 우측에서 우측부터 찍을 줄 알았다.

그러나 글자는 우측 끝을 맞추려고 시도할 뿐

좌측부터 찍힌다.

즉 공간이 충분하지 않으면 좌측으로 튀어나가는 것이 아니라 우측으로 튀어나간다.

어찌보면 당연한 것 같기도 하지만

우측정렬을 했는데 글자가 우측으로 튀어나가길 바라는 사람이 있을까?


바안에 글자를 넣어서 해결하려는 게으름이 애초부터 잘못된 개념이라고 생각할 수도 있다.

하지만 이런 게으른 발상이 코드양을 줄려준다면 좋은 것 아닌가?


물론 이 문제는 다른 방향으로 좀 더 설정을 많이 해주면 해결 된다.




+ Recent posts

티스토리 툴바