개발일지 210705

학습한 내용

z-index

z축 높이에 영향을 미치는 속성
형제관계에서 absolute나 fixed를 사용하면 레이어가 겹쳐는 상황 발생
주의할 점 : z축에 있다 (3차원적인 특징을 가진 포지션에서 사용가능함)



*형제관계에 따른 포지션 속성값

• 첫번째로 나오는 형제의 포지션이 2, 3차원인지에 따라서
  레이어가 겹칠지 안 겹칠지 결정됨
• 큰 공간은 2차원 그 안 작은공간 2,3차원을 사용
• 모두 다 3차원이라면 레이어가 겹치게 됨
• 형제관계 따른 경우의 수 16가지!
  (fixed를 제외 9가지)

float

• 공간을 만드는 태그는 block 속성을 가지고 있음
  (자동 줄바꿈이 된다는 뜻)
• 선택한 영역을 float으로 띄운 다음 정렬!
• float을 마지막으로 사용한 영역 다음에 clear 사용
  clear -> float 기능을 끈다라는 의미
• float과 clear는 악어와 악어새같은 듀오!
  
  
  
  float tip!
• 고정값을 가진 float의 사용한 영역의 부모의 크기가 가변값이면 안됨
  고정값을 써야 레이어가 틀어지지 않음!
• 부모의 width값은 float 영역보다 같거나 커야함
• 가변값을 가진 float이라면 부모의 크기 영향 없음
• float을 사용한 영역은 부모에게 영향을 주지 않음
• float에서 postion은 relative와 static을 사용해야함
  순수 3차원인 absolute 와 fixed는 사용할 수 없음

overflow

• 박스 영역을 넘어선 오브젝트를 감출 때 사용
• 감춰진 내용을 볼 땐 overflow-x or y : sroll
• float과 결합해서 사용가능
• hidden을 사용하면 부모의 높이값이 인식됨

flex

• float의 발전된 개념, 배치작업을 할 때 사용

flex-direction :
 row (기본값) x축으로 정렬 굳이 설정안해도 됨
 column은 y축으로 정렬
 row-reverse 역순 x축 정렬
 column-reverse 역순 y축 정렬

flex-wrap

• nowrap
  부모의 영역에 맞게 크기를 리사이즈해줌
• wrap
  자식들의 크기가 부모보다 클 경우
  자동으로 줄바꿈현상 있음

flex-flow

• direction과 wrap를 동시에 입력할 때 사용

flex의 정렬

• justify-content x축 정렬

justify-content :
flex-start x축 정렬 왼쪽
flex-end x축 정렬 오른쪽 
center 가운테 
space-between 영역마다 균일한 간격 
space-around 영역마다 균일한 간격 + 바깥쪽 공백

• align-item y축

align-item :
flex-start 상단부분 위치
flex-end 하단부분 위치
center 중간
baseline 영역 밑 부분 라인을 맞춰 정렬

중앙정렬 하는법

• x축 중앙정렬
  margin : 0 (상하) auto(좌우) ;
  auto 자동으로 맟춤
  
  
  
• position과 결합
  공간 크기를 변경하면 left, margin-left 도 같이 변경해야함
  (relative는 top right bottom left 입력 가능)

 position : relative;
 left : 50%;
 margin left : width의 반 값

어려운 점

진심 헷갈려서 미치겠음.
하나 되면 다른 하나 까먹음 wow

학습소감

밥먹는 시간이랑 수면 시간빼고 코딩과 물아일체해야할 듯.