[백엔드 개발자 부트캠프 '오르미4기'] 8일차 CSS 배우기2

오늘의 학습 CSS 2번째 수업 복습하기!

 

 

 

position

 

: static - 기본값

 

정상적인 흐름 ( normal flow ) 

- html 에서 작성하면 위에서 아래로 작성되는데 그 것이 정상적인 기본흐름!

 

position : relative

 

원래 자신이 있어야 하는 위치 

top: 20px 

얼마나 내릴 것인가 

 

그림과 같이 box2를 내릴경우 box3이 겹쳐져 글자가 보이지 않는다. 

이렇듯 겹쳐서 내려지게 된다!

 

position - absolute : myway

기준점이 relative 와 다르게 부모의 위치에 따라 기준위치가 달라진다.

 

부모 중 absolute은 기본값 즉 static을 제외한 속성을 가진 가장 가까운 부모를 기준 위치로 선정한다.

> 없을 경우 html 루트요소인 html 그 자체를 기준을 잡게 된다.

 

position의 경우 겹쳐야 할 때 주로 사용된다. ex) 모달창, 애니메이션 등

 

 

position : fixed

 

- 해더부분이 스크롤을 내려도 헤더라인이 그대로 유지된다.

 

예를 들면 네이버 검색창이 스크롤을 내려도 위에 유지되는 것 처럼!

 

position : sticky

 

끈적끈적~~~ㅋㅋㅋㅋ

 

조상 - 스크롤 : 가장 가까운 부모의 콘텐츠 영역에 달라붙는다. 

 

* 사용자가 보고있는 뷰포트 기준!

 

z-index

 

static 제외 position 속성이 존재해야한다.

z축 순서결정

- 부모가 자식을 덮을 순 없으나, 자식이 부모를 덮을 수 있다. 

또한, 자식이 부모뒤로 사라지게 가능하다!

 

 

flex

 

flex 가 제일 헷갈렸는데요 ㅠㅠ

 

flex - container

 

flex - diretion 방향의미 / x축과 y축방향을 선택 할 수 있다. 주축에 의해

 

row : 행 column : 열

 

출처 : 위니브

 

row-reverse : 오른쪽에서 위로 

colum - reverse : 아래에서 위로

 

justify - content : 아이템 간격 설정, 주축기준 배열 위치조절

 

space - around : 여백공간

- 여백공간이 앞뒤로 생기기 때문에 중간과 양끝의 공간이 차이가 난다.

 

space-evenly : 똑같이!

- 앞 뒤 공간이 똑같이 생긴다 ㅎㅎ

 

align - items 는 교차축 기준 정렬 

 

* 높이를 정하지 않으면 교차축 끝까지 늘어나기 때문에 높이지정!

 

align -content는 컨테이너 교차축이 여러줄일 때 사용

 

flex - wrap 

 

이렇게 동강? 나눌때 사용된닼ㅋㅋㅋ ㅎㅎㅎ

 

gab : item 사이 간격을 의미한다.

 

 

flex-item 사용하는 속성

flex-basis 요소의 너비를 조절한다 축의 방향에 따라 달라짐 

 

width로 조절하면 되는데 왜 이것을 쓰느냐!

 

width 값으로 조절할 경우 컨텐츠가 길어져도 width 크기설정한 크기로 내보인다.

sssssssss을 입력했을때 이것에 대한 크기만큼 줄거나 늘거나 해야하지만

width은 정해진 크기인 반면,

 

basis을 통해 유연하게 움직인다. row: 가로 column : 세로

 

flex - grow 컨테이너 내부에 할당할수 있는 공간의 정도 지정

grow를 지정할때 1일경우 동일한 크기를 공간 할당을 하지만 

2일 경우 전체 크기 공간의 2배가 아니라 잉여공간이 2배고 

콘텐츠가 가지고 있는 너비는 그대로 둔다!

 

flex - basis =0 정확히 두배로 나눌 수 있다 전체공간으로!!!!!

 

flex - shrink : 아이템 크기를 고정하거나 축소

 

alion - self

flex - item에게 개별적인 속성부여 

 

* 교차축에 의해 개별이동이 가능하다!

 

 

원래 오늘 flex에 대해 공부하다보니 

양이 너무많아 더 자세히 읽어보려 했지만,

 

오늘 과제가 있어 간단하게 읽어보고 다시 과제하러 가야징,,,,ㅠ,,,

 

로그인화면을 css를 적용하여 만들어보는건데

 

처음이라,,, 생각도 많구 그것을 어떻게 적용해야할지 

 

아직까지 헷갈린당,,,ㅠㅠㅠ,,,

 

 

최대한 해보고, 내일 강사님이랑 비교 후 다시한번 만들어 보는 시간을 가져야겠다...

 

또한, 다른 사이트의 로그인화면을 참고삼아 새로운 로그인화면을 만드는 과정까지

 

한번 해볼 생각이다! 

 

오늘도 알찬 공부시간이였고

 

내일도 파이팅!!!!