CSS flex box의 정의, 사용 방법 & 반응형 웹사이트 (position)

flex box

flex box는 웹페이지를 만들 때 div같은 blocked 태그들의 위치를 자유롭게 조절하게 도와준다.

 

여러가지 기능들을 사용하기 위하여 CSS파일에 미리 flex를 선언해주어야 기능을 사용할 수 있다.

아래의 함수를 원하는 태그에 적용하면 사용 가능

display : flex;

---

flex box 기능 리스트

justify-content = 컨테이너의 위치 간격 등을 조정 = space-evenly, space-around, space-between 등

align-items = 컨테이너의 위치 조절

align-single = 컨테이너의 위치를 무시하고 단독 위치 조정

flex-wrap = 값이 웹페이지 밖으로 넘어갈 때 자동 줄바꿈

flex-difinition = 기준 축을 바꿔주는 기능

---

반응형 웹사이트 = position

각각의 기기에 따라 보여주는 방식을 달리해야 하기 때문에 웹사이트를 반응형으로 만든다.

 

반응형으로 만들기 위해서 기준값인 position을 relative, absolute, fixed 중 하나를 골라 변경한다.

relative : 현재의 컨테이너 장소 기준

absolute : 전체 웹사이트 장소 기준

fixed : 고정, 스크롤을 해도 같이 이동함

 

position의 값을 변경한 후에 컨테이너(박스)위치를 left, right, left-bottom, right-bottom등으로 위치를 조정할 수 있다

 

반응형 웹을 사용하기 위해 사용해야 하는 필수단위

 

기기의 크기에 따라 변경되어야 하기 때문에 절대 px를 쓰지 않는다.

단위는 2개의 종류가 있다.

relative: 상대적

absolute: 절대적

 

자주쓰는 상대적 단위: em :

• PC의 기준 px이 16px인데 만약 2em으로 적용해놓았다면 32px로 자동변환되어 출력됨

 

자주쓰는 절대적 단위: rem :

• 위의 em이 만약 child class에 0.5em을 설정해 놓았다면 32px*0.5 = 16px로 자동으로 출력된다면 rem은 시스템의 px만 고려하여 child, parent class 상관없이 전부 32px로 출력된다.

이를 제외하고 vw(Viewport Width - %로 화면의 가로비율 몇%를 사용할지 정함) vh(Viewport Heigth = width와 동일개념 but 세로) 그리고 %(5em을 설정하는 대신 500%로 대신 설정 가능)를 주로 사용한다.

 

:vw, vh, %