display 레이아웃을 계속 학습중이다.

1)학습한 내용

• Z- 인덱스

z축에 높이에 영향을 미치는 속성, 속성값으로는 숫자값만 전달하면된다

숫자에는 단위가 생략되고 z인덱스가 적용되지 않은 최초의 상태는 0이다.

z-index는 3차원적인 속성을 갖고있는 포지션값에서만 적용이 가능하다

3가지 3차원속성을 가진 속성값( Relative fixed absolute )

형제관계의 포지션속성값에따라 어떻게 나타날까

첫번째 형제코드가 2차원인지 3차원인지에 따라서 레이어가
겹칠지 안겹칠지 결정된다.

안방이나 거실같은 큰공간들을 만들때는 2차원을 주로 사용한다
Static, relative 같은

그 이유는 양쪽으로 겹치는 현상이 일어나기때문에

• Float

Float는 콘텐츠를 배치하고 지정하는 데 사용된다. 예를 들어 이미지가 컨테이너의 텍스트 왼쪽에 떠있게한다.

특정오브젝트를 브라우저기준 왼쪽끝 오른쪽끝으로 배치하는방법

Float:left, Float:right

공간을 만드는 태그들은 모두 블록요소를 가지고있다.

Float 이 적용된대상은 Float 의 뜻대로 공중에 띄운다

그러니까 일부 3차원적인 성질을 가지고 있기때문에 밑에 배치된 파란색 박스가 핑크박스와 겹쳐질수있다.

이때 이것을 방지할수있는것이

" Clear: both "

Float 를 사용하다보면 다같이 뜨기때문에 다른 값이 내가원하는위치에서 벗어날수있다.

이 때 Clear: both로 Float 의 기능을 꺼둘수있다.

Float 의 사용주의점

첫번째 주의점

Float 을 사용하게되면 레이어를 줄였을때 레이어가 틀어지게된다. Float를 사용할때 부모는

가변값이아니라 항상 고정된 값인 부모를 가져야한다.

예를들어 이전에 부모태그가 'body'태그 였다면, 새로운 'section'태그를 만들어 float태그를 넣고 section값의 부피를 설정해준다.

부모가 가변값일때 자식이 가변값이면 틀어지지않는다

즉 부모= 가변값 자식 = 가변값 =문제없음

부모 = 가변값 자식 = 고정값 = 틀어짐

부모 = 고정값 자식 고정값 = 문제없음

부모의 width값은 그안에잇는 레이어의 합보다 크거나 같아야함

두번째 주의점

Float을 사용한 영역은 그 영역의 높이값이 부모에게 영향을 주지 않는다.

Float 은 포지션상태가 순수3차원상태를 사용할수없다.

Float 을 사용할때 실무 팁

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

.clearfix{ clear: both}

를 사용하면 이 이전에는 float값이
이 이후에는 float값이 적용되지않는것을 구분할수있다.
실전에서 용이함

또 다른 실무 팁

• Over flow

박스안에 P태그로 글을 적었는데 글자가 박스를 벗어나면

Overflow: hidden

을 사용해서 벗어난 만큼 숨길 수 있다.

그리고 숨긴부분도 보고 싶다면

Overflow-y:scroll

을 사용해 y축 스크롤로 바꿀수있다
(x축도 사용가능)

평상시 부모와 자식이 있을때

자식이 float 값을 가지고있으면 부모의 높이값에 영향을 줄수 없다 하지만 부모가 overflow:hidden값을 가지고 있다면
자식의 높이 값이 부모의 높이 값에 영향을 줄 수 있다.

• Flex

좀더 효율적으로 웹사이트 레이아웃 작업을 할수잇도록

float의 발전된 모습이다.

float이랑 다른점은 float에비해 제한사항이 적다.

flex가 적용된 부모의 자식들은 자동적으로 왼쪽부터 x축으로 정렬된다.

Display: flex;

이 방향을 바꾸고 싶다면

Flex-direction: row

x축으로 정렬시킬때 사용되는 속성값

Flex-direction: column

y축 정렬로 바뀐다.

Flex-direction: row-reverse

역순으로 오른쪽에서부터 정렬

Flex-direction: column -reverse

마찬가지 반대로

Flex-wrap: nowrap

부모의 영역을 벗어나지않고 부모의 영역안에서 자동으로
리사이즈 하게된다.

Flex-wrap: wrap

부모의 크기보다 자식의 크기가 더크면 줄바꿈 현상이 일어난다.



Flex-flow: row wrap;

디렉션과 랩을 동시에 입력할때 사용되는것

Justify-content = x축 작업을 정렬할때 사용한다.

Center = 가운데에 배치하고싶다
Space-between 세개의 항목에 균일한 간격을 주고싶다
Space-around 바깥족 영역에도 동일한 간격이 생긴다.

Align-items 은 y축 영역을 바꾸고싶을때 사용한다.

Flex-start - 가장 위쪽에 배치시키고자 할때 실행
Baseline - 항목의 가장 밑라인을 맞춰서 정렬시켜준다.

레이아웃 참고 사이트 : flexbox.help

Margin : 0 auto;- 블록요소에서 주로사용

Position : relative 를 사용하면 top, bottom, left, right를
사용할수있다
Left: 50% 를 사용하면 왼쪽면기준으로 50%를 이동한다.

중앙정렬 공식 참고사이트 : css center trick

2) 학습내용 중 어려웠던 점

헷갈리는 레이아웃 개념말고는 딱히 어려웠던 점은 없었다.

3) 해결방법

구글링이 최고인거 같다.

4) 학습소감

배우면 배울수록 배워야하는 양이 방대하다는것을 느꼈다. 주말이나 시간이 빌때 웹페이지하나를 카피해서 배껴봐야겠다고 생각했다.

6일차 Github