학습한 내용

magin, padding 을 이용한 공간적인 특징과 레이아웃에 대한 걸 배웠다. 확실한건 가장 어려웠다
형제 지간의 마진 병합 현상은 서로 마주할 때 공백을 공유할 경우 인데 큰 공유값이 작은 공유 값을 먹는다 즉 상하를 마주하는 magin-bottom 100px;, magin-top 50px; 값이 있을때 150px만큼 공백이 생기는 것이 아니라 큰 값인 100px만큼만 공백이 생긴다. 그리고 부모 자식 지간의 마진 병합 현상이 있는데 자식이 magin-top; 100px; 값을 줬을 때 부모도 자식의 100px 공백만큼 같이 내려가는 현상이다 웹페이지 도면제작을 할때 부모 자식 지간의 마진 병합 현상을 자주 보게 된다고 하신다.
html, body, h1은 태생적으로 magin, padding 값이 존재 하므로 깔끔 하게 하고 싶다면 magin, padding 값을 0으로 설정하기도 한다
레이아웃에서는 가장 중요하고 어려운 내용이있다 1차원,2차원,3차원을 구분하여 적절한 속성을 사용 하는 것인데캡쳐를 할땐 정지표시가 사라지지 않기에 조금 불편하지만 알아볼 수 있다. 이 처럼 2차원과 3차원에 사용되는 position 속성이 다 다른데
position: static 특징 = 2차원 특징
1) 마진 병합 현상이 일어난다
2) top, bottom, left, right 속성을 사용 할수 없다
3) 자식의 높이 값이 부모에게 영향을 끼친다.

position: fixed = 3차원 특징
1) 마진 병합 현상이 없다
2) top, bottom, left, right 속성 사용이 가능하다 (좌표 기준점이 브라우저로 바뀐다)
3) 자식의 높이값이 부모에게 영향을 끼치지 않는다.

position: absolute = 3차원 특징
1) 마진 병합 현상이 없다
2) top, bottom, left, right 속성 사용이 가능하다
3) 자식의 높이값을 부모에게 영향을 끼치지 않는다.
4) top, bottom, left, right 값은 부모가 (2차원,3차원)등의 값을 기준으로 좌표 기준점이 달라진다.

position: absolute = 2차원 3차원 양쪽 특징을 가지고 있다.
1) 마진 병합 현상이 없다
2) top, bottom, left, right 속성 사용이 가능하다 (기준이 브라우저가 아니다)
= 공백에 의해 움직이는게 아닌 자신 스스로가 주체가 되어 움직인다
3) 자식의 높이 값이 부모에게 영향을 끼친다.

학습 중 어려웠던 내용

오늘 공부한 모든 것이 어려웠다. 도면에 약하다 보니 실습을 통해 실시간으로 어떻게 변하는지 확인 해가며 학습하다보니 혼자 하려고 했다면 정말 어려웠을 내용은 확실하다 허나 보면서 해도 아직은 많이 어렵다. position을 사용할 때 주의 할점으로 3가지가 있다
1) magin-top 사용시 부모 자식 지간의 발생하는 마진 병합 현상이 일어나는지
2) top, bottom, left, right 속성을 사용할 수 있는지
3) 자식의 높이 값이 부모에게 영향을 주는지
각각의 position들의 특성들까지 포함하여 정말 많은 경우의 수가 있는데 공간적인 이미지가 머릿속에 잘 그려지지 않다 보니 소스를 따라 적고 확인하는 정도 밖에 되지 않다보니 많이 어려웠다

해결방법

여러번 반복적으로 실습을 해야 한다 position 의 각각의 특징을 파악했으니 이젠 내것으로 만들어야한다 자식태그에 magin-top: 100px; 값을 넣었을때 부모가 같이 움직이질 않는 거보니 3차원일 것이고 top: 100px; 값을 넣었을때 브라우저를 기준으로 좌표가 움직이는걸 보니 absolute 라는걸 알아 차릴 수 있다. 이러한 방법으로 여러번 반복학습을 함으로써 완벽하게 레이아웃을 가지고 놀아봐야겠다.

학습후 소감

강의 시작 하실 때 부터 레이아웃에서 가장 중요하고 가장 어려운 내용이라고 말씀 하시다 보니 긴장이 100배로 됬다. 쉽게 설명 해주신다는 말씀에 조금 안심이 됬지만 확실히 어려운 내용이였다. 역시 오늘도 명강의 감사드립니다. 그리고 강의 중간에 모기나 파리가 날아다니셨는지 손바닥으로 잡으시는듯한 박수소리가 팍! 하고 크게 났었는데 어쩜 그렇게 타이밍이.. 살짝 집중이 흐트러지려 할때 그 소리가 나다보니 정신이 번쩍 들었다. 그러하여 1분 1초도 낭비하지 않고 강사님 말씀에 집중할 수 있었다. 항상 좋은 강의 해주신 강사님과 대구 AI 스쿨 사랑합니다 ㅎ.ㅎ