본문 바로가기
IT관련/정리

CSS 레이아웃을 위한 FlexBox

by XoX 2020. 5. 31.
728x90

CSS(cascading style sheets)?

웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다.

문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다.

 

HTML을 이용해서 웹 페이지를 제작할 경우

전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만,

웹 페이지의 스타일(작성형식)을 미리 저장해 두면

웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로,

문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.

 

 

 

 

FlexBox관련 정보

https://heropy.blog/2018/11/24/css-flexible-box/

 

CSS Flex(Flexible Box) 완벽 가이드

많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F

heropy.blog

https://blog.naver.com/choolooss/221780039637

 

Css. Flexible Box / Flex (플렉시블 박스 / 플렉스)

#css #css3 #FlexibleBox #FlexBox #flex #플렉시블박스 #플렉스박스 #플렉스​​* Flexible Box La...

blog.naver.com

https://blog.naver.com/bkcaller/221365056484

 

[Flat Design 9] 플렉스 박스 사용하기

반응형 웹 디자인을 구현하는 다른 방법은 '플렉스 박스(Flex Box)'를 사용한 플렉스 박스 레...

blog.naver.com

 

 

 

 

 

게임으로 배우는 FlexBox

 

https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

http://www.flexboxdefense.com/

 

Flexbox Defense

Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

www.flexboxdefense.com

 

728x90
반응형

'IT관련 > 정리' 카테고리의 다른 글

CSS의 display  (0) 2020.06.03
리액트와 SPA  (0) 2020.06.02
이클립스 단축키  (0) 2020.05.24
MVC 접근법  (0) 2020.05.21
인터넷이 동작하는 기본원리(Server-Client)  (0) 2020.05.19

댓글