[입문] HTML CSS - flexbox , grid , 반응형 디자인의 모든 것 !

먼저 < flex > 에 대해 알아보자

 

< flex 사용법 :  빈틈없이 정렬  / 1차원 >

ㅇ container :  부모에 쓰는 속성

display : flex ;

1) flex-direction : 주축을 바꾼다. 

ㅡ colume 세로, row 가로 , reverse 거꾸로 !

2) flex-wrap : 묶음 , 한줄에 할지 여러 줄로 나눌지 선택한다

ㅡ nowrap 한줄 , wrap 여러줄 , wrap-reverse 여러줄 기준 반대로 배치

3) flex-flow (shorthand) : 단축 속성

ㅡ flex-flow : row wrap;

flex-flow: column wrap;

 

4) justify-content : 줄의 간격 자동맞춤 ( 줄에 컨텐츠 간격)

ㅡ flex-start : 출발 하는 위치에서 시작 ( reverse 는 반대에서 시작)

ㅡ flex-end : 주축이 끝나는 위치에 정렬된다

ㅡ center : 가운데

ㅡ space-between : 가장자리 붙고 중간 사이 간격 자동 정렬

ㅡspace-around : 가장자리 떨어지고 중간사이 간격 자동정렬

 

5) align-items : 교차축을 기점으로 정렬 ( 한줄)

ㅡ center : 중간 

ㅡ flex-start : 교차점의 시작점 

ㅡ flex-end : 교차점의 끝점 

ㅡ strecth : 아이템이 수직축의 방향으로 쭉 늘어난다.

6) align-content : 교차축을 기점으로 덩어리 정렬 (여러줄) flex-wrap

ㅡ center : 중간 

ㅡ flex-start : 교차점의 시작점 

ㅡ flex-end : 교차점의 끝점 

---

 

ㅇ  item : 내부에 쓰는 속성 

1) order : 정수 사용 , 정렬순서는 오름차순이다. 같은 값은 소스 코드의 순서대로 정렬된다,

ㅡ 눈에 보이는 순서에 영향을 준다. 

ㅡ -1 제일 앞 

 

2) flex-grow : 남는 행의 여백을 분배해서 아이템의 크기가 커진다. 

ㅡ 할당 가능한 공간의 정도를 나눈다. 0~9 가능,  아이템들의 기본값이 0이다.

ㅡ 1 값이면 ( 원래크기에서 늘어난 값이 1로 배정됨)

 

3) flex-shrink : 레이아웃에서 넘칠 경우 넘치는 너비를 분배해서 아이템을 줄여준다.

ㅡ아이템들의 기본값이 1이다. 소수점가능

ㅡ 0 이면 원래 크기 유지.

 

4) flex-basis : 플렉스 아이템의 초기 크기 지정 (별도의 width값을 지정한다, 안하면 auto값이 된다.)

ㅡ 가장 유연하다?

ㅡ flex-baisis:auto ;   는  아이템의 width 크기이다.

ㅡ flex-baisis:0;    이렇게 0 으로 아이템의 크기 초기화해서 grow값으로 적용도 가능하다.  ( 컨텐츠 박스 기준으로 계산된다. ) ㅡ 편함

ㅡ  flex-baisis:100px ;  으로 설정하면 100px보다 작은 것은 100px가 되고 ,100px보다 큰 item은 그 크기가 유지된다.

 

 

5) flex(shorthand) : 순서중요함 - grow(초기값 0), shrink(1), basis(auto , em ,rem, %) 3개의 단축 속성

ㅡ flex: 1;  == grow값 1 , baisis 0 으로 적용된다. 

ㅡ flex: 1 50px;

ㅡflex: initial ; = 0 1 auto 와 동일하다. 속성에따라감

ㅡflex: auto ; = 1 1 auto 와 동일하다.

 

6) align-self  : 선택한 아이템 본인에게 적용됨 , 

ㅡ  align-item 의 기본값에서  변경되어 적용된다.

 

---

< grid layout > 에 대해 알아보자  /  2차원

ㅡ 컨테이너로 행과 열을 만들고  내부의 아이템으로 각각의 위치를 잡아준다. 

ㅡ columes 세로 / row 가로/ gutters 공백

* display : grid ;   == 바깥 컨테이너 부모에 grid를 넣고 형제에 위치를 잡아준다.

