-1. 먼저 공간이 제한돼야 한다.
-2. overflow:hidden; //감추기
-3. white-space:nowrap; //단어 단위로 줄나눔
-4. text-overflow:ellipsis; //마지막에 ••• 붙이기
(1줄만 쓸 수 있다.)
a-b-c-d a-b-c-d a-b-c-d a-b-c-d a-b-c-d a-b-c-d a-b-c-d a-b-c-d
2. property 'width, height'
-1. auto->inline-block인 경우 최소의 크기, block인 경우 최대의 크기
-2. %->부모 element를 차례로 타고 올라가 크기가 정해진 개체를 기준으로 한다. 단, 부모 요소의 크기가 가변적인 경우 부모 요소의 크기를 최대한으로 하게 하는 영향은 없다. 부모 요소의 크기가 정해지면 그때 %수치를 얻는다.
-3. inherit->항상 부모 요소와 똑같이 설정된다.
<-inline width:auto->
<-block width:auto->
3. overflow가 visible이나 hidden으로 설정된 경우에도 줄나눔은 이루어진다. overflow가 적용되는 경우는 바로 단 하나의 개체가 전체 너비보다 넓을 때이다. 이때에는 줄나눔을 할 수 없기 때문이다.
만약 줄나눔을 없애고 싶다면 width 제한이 없는 wrapper개체를 만든 후 그것을 width 제한이 있는 개체로 다시 감싸면 된다.
4. inline개체는 block개체에 의해 분리된다. inline개체는 글씨 높이(line-height)에 의해 서로 밀어내는 특성이 있는데, 서로 다른 block 개체에 담겨있으면 밀어내는 현상이 일어나지 않는다.
line-height
20px
20px
line-height
default
not interrupted
default
not interrupted
5.width, height는 border를 포함하지 않는다. 하지만 background는 border를 포함해 적용된다.
6. margin이 위아래로 개체를 서로 떼어낼 경우 margin은 겹치며, 더 큰 값에 의해 거리가 정해진다. 만약 그 개체를 담은 개체가 border가 있으면 margin이 겹치지 않는데, 즉 순수히 margin과 margin이 만날 때 겹치게 된다. 이를 collapsed margin이라고 한다.('Block Formatting Context' BFC 참고..이해는 잘 안되지만)
(아래 박스들은 가로 세로 100px이다.)
margin-bottom:50px;
margin-top:100px;
7. display
-1. inline->자식 요소를 단순히 묶기만 하며 사실상 DOM에 영향을 미치지 않는다. span의 기본값이다. 박스모델이 아니므로 크기, 패딩, 마진을 설정할 수 없다.
-2. block->자식요소를 박스모델로 묶는다. 최대한의 너비를 가지며 줄바꿈이 이루어진다. 이를 막으려면 clear 요소를 설정해주면 된다.
-3. inline-block->자식요소를 박스모델로 묶어 하나의 inline개체가 된다. 최소한의 너비를 가진다.
8. display:none; vs visibility:hidden; vs opacity:0;
display:none인 경우 DOM에서 배제되며, 나머지는 화면에 비춰지지 않을 뿐 공간을 차지한다.
9. display:inline-block 일 경우 블락들끼리와 달리 부모 요소를 넘어도 줄바꿈이 일어나지 않는다.
페이스북 댓글