◼︎ 오늘 학습한 내용
4. 레이아웃
1) 박스모델
- width/height를 통해 박스 사이즈 결정
- border를 통해 테두리 굵기와 색상 결정
- margin은 박스 밖 여백
- padding은 박스 내부에 공간 생김 (width 100px + padding-left 50px이면 총 가로 길이 150px의 박스가 됨)
- background-color은 박스의 색상 결정
- border/margin/padding 등 top, bottom, left, right의 값을 따로 줄 수 있는데, 한 줄에 주고 싶을 경우 top부터 시계방향으로 작성 (top, right, bottom, left)
2) 마진병합
- 마진 top & bottom 등, 마진이 겹치는 경우 크기가 더 큰 마진의 값만 남음
- 겹치는 마진의 크기가 동일할 경우 하나만 적용됨 (margin-top 100px 과 margin-bottom 100px이 겹치면 두 박스 사이 여백은 200px이 아닌 100px)
- parent - child 관계에서는 child의 마진을 조정할 경우 parent도 함께 움직임
- parent 개체가 함께 움직이지 않게 하려면 child의 position을 absolute으로 설정할 것3) display
- 기본적으로 Block 요소는 세로로 쌓이고 Inline 요소는 가로로 쌓임
- Inline 요소는 마진 조정 불가능
- Inline 요소에 Block 요소의 디자인을 적용하고 싶을 때 display 활용
- display: block;
- display: inline;4) vertical-align
- 크기가 다른 여러개의 박스가 한 가로선상에 위치할 때 사용
- vertical-align: top;은 위로 정렬, middle은 가운데로 정렬(ex] 카톡 친구목록), bottom은 아래정렬5) position
- 1차원은 선, 2차원은 평면(빨간 박스를 옆으로 밀면 초록 박스도 같이 밀린다), 3차원은 겹쳐질 수 있음
- position에는 static, absolute, relative, fixed가 있음
◼︎ 어려웠던 점 & 해결못한 것들
- parent/child 관계, 형제 관계에서 각 position 별 상속하는 내용에 따라 달라지는 것이 어렵다. 경우의 수가 너무 많음... ◼︎ 해결방법
- 아직 완벽한 숙지는 안됨... 외워야겠다!◼︎ 소감
- 학부생때 웹프로그래밍 수업을 들었어서 이번 강의를 들으면서도 '엇 저거!' 하는 부분들이 많았는데, 낯은 익지만 제대로 알지 못하는게 대부분^_ㅠ
- 강의 들으면서 따라 실습해보고 있는데 시간이 꽤 걸린다. 강의 2회 반복 + 실습해보고 개발일지 정리까지 하려니 시간이 빠듯했다...
- 다행히 git 사용법은 익숙해서 레포지토리 생성, 커밋, 푸쉬까지 손쉽게 할 수 있었다. 깃은 진짜 열심히 공부했었기 때문에 한 동안 안썼는데도 자전거 타듯 금방 기억해냈다. 역시 한 번 공부할때 열심히, 확실히 공부하는게 최고임을 깨달음^~^