⏺학습한 내용🕵️‍♂️

⭕ KidsGao 실습

✅ intro

• author 소유자 입력
• viewport : media query 사용 설정
• overflow-x : hidden; => x축을 벗어나는 object는 숨긴다. (미 설정시 가로 스크롤 생성)
• button tag는 기본적으로 테두리와 회색 배경색을 갖고 있다.
• background-color : transparent; => 투명색 설정
• float 좌우배치를 할 때 함께 써야하는 css속성값 중 clear:both; 가 있다.
• .clearfix: clear:both; 속성값만 담고 있는 관례적으로 사용되는 class 명 (float 좌우배치를 할 때 함께 써야하는 css속성값 중 clear:both; 가 있다.)

✅ header

• .introWrap -> position: relative 설정 이유
  ✔ 중앙 정렬을 하기 위함

.introWrap {left: 50%; margin-left: -380px;}

✔ 3차원 속성을 가진 자식들의 위치를 조정할 때 부모를 기준으로 좌표가 정해지기 때문(position내용)
✔ object가 3차원으로서 작성순서에 맞춰 z-index의 값에 따라 z축정렬 되기 때문에

✅ 실무 Tip

❗ image 크기는 짝수나 5단위로 맞춰주면 레이아웃 작업 시 수월하다.
❗ logo 같은 영역에서 위치를 살짝 내리는 법

✔ .introwrap에 margin-top 적용 시 공백이 생긴 상태로 내려오며 margin 병합현상 나타남.

✔ intro에 padding-top 을 적용한다.

❗주의점 -> 영역의 전체 높이값이 변하며 모든 layout을 다시 해야한다.

✔ .introwrap에 top 값 적용을 하면 해당영역만 내려가게 됨.(logo 영역은 내려가지만 cloudwrap 영역은 기존 위치를 가지고 있어 레이어 겹침)

introWrap에 top
로고 부분은 내려가지만 cloudWrap 부분은 원래 위치에 있어서 레이어 겹침
(같은 3차원의 경우 나중에 작성된 3차원 요소의 z축이 더 높으므로 분홍박스 아래로 로고가 위치)

⏺학습내용 중 어려웠던 점🤦‍♂️

🔘 position 에 관한 내용을 처음 배울 때 탄탄한 숙지를 엄청 강조하셨었는데 그 이유를 알 수 있는 날이었다,, 파일 정리도 꼼꼼하게 잘 해야겠다는 생각

⏺해결방법🙋‍♂️

🔘 강의를 들을 때는 이해가 되고 쓰겠지만 혼자 만들라고 하면 x ,, 다른 방법이 있을리가,, 당연히 답은 반복학습! position 특히 복습복습

⏺학습소감🙇‍♂️

🔘 양도 양인데 여태 배워왔던 내용들을 모두 써가며 요리조리 붙여가는게 어렵지만 재밌기도 했다. 아직 기본적인 내용들만 배우고 있어서 그렇긴 하지만 매번 비슷한 구조에서 크게 벗어나지는 않기 때문에 어서 빨리 기본이 탄탄해질 수 있도록 하자.