* 예제

  display: inline-grid;   >>> 하면 컨테이너가 인라인으로 적용됨 ( 부모에 적용하는게 좋음 )

.container {

  border: 5px dashed orange;

  display: grid;

  grid-template-row: 1fr;

  grid-template-columns: 1fr 1fr 1fr;

  width: 150px;

}

 

< Container 에 적용> 부모

1)  grid-template-areas : "영역"    : 명시적으로 표현

ㅡ 중간에 . 을 누르면 빈칸이 된다.

ㅡ 예제

.container {

  border: 5px dashed orange;

  width: 500px;

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  grid-template-rows: repeat(3, 1fr);

  grid-template-areas:

    "hd hd hd hd ."

    "ma ma ma sb sb"

    "ft ft ft ft ft";

}

.item {

  background-color: lightblue;

  border: 3px solid blue;

  font-size: 30px;

}

.header {

  grid-area: hd;

}

.main {

  grid-area: ma;

}

.sidebar {

  grid-area: sb;

}

.footer {

  grid-area: ft;

}

또

  grid-template-columns: 100px 150px 300px;

  grid-template-rows: 1fr 1fr 1fr;

2) row-gap ( grid-row-gap )  / column-gap  : 컨텐츠 사이에 간격넣기

  row-gap: 20px;

  column-gap: 50px;

또는 단축속성

  gap: 20px 50px;

 

3) grid-auto-rows  : 넘치는 그리드에 대해서  암시적으로 높이를 미리 설정함.   

ㅡ grid-auto-columns : 크기 지정이 없을때,  암시적으로  열의 크기나 패턴값을 지정한다.

ㅡ 예제

.container {

  border: 5px dashed orange;

  display: grid;

  grid-template-columns: 100px 150px 300px;

  grid-template-rows: 1fr 1fr 1fr;

 

  grid-auto-rows: 100px;

  grid-auto-columns: 50px;

}

 

4) grid-auto-flow : 아이템이 어떤 방향으로 자리를 잡을 정하는 것 ! 

  grid-auto-flow: column;

ㅡ dense 추가하면 >> 빈 칸의 영역을 다음 숫자가 자리 잡는 다 ! . 

  grid-auto-flow: row dense;

 

5)  grid  단축속성 shorthand

ㅡ grid : row  / column ;   순서로 적어준다 !

  /* grid-template-rows: 1fr 2fr;

  grid-template-columns: 100px 200px; */

  /* grid: 1fr 2fr / 100px 200px; */

  grid: auto-flow 1fr 2fr / 100px 200px;

 

6) justify-content :  메인축을 기점으로 남는 공감 양쪽 간격 지정  , 여러줄

ㅡ align-content :  교차축의 간격 지정 , 여러줄

7) justify-items : 메인축 , 하나의 틀 안에서 하나의 아이템을 정렬 하는것 

ㅡ align-items : 교차축 , 하나의 틀 안에서 하나의 아이템을 정렬 하는것 

8) justify-self / align-self : 해당 아이템만 재정렬

.container {

  border: 5px dashed orange;

  height: 500px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(3, 1fr);

}

.item {

  background-color: lightblue;

  border: 3px solid blue;

  font-size: 20px;

}

.item:nth-child(1) {

  background-color: pink;

  width: 50px;

  height: 50px;

  justify-self: center;

  align-self: center;

}

---

 

< Item 에 적용> 자식 컨텐츠들

1) grid-row-start / grid-column-start  grid-row-end / grid-column-end  

: 아이템 개별 마다 시작구간 ~ 끝 구간 까지 늘릴때 사용함. ( 선에 인식함 1~3 이면 첫째줄,둘째줄, 셋째줄 =2칸이 적용됨)

ㅡ span 2;    :  2 칸 선택  / span 으로 네모 칸 선택 가능함 .

ㅡ -1 부터도 가능함 ( 반대방향 부터 카운팅)  >>> 명시적 grid template 에서만 - 선택 가능함 .

ㅡ  단축사용 가능함

 grid-row: 1 / -1;

ㅡ 예제 1

.item:nth-child(1) {

  background-color: pink;

  grid-row-start: 1;

  grid-row-end: 3;

}

ㅡ 예제2

.item:nth-child(1) {

  background-color: pink;

  grid-row: 1/-1 ;

  grid-column: 1/4;

}

 

 

 

2) gird-area  : 2가지 사용법이 있다.

1. 영역에 단축 속성 / 순서 중요함 

