인프런 커뮤니티 질문&답변
작성한 질문수
float 대신 grid와 flex만써도되나요.??
작성
·
5K
1
학원다니면사 웹코딩배우고있는데요 웹페이지제작을할때 float을 쓰기는하는데 활용을 잘못합니다 그리고 grid 랑 flex,가 더좋아보여요 그런데 취업을하고 실무를할때는 float기반으로 코딩을하나여?? float기반으로 레이아웃을 잡는게 일반적이라고 들어서요 flex,grid도 활용이 많이되나요??
답변 1
2
이 질문에 대해서는 브라우저들을 어디까지 대응하냐의 문제에 따라 달라져요.
크롬을 제외한, 파이어폭스,IE,엣지 등의 브라우저는
flex와 grid를 완벽히 지원하지 않습니다.
지원하더라도 최신 버전들만 지원하고
구버전은 지원하지 않아 레이아웃이 깨지구요.
대부분의 웹개발자들은 신기술들이 편하다는 것을 인지하고 있지만 신기술을 바로 사용하지 않는 이유는,
이러한 크로스브라우징에 관한 문제 때문입니다.
내 브라우저에서는 레이아웃이 깨지지 않고 잘 나오지만, 실제 사용하는 다수의 유저들.
즉, 나의 개발환경과 똑같을 수 없는 다양한 브라우저와 버전을 사용하는 유저들의 환경까지 고려하여
개발하려면 브라우저가 완벽히 지원하는 기술들을 사용하는 것이 안정적인 방법이겠죠.
혹은 나는 IE/엣지/파이어폭스/IOS등을 포기하고 크롬만 완벽히 대응하겠어! 라고 목표를 잡고 개발한다던지요.
float의 경우
https://caniuse.com/?search=float
float이라는 css속성은 대부분의 브라우저들이 안정적으로 지원하고 있습니다.
반면에
https://caniuse.com/?search=display%3A%20flex
https://caniuse.com/?search=grid
flex와 grid는 일부 버전은 전혀 대응하지 않는 경우도 있죠.
그렇기 때문에
현업자들은 안정적인 float과 어느정도 대응하고 있는 flex를 적절히 사용하고 있구요.
grid의 사용빈도는 많이 떨어지는 편입니다.
예를 들자면 정부관련 사이트의 경우 아직 IE 9버전을 사용하는 유저들까지 생각해야 하기에 이러한 신기술들은 사용하지 않고
안정적인 기술들 table, float, position을 이용하여 레이아웃을 짜구요
인터랙티브하고 화려한 기술을 사용해서 웹페이지를 구성하는 사이트들의 경우 최신 css기술들을 적극 활용하여 레이아웃을 구성하고 디자인합니다.
실무에서는 못하고 어려워서 포기하면 안됩니다.
해결하기 어려운 부분을 해결해내고 방법을 찾아내야 하거든요.
경험한 바로는 하나의 기술만 사용하는 것 보다.
적재적소에 알맞는 기술을 사용하고 활용하는 것이 진짜 실력이라고 생각합니다.
이런 편리하고 좋은 기술들이 있는데 왜 쓰면 안된다는 거지..? 라는 생각이 드실 수도 있습니다.
그런 의문을 해소하기 위해선
크로스브라우징에 대해서 공부를 좀 더 해보시는 것을 추천 드립니다.
웹개발을 하시면서도 크롬에서 테스트 하던 것들을
IE 구버전이나, 파이어폭스, 엣지에서도 테스트 해보시구요.
can i use 사이트를 항상 참고하셔서 개발하시면 좋을 것 같습니다.
float은 처음 접하면 이해가 어렵죠..
어떤 부분이 어렵고 이해가 되지 않으시는지 말씀해주시면 도와드릴게요.
참고로 실무에선 아직 float과 position을 많이 사용합니다.
일단 자식요소에 float 처리를 하게되면 부모요소의 너비값이 사라지기 때문에
clear 속성을 통해 너비값을 찾아주거나, width를 지정한 뒤 display:block; 속성인지 아닌지 확인하신 뒤 margin: 0 auto;를 해보세요.
그래도 안된다면 만들고자 하시는 레이아웃의 뼈대 소스코드를 보여주시면 확인해보겠습니다.
position의 경우 footer에 absolute를 해야하는 경우가 왜 발생하는지 잘 모르겠습니다..
이 부분은 지금 글쓴이분께서 부모요소와 자식요소의 관계성에 대해 이해가 어려우신 것 같은데..
relative속성인 부모요소의 몸안에서 absolute인 자식요소들이 움직이도록 선언한다는 뜻입니다.
relative는 쉽게말해 자식요소가 뛰 놀수 있는 놀이방같은 개념이라고 생각하시면 되시구요..
그 안에 부모가 absolute일 때 텍스트들까지 absolute를 통해 위치값을 조정해주는 경우는 거의 없습니다.. 그렇게 되면 핸들링 하기 어렵거든요.
우선 어떤 형식을 만들고싶은지 몰라서 설명이 어렵네요
소스코드라도 보여주시면 자세하게 설명해드릴텐데요..
일단 float 은요 float left right 이렇게 쭉정렬되잖아요 그때 가운데 정렬을 할때 부모요소인가 margin auto 를쓰면 중앙정렬이 된다고는하는데 저는 인터넷찾아보고 똑같이해서 정렬이안되더라고요 대충이정도가 flaot 사용이 꺼려지는이유고요 너무 투박하게 정렬된다해야하나요? 하튼 그래요
position 같은경우는 제가알고있는경우가 맞다면 좌표를잡는게어려워요 바로아래 부모자식관계에 있는 요소들에 position을 해주면 어느정도 이용하지만 제가 만약에 시멘틱태그로 배치 구분을 header, main, footer. 이런식으로 3부분으로 나눴는데 저는 header에 position relative을 좌표찍고 footer absolute 해서 footer 부분에 있는 요소들을 위로올리고싶은데 이런 상황에서는 부묘오소 relative 지정과 자식요소들을 어떻게 지정해야할지모르겠어요 그냥 class 주고 하면되는건가요 ?? 어떻게해야하는건지 모르겠네요 그리고 제가 position을 쓸때 relative를 부묘오소에주고 자식요소에 absolute 를 주잖아요 이미지나 배경은 괜찮은데 다수의 text에 absolute 적용해서 올리려고하면 글자들이 다 한곳에 지정방향으로 겹쳐서 text 같은경우는 어떻게 position을잡고 안겹치게올려야할지 모르겠습니다 일단이정도가 제가 float과 position을어려워하는이유에요 진짜 모르겠어요 ㅋㅋ