⏺학습한 내용🕵️‍♂️

---

⭕ CSS (layout) 강의내용

✅ Box model

🔷 웹사이트를 만들때 각 레이아웃에 공백이나 구조를 빠르게 파악할 수 있게 도와주는 옵션

◼ margin = 특정 오브젝트를 옮기고자 할 때 쓰는 속성(border 기준 바깥 쪽)

◼ padding = 특정 오브젝트를 옮기고자 할 때 쓰는 속성(border 기준 안 쪽)

◼ border= 가장자리 경계선

◼ content = 열린 / 닫힌 tag 안의 내용

✔ margin / padding 은 주체가 움직이는 것이 아닌, 선택 영역에 공백을 넣어주는 것이기 때문에 타의로 움직이는 특징이다.

✔ margin/padding: 100px 0 0 100px; (top-right-bottom-left) 순으로 한번에 작성가능 (한번에 정리하는 이유는 코딩이 늘어날수록 브라우저 로딩시간이 느려진다.)

✔ html, body도 태생적으로 마진과 패딩을 갖고있어서 여백을 없애려면 0으로 설정해준다. ( margin / padding: 0; (=모든방향의 값을 0으로 하겠다.)

✔ padding 을 사용하면 공간이 벌어져서 실질적으로 선택된 공간의 크기가 달라질수 있다.

---

✅ margin 병합현상

🔷 형제지간 마진병합현상

◼ 큰 값이 작은 값을 지배한다.

🔷 부모지간 마진병합현상 (가장 많이 마주할 현상)

◼ position 으로 해결가능 (아래 내용)

---

✅ display

◼ 선택한 tag의 진영을 바꿀 수 있다. ( 좌우 / 상하 배치작업)

◼ inline / block 두 요소를 모두 넣을 땐 (ex. display: inline-block;

◼ 보통 메뉴 작업을 할 때 많이 사용한다.

---

✅ vertical-align

◼ 형제관계에 있는 inline 요소들 중 가장 크기가 큰 값을 기준으로 적용한 위치로 이동.

◼ vertical-align은 오로지 inline 요소에만 적용이 가능하다.

◼ img파일은 기본적으로 inline-block 요소의 특징을 갖고있어 vertical-align을 적용할 수 있다.

---

✅ position

❗❗
1. margin-top 사용 시 부모 자식 지간에 발생하는 margin 병합 현상이 일어나는지
2. top, right, bottom, left 속성을 사용할 수 있는지
3. 자식의 높이 값이 부모에게 영향을 주는지
└> 3가지 기준으로 position 속성값이 가지고 있는 특성을 파악

🔷 position-static (2차원의 속성값이다.)

◼ margin-top 적용하면 부모자식간 마진병합현상 일어남

top, right, bottom, left 설정이 불가능하다.

부모의 높이값이 없을때 자식의 높이값이 영향을 미친다.

*모든 html의 기본 태그는 2차원에서 시작하고 position-static의 특징을 갖고 있다.

🔷 position-fixed

◼ margin-top 적용해도 부모자식간 마진병합현상 일어나지 않음.

top, right, bottom, left 를 사용할 수 있고, 좌표기준은 브라우저 좌상단.

부모가 높이값이 없어도 자식 높이값이 영향을 줄 수 없다.

🔷 position-relative (2차원, 3차원 혼합형)

◼ margin-top 적용하면 부모자식간 마진병합현상 일어남

top, right, bottom, left 를 사용할 수 있고, 좌표기준은 최초 위치이고, 주체가 되어 기준에 따라 움직임.

부모의 높이값이 없을때 자식의 높이값이 영향을 미친다.

🔷 position-absolute (3차원 특징)

◼ margin-top 적용해도 부모자식간 마진병합현상 일어나지 않음.

top, right, bottom, left 를 사용할 수 있고, 좌표기준은 브라우저 좌상단.

(but, 부모의 position이 3차원이면 좌표값은 부모의 포지션 기준으로 바뀐다)

부모가 높이값이 없어도 자식 높이값이 영향을 줄 수 없다.

---

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

🔘 오늘도 CSS 작업중에 1~2분씩 딜레이 된 부분은 역시나 오탈자로, 두 세번 실수가 있었다.

🔘 이제 공간을 활용하는 방식을 적용하다 보니 왠지 실전에서 실수가 잦을 것 같은 느낌이 들었다,,

---

⏺해결방법🙋‍♂️

🔘 그래도 크게 어려운 내용은 아니라서 특징을 잘 이해하고 익숙해 질 때까지 작업해보면 될 듯!

---

⏺학습소감🙇‍♂️

🔘 생각보다 사이트의 한 영역을 만드는 것도 굉장히 많은 룰이 적용되고 생각해야 될 것이 많은 것 같다,, 코딩은 컴퓨터로 하는 인테리어라고 하는 말이 뭔지 알아가는중,,레이아웃 부분 같은 경우에는 공유해주신 레퍼런스 사이트에서 많이 공부해봐야겠다

---