ㅡ grid-row-start / grid-column-start / grid-row-end / grid-column-end  의 단축속성이다. 

  grid-area: 4 / 2 / span2 / -1;

2. grid-area: header;  영역의 이름을 참조 할때 사용함 .

 

3) order  : 초기값0  , 보여지는 항목만 순서 변경하기 .

ㅡinteger 정수 ( 9 ~  -9 등등 ,  0보다 크면 다음 순서로 간다. -1 은 제일 앞 순서로 간다, )

4) z-index : auto , 0~9  ,  3차원 위치 조정하기

 

---

< Grid 단위 > 

1)  fr : 프렉션 

grid-template-columns: 100px 1fr 1fr ;  ( 100px을 뺀 나머지 공간을 1fr씩 나눠서 비율을 갖는다)

2) min-content  ( 가장 최소로 줄어든다. 제일 긴 단어 기준) 

3) max-content ( 컨텐츠 내용의 최대 길이 까지 늘어난다. 나머지는 비율대로 나눠갖는다.)

 grid-template-columns: min-content  1fr 1fr ; 

 

4) auto-fill ( 칼럼의 갯수가 추가로 채워진다 . 반응형일때 유연하게 넣을 수 있다. 컨테이너에 사용가능 )

ㅡ 100px의 칼럼이 쭉 채워진다.  ( 100px 이하는 빈 공간 생김 )

.container {

  border: 5px dashed orange;

  height: 500px;

  display: grid;

  grid-template-columns: repeat(auto-fill, 100px);

  grid-template-rows: repeat(3, 1fr);

}

ㅡ 함수 사용가능하다. minmax(min, max )   ㅡ 컨테이너의 가로에 빈칸이 없이 자연스럽게 채워진다 .  

컨테이너의 최소 100px이하로 채워라

.container {

  border: 5px dashed orange;

  height: 500px;

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

  grid-template-rows: 50px;

}

 

5) auto-fit (  아이템이 작아서 생기는 빈공간을 꽉 채워준다 .) 

ㅡ 크기가 지정되어 있어도  빈 공간없이 아이템을 키워준다 .

 

---

< 반응형 디자인 > 유동적으로 변경되게 만든다,   반대는 < 적응형 디자인 > 각각 따로 웹 페이지를 만든다,

ㅡ 뷰포트 ( 단말기 마다 다른 화면 크기) 에 자동으로 맞춰준다.

1) Media Query - @media  문법  ( type은  all -생략가능 또는  screen 두개 사용 )

ㅡ CSS에서 미디워커리를 따로 만들어줌 .

ㅡ max-width 최대 까지/ min-width  최소 까지 ~ 보여줘 ! 

body {

  background-color: antiquewhite;

}

@media screen and (min-width: 700px) {

  body {

    background-color: pink;

  }

}

body {

  background-color: antiquewhite;

}

@media (min-width: 500px) and (max-width: 700px) {

  body {

    background-color: pink;

  }

}

ㅡ or 또는  , 로 표현

@media (min-width: 500px), (max-width: 700px) {

  body {

    background-color: pink;

  }

}

 

ㅡ 가로모드 

@media screen and (orientation: landscape) {

  body {

    background-color: pink;

  }

}

 

ㅡ 사용방법 2가지  <1. CSS 파일 내부에 적는다 / 2.미디어쿼리 파일을 따로 만든다>

 

 

2)Media Query - breakpoint - 분기점

ㅡ  디바이스가 여러개 일때,  max나 min 중 1가지만 사용 하는게 가독성에 좋다.

ㅡ모바일 퍼스트

모바일 min-width:480px/  태블릿(아이패스)  min-width : 768px    /  피씨 min-width:1024px

.title {

  font-size: 48px;

}

@media screen and (min-width: 480px) {

  body {

    background-color: tomato;

    font-size: 36px;

  }

}

@media screen and (min-width: 768px) {

  body {

    background-color: pink;

    font-size: 24px;

  }

}

@media screen and (min-width: 1024px) {

  body {

    background-color: lightblue;

    font-size: 12px;

  }

}

---

<  display 속성 중의 none 알아보 >

ㅡ inline , inline-block , block , none 

ㅡ display:none ; 코드 상에는 보이지만 화면상에 레이아웃 자체가 안보임

ㅡ visbility:hidden; : 화면상에 레이아웃은 보인다. ( 요소의 자리만 보인다 .)