비전공에서 취업까지!! [26화] float 의 문제점 -입니다.-
Hi im SsunDev
im a boy you are a girl nice to meet you zito
후 유식해보이려고 영어를 써 보았습니다.
영어를 원어민급으로 잘하고싶은 썬데브입니다.
저번에 배웠던 float 의 문제점에 대해서 알아보고자 합니다.
앞서
소오올직히 float는 요즘엔 잘 사용하지 않는 기술이기도 해서 알아만 둡시다람쥐
css13.html, css13.css로
html, css를 요로코롬 만들어봅시다
내용물은 이제 다 아실거라고 믿습니다.
대충 float: left 박스 두개 예쁘게 정사각형으로 만들고 색칠도해주고 선도 만들어주고
두 float박스를 담는 배경도 하나 장만해주고
아실거라 믿습니두!
그럼 바로 alt + b!!
자 잘 만들어진거 같긴 한데 뭔가 이상합니다
각 상자가 400px이고 두개합치면 800px 인데 마진패딩 선언없이 딱붙어있는데..
나머지 200px의 회색 배경은 왜 안보이는거죠?
잘 보시면 이렇게 상자들 뒤에 숨어있는걸 보실 수 있습니다.
첫번째문제는 배경div가 내용물의 box1, box2를 담고있음에도
같은 층에 존재하지 않기 때문에
배경 div가 내용물만큼의 heigth 를 자동으로 갖지 않는다는겁니다.
만약 이렇게 float 아래 부분에 어떤 내용물을 넣고싶어서 추가하면?
이런식으로 실보다 더 얇게 존재는,
하지만 보이지않는 배경 <div id="float-Back"> 아래부분에
float내용물을 피해서 저렇게 내용물이 붙어버리는걸 보실 수 있습니다.
이를 방지하고자 배경에 강제로 높이를 지정해줘버리겠습니다.
이렇게 배경에 강제로 500이란 높이를 주고 alt+b를 확인해보면??
자 드디어! float배경도 보이고 안에 내용물만큼 넉넉한 공간도 확보하고
아래로 내용물이 잘 내련갈걸 볼 수 있습니다!!
와아!!!!!
짝짝짝
해결!
라고 하면 얼마나 좋겠습니까.
이제부터 왜 이렇게 하면 안되는지 설명드리겠습니다..
앞으로 우리가 java를 배우던 쿼리를 배우던 server를 배우던 html을 배우던
이런식으로 강제적으로 width 나 그 밖의 값들을 지정해줄때
직접적으로 값을 때려박는걸 [하드코딩]이라고 합니다.
이 경우 강제적으로 height 를 500px란 데이터로 쥐어줘버렸으니 높이를 하드코딩 해버린것이지요
좋은 개발자라 함은 이런 상황에서 동적으로 코딩을 해야합니다.
동적이라는것은 직접 지정하지않고도 자동으로 변화하는것을 뜻합니다.
상황을 예를들어보겠습니다.
처음 만들때야 box1, box2가 400px이란걸 아니까 저렇게 보기엔 단순하게 저렇게 만들 순 있겠지만
예를들어 나~~중에 회사나 사장님이나 거래처나 각종 우리에게 지시를 내리는 사람이.
??? : "그 우리 box1말이야 너무 임펙트가없어 높이를 한 800px로 므찌게 보이게 해 보자고! "
라고 하면 직접 box1 높이부터해서 배경의 높이까지 계산해야되고,
그 높이만큼 그 아래 오는 데이터들이 밀릴테니 정렬이 깨지고
하여튼 난감한 상황이 발생되게 됩니다.
그래서 저 #float-Back 부분의 높이가 내용물에 따라서 자동으로 늘었다 줄었다하면 얼마나 좋겠습니까?
그래서 되도록이면 개발자는 이렇게 상황에 따라 자동으로 코드가 대응하도록 동적코딩을 해야합니다.
하드코딩을 최대한 피하면 피할수록 좋다는 말이지요!
자 어디
box1 높이에 800줘봅시다!
음... 뭔가 모던아트같기도 하고
투썸플레이스같기도하고...
하여튼 배경높이는 500px 하드코딩이기때문에 1box 300이 더 튀어나와버렸군요...
이를 해결하고자 첫번째로 생각해볼건
배경또한 float를 줘서 같은 층에 존재하면?
배경도 내용물만큼 높이를 자동으로 지닐테니까
내용물이 늘어나면 배경도 늘어나겠구나!!!
자 어디 배경도 float를 줘 봅시다.
동적으로 높이를 가져야 하기 때문에 height 를 지우고 float를 지정해주겠습니다 alt + b!
하 이번엔 그담에 오는 컨텐츠들이 말썽이군요
이 경우엔 그 다음 데이터들도 계속 float등을 지정해주어야합니다.
상당히 코드가 복잡 번거롭 귀찮아집니다.
두번째로는
그 다음에 오는 컨텐츠들에 clear:both; 라는 기능을 주는 방법인데
이는 float속성을 사용했을때, 그 다음에 오는 컨텐츠들은 옆으로 붙기 때문에
float속성의 영향을 받는데 이를 해제한다 라는 뜻입니다.
바로 alt + b!!
오 아이고난! 이 제대로 아래로 왔군요!
그런데 이 경우엔 그 다음 오는 컨텐츠들에 계속 clear:both를 선언해주어야 한다는 단점이 있습니다.
개발자의 관점으로써는 같은 코드를 반복적으로 선언해주는것을 지양해야합니다.
또 다른 방법으로는
자 clear:both 도 주석해주고 , 배경의 float도 주석 해주고!
overflow 를 hidden으로 주는방법입니다!
바로 alt + b!!
오 잘 되는군요???
하지만 이는 overflow 의 재대로된 사용법이 아닙니다.
overflow는 지정해준 요소의 내용물이 만약 요소의 크기이상을 넘어가면 hidden처리한다는 코드인데 이러려고 쓰는 코드는 아닙니다!
그래서 이를 위해
자 이 코드를 복사하여 맨 위에 선언해줍시다!
자 이렇게 .clearfix 라고 class를 지정해주었습니다.
여러개 지정했지만 결국 .clearfix를 지정한것입니다. 가상 클래스 기억나시죠?
.은 class를 지칭하는거 다들 기억나시죠?
이런식으로 배경 박스에 class만 clearfix를 추가해주시면?
alt + b!!!
자 이제 재대로 배경이 선언이 되었습니다..
앞의 여러가지 사례를 들어보았지만 결국 이 하나를 설명하고자 이렇게 길게 글을 쓰게 되었네요 참 ㅋㅋ
저 clearfix 로 선언된것들 하나하나는 뭐.. 저도 깊게는 잘 모릅니다. 그냥 예전부터 사용하던 코드에요!
대략적으로 이해만 하시고 너무 깊게 알필요는 없습니다.
그럼 알 필요도 없는 이 이상한 기능을 왜 공부할까?
아주 오래된 예전 프로젝트를 맡게된다면 이런식으로 float를 통해서 화면 레이아웃을 잡는 경우가 있다고 들었습니다.
이 때 알고는 있어야 아 그런게 있었지? 하면서 찾아볼 수 있겠죠?
오늘 이렇게
float의 문제점에 대해서 알아보았습니다.
요즘은 flex같은 기능들을 사용해서 레이아웃을 잡기때문에 float는 잘 사용하지 않는것을 알아두시고 flex는 나중에 추가로배우기로 하고 이것으로 css를 마치도록 하겠습니다.
html도 css도 제가 알려드리지않은 앞으로 배워야할것이 태산입니다!
프론트앤드 라고 하는것은 이런 html과 css, 그리고 앞으로 배울 javascript 라는 기술을 통해서 이렇게 보이는 부분을 개발하는 직군을 프론트 앤드라고합니다.
이 프론트앤드를 희망하시는분은 여기서 심화로 제가 알려드리지않은 더 많은 기술들을 더 딥하게 익히셔야합니다!
그러나 우리는 백을 지원할것이기 때문에
일단은 백앤드로써 알아둬야할 가장 기본적인것 정도까지만 배워두고
전체적으로 취업까지의 진도가 다 나가면 그 때 추가로 이제 심화과정으로 배워보도록 합시다!
다덜 css 배우느라 수고 많으셨습니다!
