form태그 method 속성
-get : 데이터를 서버URL 말미에 이어 붙여 숨김 없이 보냄.
서버에 데이터를 요청하고 데이터를 받아오는 역할, 데이터 조회가 목적.
-post : 데이터의 내용을 메세지 Body부분에 숨겨서 보냄.
데이터를 쓰거나 수정, 삭제할때 사용.
flexbox
부모요소인 flex container 자식요소인 flex item이 있음.
부모요소에 display:flex를 써야 사용이 가능하다.
flex container
1. flex-direction: row(가로정렬, 기본값), column(세로정렬), row-reverse(가로 역방향), column-reverse(세로 역방향)
-flex-direction이 row일 경우 :
justify-content: flex-start(왼쪽 끝 정렬) center(가운데 정렬) flex-end(오른쪽 끝 정렬) space-between(시작과 끝을 기준으로 하여 item들을 동일한 간격으로 배치) spaec-around(시작과 끝에 item을 하나씩 두고, 그 사이 남은 공간을 동일한 간격으로 나눠 나머지 item을 배치함)
align-items(flex-direction에서 정해진 방향의 수직방향으로 정렬함): stretch(크기지정이 없을 때 flex아이템을 늘려서 맞춰줌, 기본값) flex-start(수직이 시작하는 부분부터 정렬) center(가운데 위치에 정렬) flex-end(수직이 끝나는 부분부터 정렬)
baseline(글꼴의 기준선인 baseline을 기준으로 flex item들을 정렬함. justify-content와 align-items 둘 다의 속성으로 사용할 수 있음)
align-content(flex item이 여러줄일 경우, flex-direction방향을 기준으로 수직정렬 방법을 결정함, 꼭 flex-wrap: wrap속성이 포함되어야 함) : stretch(기본값), flex-start, center, flex-end
-flex-direction이 column일 경우 : justify-content: flex-start(왼쪽 끝 정렬) center(가운데 정렬) flex-end(오른쪽 끝 정렬) space-between(맨위과 맨아래을 기준으로 하여 item들을 동일한 간격으로 배치) spaec-around(맨위와 맨아래에 item을 하나씩 두고, 그 사이 남은 공간을 동일한 간격으로 나눠 나머지 item을 배치함)
align-items(flex-direction에서 정해진 방향의 수직방향으로 정렬함): stretch(크기지정이 없을 때 flex아이템을 늘려서 맞춰줌, 기본값) flex-start(수직이 시작하는 부분부터 정렬) center(가운데 위치에 정렬) flex-end(수직이 끝나는 부분부터 정렬)
- flex-wrap: nowrap(기본값, 개행하지 않음) wrap(flex아이템을 여러줄에 나열하고 싶을 경우 사용)
- flex-flow: column wrap(flex-direction과 flex-wrap을 한번에 지정할 수 있음)
flex-item
1. flex-grow(flex item의 확장과 관련이 있음): 0(기본값, 1 이상일 경우 flex item의 원래 크기와 상관없이 flex container를 채우기 위해 flex item도 커지게 됨)
2. flex-shrink(flex item의 축소와 관련이 있음): 1(기본값, 0일 경우 flex container크기가 flex item의 크기보다 작아져도 flex item의 크기가 줄어들지 않고 원래 크기를 유지함, 1 이상이면 flex container크기가 작아질 때 flex item의 크기가 flex container크기에 맞춰 줄어듬)
3. flex-basis(flex item의 기본 크기를 결정): auto(기본값, flex item크기가 flex-basis로 할당됨, 남은 크기를 flex-grow에 따라 2:1비율로 나눠가짐) 0(flex-grow에 따라 flex item크기가 2:1:1 비율로 나눠짐) 100px(각 컨텐츠마다 100px을 제외, 총 300px(container길이가 400px이라고 가정했을 때)에 해당하는 값을 제외한 크기를 2:1:1비율로 나눠가짐)
4. flex(flex-grow, flex-shrink, flex-basis를 한번에 설정할 수 있는 축약형, 축약형에서는 기본값이 0으로 일괄 할당되니 주의할 것!)
