[배운내용]

Z-index

position태그와 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정하는 태그이다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.
z-index를 적용하지 않은 상태는 값이 0이라고 보면 된다. 그래서 z-index를 사용해서 값을 넣으면 0보다 크기 때문에 해당 요소가 값이 지정되지않은 요소를 덮어 위로 올라온다. 3차원적인 특징을 가진 absolute,fixed와 2,3차원특징을 모두 가진 relative에서 사용할 수 있다.

큰공간을 잡아야하는 경우는 2차원으로 하는 것이 좋다. 3차원으로 할 경우 레이어가 겹치는 경우가 발생한다.

Float : 수평 정렬

해당 요소를 띄운다는 개념으로 3차원 특징에서 z열을 다르게 하는 소스이다.
기본적으로 두개의 영역을 만들어냈을 때 줄바꿈되어 정렬되는데 이를 같은 선상에 놓고싶을 때 하나의 요소를 float,즉 띄운다라고 생각할 수 있다. 이때는 두 요소가 겹쳐지게 되며, 정렬을 하기 위해서 속성값에 left, right로 정렬할 수 있다.

float를 사용할 때는 반드시 clear와 함께 사용해야한다.(악어와 악어새관계) float은 같은 선상에 놓고싶을 때 사용하고, clear는 플롯의 기능을 여기까지라고 표시해서 끄는 것이다.
{clear:both;}로 하면 left와 right 모두 끄겠다는 의미이다.

플롯 사용시 주의점

• (1) 고정값을 가진 부모의 영역 안에 프롯을 사용해야 레이어가 깨지는 것을 방지할 수 있다.

  영역들의 크기를 px값이 아니라 %(가변값)로 지정하면 부모가 고정값을 가지지않아도 브라우저의 크기를 바꿔도 레이어가 깨지지않는다. 드문케이스이다.

  부모의 width값은 플롯을 지정한 세 개의 width값의 합보다 같거나 커야한다.

• (2) 부모의 높이 값이 없을 때 자식의 높이 값으로 적용된다는 position특징이 있었다. 그러나 자식이 3차원인 경우 부모의 높이 값이 없을 때 부모에게 높이값에 영향을 줄 수가 없다. 즉,플롯을 사용한 영역은 그 영역의 높이값이 부모에게 영향을 주지 않는다.

• (3) 플롯을 사용할때 포지션 상태는 순수 3차원의 포지션인 absolute, fixed를 사용할 수 없다. 대신 static, relative 사용한다.

++ footer가 3차원의 요소들과 겹치지않고 제대로 위치하기 위해서는 clear:both;를 사용한다고 했다. 이때 html문서가 길어질수록 footer위의 요소들이 무엇인지 모두 알수 없으므로 관례적으로 사용하는 클래스가 clearfix이며, 이 클래스에 clear속성을 준다.

@html
<div class="clearfix"></div>

@css
}
.clearfix{
	clear: both;
}

Over Flow

• overflow : hidden ;
  영역안에 오버되는 콘텐츠가 있을경우 영역 밖으로 벗어나는 내용을 가린다. 이 요소를 사용하면 3차원 자식의 높이값이라도 부모에게 영향을 줄 수 있도록 만든다.

• overflow-y : scroll ;
  y축으로 오버되는 내용을 스크롤을 사용하여 볼 수 있게 한다.

• overflow-x : scroll ;
  x축으로 오버되는 내용을 스크롤을 사용하여 볼 수 있게 한다.

Flex

flex로 지정된 요소의 자식들은 모두 x축 정렬이 된다. 정렬은 왼쪽부터 오른쪽으로 정렬된다.

flex-direction

: 정렬 방법을 바꾸는 방법

• flex-direction: row-reverse;
  역순으로 오른쪽 정렬이 된다.

• flex-direction: column-reverse;
  역순으로 y축 정렬로 바뀐다.

flex-wrap

• flex-wrap: nowrap; 기본값이며 자식들의 width크기가 부모의 크기보다 클때 자동으로 리사이징해서 부모의 영역안에 들어갈 수 있게 한다.

• flex-wrap: wrap; 자식들의 width크기의 합이 부모의 크기보다 클때 자식들의 크기는 그대로 두고 줄바꿈현상이 일어난다.

justify-content

: t x축 정렬을 위한 태그

• flex-start;
  왼쪽 시작 지점에서부터 정렬
• flex-end;
  오른쪽 끝지점부터 정렬
• center;
  가운데 정렬
• space-between;
  양쪽 정렬을 하여, 요소 사이에 빈 공간을 만든다.
• space-around;
  양쪽 정렬이지만 양끝에 공간을 조금 남겨둔다.

align-item

※ flexbox 도움되는 사이트
https://flexbox.help/

중앙정렬

• margin: 0 auto;
  : 블럭요소에서 많이 사용

• left: 50%;
  margin-left: -150px;
  : 요소의 왼쪽 시작점을 기준으로 브라우저의 50% 지점에 위치하게하고, 요소의 width값 1/2만큼 -(음수)값을 준다. 단점은 영역의 크기가 변경되면 margin-left값도 매번 바꿔줘야한다.

※ 중앙정렬공식 참고사이트
https://css-tricks.com/centering-css-complete-guide/

[어려웠던 점]

이전에 배웠던 예를 들면 마진같은 것들이 오늘 배운것들에 언급되니 매칭이 안되었다.

[해결방법]

아무래도 복습이 필요한 것 같다. 그리고 앞으로도 배우는 요소들이 페이지 구성에서 어떻게 이용될지 생각하고 구상해가면서 배워가야할 것같다.

[학습소감]

일주일의 진도가 생각보다 많은 걸 배운 것같다. 앞서 말한 것처럼 복습과 반복이 가장 중요한 것 같다. 오늘은 개발일지를 한번씩 읽어보고 자야겠다.