오랜만에 웹표준 공부글을 쓴다.
요새 왜이리 공부글이 쓰기 싫은지...ㅜㅜ
휴...반성반성.

 

 


플롯(float)을 줌으로 인해 생기는 변화를 어느순간 없애야 할 때가 있다.


이전 시간에 float을 주고 그를 감싼 부모에 테두리를 주면 테두리가 위로 붙어버리는 현상을 봤다.

다시 잠깐 보자면 이미지와 문장에 각각 float:left;를 주고

그 둘을 감싼 부모에 검은색 4픽셀짜리 테두리를 쳤더니
테두리가 위로 올라가서 붙어버린다. (붙어버린 라인의 두께는 8픽셀)

 

 

 

 

 

이는 아래처럼 이미지에만 float:left; 를 주어 부모에 테두리를 감쌀때 생기는 현상과는 다르다.

 

 

 

왜냐하면 이미지와 문장 모두에 float:left; 를 주게되면 둘다 공중에 뜨면서 테두리가 밑으로 기어들어가기 때문.

 

 


이를 해결하기 위해 플롯클리어시켜야 하는데 플롯클리어시키는 방법은 여러가지가 있다.
이것은 원래 정해져있던게 아니라 많은 사람들이 하나씩 찾아낸 방법으로 조금씩 성질이 다르다.

 

 

 

 

 

오늘은 부모한테 조치를 취하는 3가지 방법을 알아보자.

 

 

1. 부모에 overflow:hidden; 을 준다.

 

이미지와 글을 감싸고 있는 mother에 overflow:hidden;을 준다.

그럼 아래와 같이 자식들이 정신을 차리면서 부모가 자식들을 컨트롤 할 수 있게 된다.

 

 

 

 


이때, 부모에 width값을 따로 주지 않았기 때문에 윈도우창을 늘이던 줄이던 테두리의 가로값은 항상 100%를

가진다. (블럭요소의 일반적인 성질)

 

원래 오버플로어 히든은 높이에 맞춰 자를때 쓰는 속성이다.
하지만 여기서는 그 자를 기준이 없으므로 자신의 속성만 남게되는데 그 속성이 박스에 영향을 미치고
그 영향으로 인해 클리어시키는것.

 

 

 

 

 

 

2. 부모에 float:left;width값 준다.

 

플롯레프트는 width값을 주지 않으면 가능한 범위내의 최소한의 값을 가지는 성질이 있다.
이는 플롯박스라는 성질로 바뀌기 때문인데 이걸 이용해 아래처럼 플롯클리어 시키는것이다.

(만일 width값을 주지 않는다면 아래 3번과 마찬가지의 형태가 된다.)

 

 

 

 

 

 

 

 

3. 부모에 display:inline-block; 을 준다.

 

기존 <div>블럭요소가 2번에서는 플롯의 성질로 변환되었다면 여기선 인라인요소로 변환되면서

2번과 마찬가지로 100%가 아닌 가능한 범위내의 최소한의 값을 가진다.

 

하지만 가로,세로값을 줄 수 없는 일반적인 인라인요소와 다르게 <img>태그처럼 width값과 height값을 따로

지정해줄 수 있게 만든것이다.
이를 이용해 플롯클리어 시키는 것인데 여기에 width값을 주게되면 2번과 같은 효과가 나타난다.

 

 

 

정리하자면 1번은 여전히 블럭박스의 성질이고 2번은 플롯박스의 성질로 변환, 3번은 인라인박스의 성질로

변환된 것.

그러므로 1,2,3 모두 width값을 별도로 주지 않았을때

1은 100%의 자기영역을 차지하고 2,3 번은 자기가 가질 수 있는 최소한의 값을 가진다.

물론 세개에 width값을 지정해 준다면 전부 2번과 같은 결과가 될 것이다.

 

 

 

 

 

=====================================================================================================

 

 

 

그런데 만일 아래처럼 전체의 높이값이 따로 지정되어 있다면 굳이 플롯클리어를 하지 않아도 된다.

 

 

 

 

 

클리어는 높이(height)가 별도로 지정되어 있지않은,

내용의 길이에 따른 높이의 유동성이 있을때 사용한다는 것을 알아두자.

 

 

 

 
 
 
 

 

Posted by 두여자 Y&S

댓글을 달아 주세요

  1. monica

    너무....설명을 잘해주셔서 해외에서 웹시작하는데 많이 도움이 되어요 감사합니다 :)

    2013.09.06 13:59 [ ADDR : EDIT/ DEL : REPLY ]
  2. 헤븡

    너무 좋은 설명 잘 봤습니다 :)
    근데 중간에 오타가 하나 있는 것 같아요~
    조취 -> 조치

    2013.11.18 14:22 [ ADDR : EDIT/ DEL : REPLY ]
  3. 뭔가 무서운 인형뽑기라는게 제목같다는 느낌을 받는건 저뿐....인지 -_-

    2013.11.19 10:52 신고 [ ADDR : EDIT/ DEL : REPLY ]
  4. 박들리

    너무 잘보고 가요~! 글을 잘읽다가 오타를 찾았는데 좀 민망시럽네용ㅠ
    살색박스 4번째 줄 1은 100% ㅈㅈ영역...
    무튼 다른글들도 볼게 많네요~!!

    2015.12.17 10:16 [ ADDR : EDIT/ DEL : REPLY ]