Front/CSS

[css] float 속성 flex 와 의 차이

오선지♬ 2022. 6. 3. 18:28
728x90
반응형

페이지를 그리다보면 해당 요소를 어느 한 곳에 배치를 시켜야하는, layout을 작업해야하는 일이 많이 생긴다.

float속성의 정의는  해당 html 요소가 다른 주변의 다른 요소들과 자연스럽게 어우러지게 하는 속성인데,

 layout 설정하는데에 많이 사용되고 있다.

layout설정하는데에  flex도 있고 grid 도 있고, 점점 발전된 기술이 나오고 있고, 

개발하는 입장에서 더 편리하고 깔끔한 디자인을 지원해준다고 생각하지만

모든 브라우저가  flex와  grid를 지원하는 것은 아니라서  아직 float 속성이 많이 쓰이고 있다고 한다.

그래서 차이점이 어떤 것인지 감이 오지 않아서 검색을 한 결과 도움되는 페이지들을 같이 첨부한다.

나의 포스팅 : https://imswengineer.tistory.com/106

 

[CSS] div 가로 정렬 하기 -float

태그는 인라인 요소이기 때문에 줄바꿈 되지 않고 가로로 나열된다. 태그는 블록요소이기 때문에 자동으로 한줄을 차지한다. 그러나 태그는 안에 문자만 들어가게 작성하는 것이 좋다. 그래서

imswengineer.tistory.com

 

 

참고 :  http://www.tcpschool.com/css/css_position_float

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

참고: https://jobcoding.tistory.com/95?category=1011893 

 

(CSS) 레이아웃 종류(Float, Flexbox, Grid)

※ 해당 글은 https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525을 참고하여 작성되었습니다. 레이아웃은 웹페이지에서 문자, 그림, 사진을 구성하고 배열하는 일을 말한다...

jobcoding.tistory.com

 

728x90
반응형

'Front > CSS' 카테고리의 다른 글

[CSS] div겹치기  (0) 2022.06.20
[css][bootstrap] 버튼그룹  (0) 2022.06.18
[css] 다양한 버튼 디자인 참고  (0) 2022.05.29
[css] 투명색 코드  (0) 2022.05.17
[CSS] div 가로 정렬하기 - flex  (0) 2022.04.30