- element : html/css 의 구성이 어떻게 되어있는가
- console : javascript ( 기능 구현 )
- network : 서버에 대한 것. 통신방법, 응답코드는 무엇인지..
- 요소가 어디에 있는지 하이라이트 해준다.
- 어떤 css 속성이 적용이 되어있는지 확인 할 수 있고, 변경도 해볼 수 있다.
- html 삭제도 가능하다.
유동적인 레이아웃을 위한 속성
- 안에 들어있는 요소들의 display 속성이 무엇이든지 가로/세로 정렬을 해준다.
- 높이가 다 달라도 세로 방향으로 가운데 정렬을 해준다.
- 중요한점 ! 정렬된 컨테이너에 속성을 줘야한다.
: 해당 선택자에 의해 선택되는 요소가 가지는 자식요소의 정렬을 쉽게 할 수 있음.
<style> body > .flex-container > .s { width: 100px; height: 100px; background-color: rgb(249, 176, 148); } body > .flex-container > .r{ width: 50px; height: 50px; background-color: rgb(50, 100, 200); border-radius: 50%; } body > .flex-container > .d{ width: 150px; height: 200px; background-color: rgb(75, 200, 100); transform: rotate(45deg); } </style> <body> <div class="flex-container"> <div class="s"></div> <div class="r"></div> <div class="d"></div> </div> </body>
- div의 기본값이 display:block 이라서
오른쪽 영역을 다 차지하는 것을 확인 할 수 있다.
- 얘네3개를 유동적으로 하려면 감싸고 있는 박스에
display: flex;
준다.
(rotate는 지웠음)body > .flex-container { top: 50%; width: 100%; display: flex; position: absolute; transform: translateY(-50%); }
display: flex;
을 적용하니display:block;
속성이 사라지고
유동적으로 옆으로 쌓이는 걸 확인 할 수 있다.
body > .flex-container { top: 50%; left: 0; width: 100%; position: absolute; background-color: rgb(255, 214, 254); transform: translateY(-50%); display: flex; }
- 이걸 기본 style속성으로 가지고 여기에 속성들을 추가하면서 설명하겠음.
: 내부 자식 FLEX 방향
: 가로방향으로
flex-direction: row;
적용- 변화가 없는 걸 확인할 수 있는데
flex-direction
의 기본값은row
이기 때문이다.
: 세로 방향으로
flex-direction: column;
을 적용하니 세로정렬이 된 것을 확인 할 수 있다.- 이 박스 하나가 한줄을 다 차지하지 않고 자기 자신만 차지하게 되는 것을 볼 수 있다. 즉 display:block 속성이 사라진 것.
: 가로 역방향으로
flex-direction: row-reverse;
첫번째의 박스가 맨 오른쪽으로 붙는 것을 확인 할 수 있다.
: 세로 역방향으로
flex-direction: column-reverse;
첫번째의 박스가 맨 아래에 붙는 것을 확인 할 수 있다.
: flex-direction과 수평한 방향에 대한 정렬
- 정렬축과 flex-direction 이 수평하다 라고 이해하자.
- !! reverse와 다르다 !!
flex-start
은 왼쪽 정렬자체를 끝에 하는것이다.
: 시작점 정렬
: 가운데 정렬
:끝점 정렬
flex-direction: row;
,justify-content: flex-end;
row로 인해 가로로 정렬이 되었고 flex-end로 인해 row와 수평하게 끝점 정렬이 되었다.
flex-direction: column;
,justify-content: flex-end;
: flex-direction과 수직한 방향에 대한 정렬
: 시작점 정렬
: 가운데 정렬
:끝점 정렬
: align-items 방향으로 늘인다.
- 각 도형의 div에 높이를 없애면 원래는 사라져야하는데
stretch
을 사용하면 사라지지 않고align-items
의 방향으로 늘어난다.
flex-grow: 1;
flex-shrink: 1;
/ flex-shrink 와 flex-grow 의 기본값은 0.
3개의 div 중 중간 div에만 shrink 와 grow 값을 1 주게 되면 간격이 벌어진다.
flex-direction: row;
,justify-content: center;
,align-items: center;
1개에 대한 요소 가운데 정렬
top : 50%
,left : 50%
,transform : translate(-50%, -50%)
2개 부터는 가운데 정렬
display:flex
justify-content
align-items
을 잘 사용해야한다.