[0407/CSS] overflow 에 대해서 (display:none 와 차이) + BFC

과제는 overflow : hidden 과 display : none 의 차이점 조사인데 어째 하다보니 overflow 까지 공부하고있어서
기록해두기로 했다.

---

overflow 
https://developer.mozilla.org/ko/docs/Web/CSS/overflow

overflow: visible;
/*콘텐츠를 자르지 않고 안쪽 여백 상자 밖에도 그릴 수 있다(튀어 나온다는 말)*/
overflow: hidden;               
/*콘텐츠를 요소의 크기만큼 맞추기 위해 잘라내고 스크롤바를 제공하지 않음
  코드를 사용해 스크롤할 수는 있다*/
overflow: clip;
/*hidden 과 같은데 BFC를 생성하지 않고 코드를 사용한 스크롤도 못함*/
overflow: scroll;
/*콘텐츠 요소의 크기만큼 맞춰서 자르고 나머지는 스크롤 바로 제공*/

overflow-x , overflow-y 로 축 별로 값을 설정 가능

clip, overflow-x, overflow-y 는 IE,오페라,사파리 에서 지원안하니 문서참고

문서, 예제 -> https://developer.mozilla.org/ko/docs/Web/CSS/overflow

overflow - CSS: Cascading Style Sheets | MDN

overflow 는 BFC (Block Formatting Context, 블록서식맥락) 특성을 가지고 있는데

https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context

블록 서식 맥락 - 웹 개발자 안내서 | MDN

문서에 보면 overflow : visible 이외의 값을 넣으면 생성된다고 적혀있다.

또 BFC의 특성으로 자식 float 요소를 자기에게 포함시키는 결과를 발생한다고 한다.

이런 특성으로 overflow:hidden 같은 옵션이 float 과 상호작용 처리나 마진 겹침 현상의 해결방법으로 주로 쓰인다.

overflow : hidden 말고도 display : inline-block 으로 해결하는 등 여러 방법들이 있으니 각자 상황에 맡게 쓰면 되겠다.
float 개념과 float 관련 예제와 해결방법도 적고 싶은데 아직 float 를 잘 몰라서 나중에 추가 하려고 한다.

미래의 나를 위해 추가로 적어두자면 BFC 생성 조건중에 float (none이 아닌 요소) 가 있는데
이건 부모가 float 이면 자식에 float 가 와도 부모의 높이가 무시되지 않는다는 뜻으로 이해하면 된다.

---

overflow : hidden 과 display : none 의 차이 

과제로 돌아와서..  차이가 뭔지 찾아봤을 때 

overflow : hidden -> 컨텐츠가 안쪽 크기에 벗어나면 잘라낸다
display : none -> 레이아웃에 영향을 미치지 않도록 요소의 표시를 해제한다

 

이렇게 2가지가 나오긴하는데 네이버와 다음 사이트에 개발자도구로 어떤 방식으로 쓰이나 찾아보았다.

.nx_kbd

.service_layer

네이버 , 다음에서 display : none 처리한 부분을 1군데씩 찾아봤는데 주로 더보기 , 추가 창 등을 구현해두고
display : none 처리해 둔다음 아이콘(텍스트)을 클릭하면 block 처리되면서 레이아웃에 나타나도록 구현이 되어있다.

 

각 구역마다 h태그에 hidden이 적용되어있음

네이버는 overflow : hidden 을 마진겹침현상을 해결할 때도 쓰고 
주제별로 나눌만한 구역들의 h 태그에 hidden 을 적용했다.
사진은 구별하기위해 absolute 옵션을 해제한 상태고 너비와 높이를 1px 로 설정하고 hidden 을 적용해서
텍스트가 안보이도록 처리했다는 것을 볼 수 있다.

다음도 마찬가지로 h 태그 안의 텍스트를 보이지않게 넣기위해 overflow : hidden 을 적용하거나
마진 겹침을 해결하는데 사용했다.

 

네이버, 다음에서의 overflow : hidden , display : none 활용 결론 

overflow : hidden

              자주 쓰이는 방식(마진해결, float 문제 해결) 이외에도
          웹 접근성을 위해 해딩 태그를 삽입하고 안보이게 하기위해 크기를 1px로 만들어 사용하는 방식으로 쓰인다

display : none
              주로 가상키보드 , 더보기 등등 첫 화면에 나오지 않은 레이아웃이 상호작용해서 나오도록 할 때
              none 을 block 으로 바꿔주는 형태로 쓰인다

 

 

 

잡설
  첨 봤을 때 이해하기 어려웠는데 구글에 나오는 온갖것들을 계속 보니까 조금은 알것같기도 하다..
  혹시 누군가 보시고 잘못 이해한 부분이 있다면 알려주시면 감사하겠습니다.
  그래도 한 번 공부할 때 확실히 해둬야 앞으로 많을 실습에서 써먹을 거라 계속 찾아보고 수정하도록 해야겠다.
  그리고 역시 오늘도 빔캠프가 이해하는데 많은 도움을 줬다 ㅠㅠ 

 하도 마진병합 마진.. 마진.. 계속 보고 쓰니까 git push 할때 origin 대신 margin을 쓰더라..
                   

https://youtu.be/O-n1EjDEuIc

https://youtu.be/c19Mjg-ivxc