21.07.05

월요일은 왜 이렇게 빨리 오는가ㅋㅋㅋㅋㅋㅋㅋㅋ
7월 둘째주도 화이팅! ;)

• z-index
  z축에 영향을 미치는 속성
  형제관계에서 position:absolute 사용시 둘이 겹치는데 이때 z index사용
  

z-one에 position:absolute사용 z-two가 z-one에 가려짐

똑같이 z-two에 position:absolute사용 z-one이 z-two에 가려짐
이와 같이 3차원 속성(absolute, fixed)사용시 레이어가 겹쳐짐
이때 사용하는게 z-index : 속성값(속성값에는 숫자만 입력하면 됨, 단위는 생략)

z-one에 z-index사용 z-one레이어가 위로 올라옴 z-index이 입력되지 않았을때는 기본값인 0이 적용되었다고 보면됨

만약 z-twodp z-index: 20; 이 입력될시 10<20이니 z-two레이어인 파랑색이 다시 위로 올라가게됨 이처럼 z-index를 사용하여 z축을 조정할수있음

z-index사용시 주의점 : z축은 3차원속성이라서 3차원 속성값을 가지고있는 곳에서만 사용이 가능함(3차원:absoulte, fixed 2-3차원: relative에서만 사용가능함)
static은2차원이기 때문에 z축이라는 개념이 존재하지 않음

※ 첫번째 형제 포지션이 3차원인지 2차원인지에 따라 레이어가 겹칠지 안겹쳐질지가 결정이됨 첫번째 현제 포지션이 2차원일때 겹쳐지지 않음

• float
  css에서 정렬하기 위해 사용되는 속성, float를 그대로 번역하면 뛰우다라는 뜻
  문서에 사진과 그림이 있을 때 그림을 왼쪽이나 오른쪽으로 뛰어서 정렬하거나 각 객체를 오늘쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용
  
  헤더 디브 푸터는 다 y축 정렬로 나타남 공간을 만들때 사용하는 태그 헤더 메인 섹션 디브태그등과 같은 태그는 다 블럭요소로 나타남
  중구난방인 레이아웃을 float작업을 통해 class명에 맞게 배치작업을 한다면
  

.left .center에는 float:left
.right에는 float:right적용
적용하면 footer레이어는 .left .center .right 뒤에 들어가 겹치게 됨
이때 float를 따라오는 속성 clear: both 위에있는 float속성을 꺼주는거임

※float사용시 주의점

사진과 같이 레이어와 브라우저 크기가 맞다았을때 레이어가 틀어지게 되는데 float의 단점임
section을 추가 float의 부모값 지정
float속성이 들어있는 부모의 값이 가변적이면 레이어가 틀어지게 되는데 이때 부모의 고정값을 지정해주면 틀어지지않음(float레이어들의 합과 같거나 커야함) 그리고 부모가 없을때 float속성이 들어있는 레이어 크기가 가변값(px이 아닌 %)일때 또한 레이어가 틀어지지 않음

또한 다른 주의점은 float는 3차원이고 float를 사용한 영역은 그 영역의 높이값이 부모한테 영향을 주지않음
그리고 float와 순수3차원인 absoulte와 fixed는 같이 사용못함 float가 적용되지 않음

√실무팁

float기능을 쓴 태그 밑에 clearfix클래스를 지정해서 css를 꺼주게 되면 다시 footer영역에서 공간이 만들어지게 됨 clearfix를 보고 위로는 float기능이 있고 밑으로는 꺼졋구나라며 유추가능

• overflow
  위처럼 본문글씨가 박스를 넘어가서 다른곳을 침범할때 사용

overflow: hidden을 사용시 짤리는 글자는 사라지게 됨
overflow-y: scroll 사용시 스크롤 생셩 x축으로 사라진 본물을 보고싶을시 overflow-x 적용하면됨

※overflow와 float같이 사용시 자식의 높이 값을 부모가 적용할수있음

• flex
  
  하나의 태그에 클레스를 두개입력하여 하나는 동일한 크기값과 다른하나는 다른 속성값을 입력할수있다
  
  부모의 속성값에 사진에서 짤렸지만 display: flex값을 넣어주면
  위에 사진과 다르게 왼쪽에서 부터 정렬이 가능하게됨
  또한 정렬 진행방향을 바꾸고 싶을때에는 flex-direcxion이라는 속성을 사용하면 변경이 가능flex-direcxion 기본값으로는 row(x축 정렬)가 들어가 있다

flex-direcxion: cloumn으로 바꾸게 되면

보기와같이 축정렬이 달라진다

또한 row-reverse cloumn-reverse를 넣게되면 역순으로 정렬됨
cloumn-reverse적용이미지 reverse는 잘 사용하지않음

flex-wrap:nowrap;

부모값인 container값(1000px)에 따라 자식들의 크기가 달라짐
flex-wrap:rap; 이면 자식들의 크기에 맞춰 부모의 크기가 늘어나게됨

flex-direcxion flex-wrap 동시사용가능은 flex-flow사용하면
flex-flow: row wrap; 이캐 같이 사용할수잇음

• justify-content
  가로 축을 기준으로 좌우에 대한 정렬을 지정가능
  flex-start (default)-요소들을 컨테이너의 왼쪽으로 정렬
  flex-end-요소들을 컨테이너의 우측으로 정렬
  center-요소들을 컨테이너의 중앙으로 정렬
  space-between-요소들 사이에 동일한 간격을 둡니다.
  space-around-요소들 주위에 동일한 간격을 둡니다.
  space-evenly(FireFox Only)-첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이 같도록 항목이 분산 됩니다.

• align-items
  세로 축을 기준으로 정렬을 하게 됩니다.
  flex-start-컨테이너의 최상단으로 정렬 합니다.
  flex-end-컨테이너의 최하단으로 정렬합니다.
  center-컨테이너의 세로 축의 중앙으로 정렬 합니다.
  baseline-컨테이너의 시작위치에 정렬 합니다.
  stretch(default)-컨테이너의 맞게 늘립니다.

https://flexbox.help/ 이 웹에서 시각적으로 레이아웃 적용가능함

• 중앙정렬
  
  margin: 0 auto; (블럭요소에서 사용)

position:relative사용 left적용 하고 자기크기의 반값 빼주기(왼쪽면 기준으로 중앙으로 가기때문)