$$config title: 예습자료 keywords: - IT $$ # flex ## flex 미리보기 - 개념 : [웹2 display: flex 미리보기](https://kimhyeji324.tistory.com/244)
## flex와 inline-block - [block](https://codepen.io/kimhyeji324/pen/gOdPZqz) - [inline-block](https://codepen.io/kimhyeji324/pen/wvEMZWp) - [flex](https://codepen.io/kimhyeji324/pen/rNZxPae?editors=1100) - [부모엘리먼트 넓이 < inline-block 엘리먼트 총 넓이](https://codepen.io/kimhyeji324/pen/eYLJxzz?editors=1100) - [부모엘리먼트 넓이 < flex 엘리먼트 총 넓이](https://codepen.io/kimhyeji324/pen/BaOjEzm?editors=1100) ```html 1.내가 한줄에 같이 나오도록 원하는 태그 부모엘리먼트에 display: flex를 적용해야 한다. 2.flex-item은 inline-block이랑은 다르게 여백이 생기지 않는다. 3.display: flex를 적용한 태그를 flex-container라고 부른다. 4.flex-container에 자식태그를 flex-item이라고 부른다. ``` ```html

``` ```css section { display: flex; } ```
## flex-item 가로정렬 - [justify-content](https://codepen.io/kimhyeji324/pen/OJoMGXx?editors=1100) - [text-align을 사용할 수 없는 flex-item](https://codepen.io/kimhyeji324/pen/KKxVJYN) ```css [flex-item 가로 정렬 속성] /*flex-item은 text-align을 사용해서 가로정렬할 수 없다.*/ - justify-content : flex-start; - justify-content : center; - justify-content : flex-end; (left, right, flex-생략가능) ```
## flex-item 세로정렬 - [align-items](https://codepen.io/kimhyeji324/pen/OJoMqJP?editors=1100) - [flex-item높이를 최소화 시키는 align-items](https://codepen.io/kimhyeji324/pen/qBMbwNd?editors=1100) ```css [flex-item 세로 정렬 속성] - align-items : flex-start; - align-items : center; - align-items : flex-end; (top,bottom은 사용할 수 없다.) (flex- 생략은 가능하다.) ```
## flex높이공유 - [flex-container 높이를 상속받는 flex-item](https://codepen.io/kimhyeji324/pen/MWqKxKE?editors=1100) - [높이 공유하는 flex-item형제들](https://codepen.io/kimhyeji324/pen/oNPbONX?editors=1100)
## flex줄바꿈 - [flex줄바꿈](https://codepen.io/kimhyeji324/pen/xxaZeOx) ```css [flex-wrap 기본값] flex-wrap: nowrap; ```
## 찌그러지는 특성을 가진 flex-item - 수업codepen : [flex-container가 고정px일때](https://codepen.io/kimhyeji324/pen/KKxpaQr?editors=1100) - 수업codepen : [flex-container가 %(max-width)일때](https://codepen.io/kimhyeji324/pen/NWLrbYm?editors=1100) - 수업codepen : [flex-shrink](https://codepen.io/kimhyeji324/pen/poObNqJ?editors=1100)
## flex개구리 - 관련사이트 : [flex개구리 사이트 이동하기](https://flexboxfroggy.com/#ko) - 정답 : [확인](https://codepen.io/khjsbs324/pen/YzLaqZP?editors=1000)
## flex-grow - 수업codepen : [flex-grow 개념](https://codepen.io/kimhyeji324/pen/QWVEpYV?editors=1100) - 수업codepen : [flex-grow가 적용된 형flex-item과 동생 flex-item](https://codepen.io/kimhyeji324/pen/NWLrpoz) - 수업codepen : [flex-grow 수치가 1이상일때](https://codepen.io/kimhyeji324/pen/yLxJmzj?editors=1100) - 수업codepen : [하위요소 크기에 영향 받는 flex-gorw](https://codepen.io/kimhyeji324/pen/PodzMBm?editors=1100)
## 화면 해상도 - 해상도 통계 확인 사이트 : [gs.statcounter](https://gs.statcounter.com/) ```html 눈 앞에 보이는 실물 모니터 사이즈 ```
## flex 활용 마켓컬리 탑바제작 - 수업codepen : [space-between](https://codepen.io/kimhyeji324/pen/zYJKxOa) - 수업codepen : [width: 130px](https://codepen.io/kimhyeji324/pen/ExegaYp) - 수업codepen : [flex-grow: 1](https://codepen.io/kimhyeji324/pen/xxaEKBd)
## flex-direction: column예제 - 수업coodepen : [g마켓 세로형 2차메뉴 제작](https://codepen.io/kimhyeji324/pen/qBMaEWL) ```css [flex-direction 기본값] flex-direction: row - flex-item들은 한줄에 하나씩 나온다. ```
# absolute ## position 기본값 ```css /*아무 효과도 없다.*/ position: static; ```
## position: fixed [화면 원하는 위치에 고정 시켜주는 역할] ```css /* absolute와 전부 동일하지만 스크롤을 따라다니는 태그로 만들어준다. 특징과 사용방법은 absolute와 전부 동일하다. */ position: fixed; ```
## absolute - 수업codepen : [absolute적용 전](https://codepen.io/kimhyeji324/pen/YzOzKoV?editors=1100) - 수업codepen : [absolute 적용 후, 넓이가 사라지는 이유](https://codepen.io/kimhyeji324/pen/vYzYBag) - 수업codepen : [absolute 적용 후, relative 적용전 body넓이 상속](https://codepen.io/kimhyeji324/pen/JjajPzG?editors=1100) - 수업codepen : [absolute 적용 후, relative 적용전 위치속성적용](https://codepen.io/kimhyeji324/pen/BaOaBgx?editors=1100) - 수업codepen : [absolute 적용 후, relative 적용](https://codepen.io/kimhyeji324/pen/LYJYYPb?editors=1100)
## absolute (z축) - 수업codepen : [absolute적용 전](https://codepen.io/kimhyeji324/pen/gOdOBxL?editors=1100) - 수업codepen : [absolute적용 후, z축 순서](https://codepen.io/kimhyeji324/pen/QWVWZMa?editors=1100) - 수업codepen : [relative적용과 특징](https://codepen.io/kimhyeji324/pen/KKxKGGB?editors=1100)
# float ## float을 사용하는 이유 ```html 1. flex를 사용하지 못하는 경우가 많다. 2. flex를 사용해도 되지만 float을 선호하는 경우도 많다. ```
## float 기본값 ``` float: none; ```
## float 적용전 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/jOvOQwJ?editors=1100)
## float 문제점 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/poOoQwm?editors=0100)
## float 문제 해결방법 - 수업codepen : [해결방법예시](https://codepen.io/kimhyeji324/pen/yLxLQXd?editors=0100)
## float 개념 - 수업codepen : [열기](https://codepen.io/kimhyeji324/pen/KKxKrmY?editors=1100)
## float 문제점 해결 - 수업codepen : [인접동생이 float형과 높이가 같을때](https://codepen.io/kimhyeji324/pen/BaOywwQ?editors=1100) - 수업codepen : [인접동생이 float형과 높이가 다를때](https://codepen.io/kimhyeji324/pen/ExeawMz?editors=1100) - 수업codepen : [인접동생에 clear속성을 적용했을때](https://codepen.io/kimhyeji324/pen/abazLMg?editors=1100) - 수업codepen : [인접동생이 inline인 상황에 clear속성을 적용했을때](https://codepen.io/kimhyeji324/pen/xxabXBv?editors=1100) - 수업codepen : [마지막 동생이 block인 상황에 clear속성을 적용했을때](https://codepen.io/kimhyeji324/pen/gOdbGEm?editors=1100) - 수업codepen : [가상요소 활용하여 clear속성을 적용했을때](https://codepen.io/kimhyeji324/pen/JjaorVP)
## float 중앙정렬 - 수업codepen : [block](https://codepen.io/kimhyeji324/pen/yLxyPvW) - 수업codepen : [article태그에 absolute 적용](https://codepen.io/kimhyeji324/pen/yLxyPvW) - 수업codepen : [article태그에 absolute 적용 후 top: 0](https://codepen.io/kimhyeji324/pen/yLxyPvW?editors=1100) - 수업codepen : [article태그에 absolute 적용 후 left: 50%](https://codepen.io/kimhyeji324/pen/ExejNyL?editors=1100) - 수업codepen : [absolute 중앙정렬 원리](https://codepen.io/kimhyeji324/pen/ExejgBo?editors=1100)

게시글 상세