학습한 내용

레이아웃에 대한 내용을 더 심화적으로 들어갔다.
z-index: 10; 같은 경우는 단위를 사용하지 않고 형제 지간인 코드일때 위로 올라오게 한다 즉 높이가 있는 z축을 조정하는 것이다 그말은 순수 2차원 특징을 가지고 있는 position: static 은 사용이 불가능 하다는 것이다.
형제 코드가 있을 때 첫 번째 형제에다가 position 속성 값을 사용 하면 레이어가 겹친다 그래서 큰 공간에서는 거의 2차원을 사용한다 (3차원이면 겹치기 때문에)그 다음 형제에다가 position 속성 값을 사용 하면 레이어가 겹치지 않는다.
float 은 같은 선상에 박스들을 배치하고자 하는 기능을 킬때 사용하는데 float: left는 x축 맨 왼쪽 ,반대로 right는 가장 오른쪽에 배치된다 여기서 창을 줄였다 늘려도 유지한다. 여기서 중요한것은 float 으로 선택 된 부분은 공중에 떠있다고 생각하면 된다 여기서 다음 레이어에 float: left; 를 사용하면 이미 선택 되있는 레이어가 있는 자리로 들어온다.
단점은 크게 브라우저를 줄일때 레이어가 틀어지는 게 있는데

1) 부모의 값이 가변값이 아닌 고정값이 어야 틀어지는걸 막을 수 있다
2)자식의 값들이 가변값일 땐 부모가 고정값이 아니여도 된다
3)float과 3차원 postion은 같이 사용이 불가능하다

그래서 float의 기능을 끌 때 사용하는게 clear이다
clear: both; = left, right 등 기능을 끄겠다는 표현이다
악어와 악어새 개념처럼 float을 사용할땐 꼭 clear가 나온다.여기선 class값을 clearfix로 줬다 clearfix는 clear를 사용하고 싶을때 쓰는 약속 같은것이라고 하셨다
css 소스를 보면.clearfix { clear: both}를 사용한다 강사님께서도 자주 쓰신다고 하시니 실습 팁이라 생각하고 외워야 겠다.

학습 중 어려웠던 내용

레이아웃 자체가 처음에도 쉽지 않았지만 알아가면 알아 갈 수록 쉽지 않은 내용이다. float 속성은 x축 정렬할 때 사용한다고 알고 있지만 막상 사용하려고 하면 생각해야 할 것들이 너무 많다.
●display: flex; = y축을 x축으로 바꿔줌
●flex-direction: row-reverse; = x축 순서를 역순으로 바꿔줌
●flex-direction: column; = x축을 y축으로 바꿔줌
●flex-direction: column-reverse; = y축 순서를 역순으로 바꿔줌

●flex-wrap: wrap; 부모의 위드값보다 자식의 위드값이 크면 레이어가 변함
●flex-wrap: nowrap; 부모의 위드값보다 자식의 위드값이 커도 부모 위드값에 고정
●flex-wrap: row wrap: row와 wrap 를 둘다 사용할때 간결하게 사용가능
---x축 정렬----
●justify-content: flex-start; 기본값
●justify-content: flex-end; 오른쪽 정렬 시키고 싶을때
●justify-content: center; 가운데 정렬
●justify-content: space-between; 각각의 동일한 공간을 주고 싶을때
●justify-content: space-around; 안쪽과 양끝에도 동일한 공간을 줌
---y축 정렬----
●align-items: flex-start; 가장 위쪽에 배치하고자 할 때
●align-items: flex-end; 가장 아래쪽에 배치하고자 할때
●align-items: center; 중앙 배치
●align-ltems: baceline; 박스들 간의 가장 밑에 라인에 정렬을 맞춰줌
정리를 하긴 했지만 양이 너무 많아 쉽지않다.

해결 방법

외우기만 하기보단 실습을 직접 하면서 머릿속에 집어넣어야 겠다.
내용 자체는 강의를 따라가면서 듣다보면 충분히 알 수 있다. 허나 양이 너무 많기 때문에 양이 문제일 땐 계속 사용해보고 생각해보는 수 밖에 없다.
해결 방법이라기엔 너무 당연한 소리지만 지금 단계에서 막히는 부분이 있는 것보단 처음 보는 것들이기 때문에 어렵게 느껴진다고 생각한다. 그래서 자주보고 자주 사용하여 이러한 속성들과 친해져야 겠다

학습 후 소감

솔직하게 내가 웹페이지를 만들 수 있을지 생각이 든다
'이런 생각하기전에 하나라도 더 외워라' 라고 머리에 주문을 걸긴 하지만 많은 걸 배웠다고 생각하지만 아직 기초의 기초단계라 생각들기에 조금 자신감은 떨어졌지만 강의 자체는 너무 재밌고 흥미 있기 때문에 더 열심히 하겠습니다.
언제나 늘 감사드립니다 대구 AI 스쿨 김인권 강사님 사랑합니다ㅎ3ㅎ