간단한 요약
배운 내용
1. z-index
- default z-index값은 0
- 3차원 적인 속성이므로, 3차원적 position 속성에서만 적용됨
2. siblings 간 구조 작업 tip
- 첫 번째 sibling의 position에 따라 siblings간 겹칠 지 아닐 지 결정됨
- 앞의 sibling이 3차원 특징을 가지게 되면, 바로 뒤 sibling은 앞의 silbing의 뒤로 가, 가려지게 됨
- 큰 공간을 구조화할 때엔 2차원으로 디자인하는 것이 편함(ex:
section, header, ...) - 그 공간 내 다양한 내용을 삽입 시에 3차원으로 디자인 하는 것이 디테일하게 표현 가능
3. float && clear
- float: 선택 영역을 띄우기에 3차원적 효과를 보여줌
- 앞의 sibling이 float에 의해 3차원 특징을 가지게 되면, 바로 뒤 sibling은 앞의 silbing의 뒤로 가, 가려지게 됨
- ⬆️ 이를 방지하기 위해
clear: both;을 사용하기 (악어와 악어 새의 관계) float: 같은 선상에 block들을 배치하는 기능 on
clear: 그 기능을 off- clear는 float이 사용된 바로 다음 sibling에 사용하면 됨
- 따라서, 보통 두 속성이 같이 쓰이는 편
- float이 사용된 parents는 고정값이어야 함 otherwise 레이어가 틀어지게 됨
- 만약 float의 값이 %로 사용되었다면, ⬆️를 반드시 지킬 필요 없음
- float은
position: static/relative;와 함께 사용 가능(2차원 특징이 필요, 3차원 X) - Tip
<div class="clearfix"></div> && .clearfix { clear: both; }를 float 기능 다음에 추가하여 가독성 및 효율성을 잡을 수 있음
4. overflow
- block의 영역을 초과하는 children의 내용을 block의 영역만큼만 볼 수 있도록 설정
overflow-y: scroll;(overflow-x도 마찬가지)도 가능
5. one true layout (float && overflow) 정리
a) 방법
children에 float속성을 적용하면 parents에 overflow: hidden을 적용한다
- overflow && float을 같이 사용하면 children의 height값을 parents가 인식할 수 있음
b) 예시
<section> <div class="image-left"></div> <p> this is paragraph next to image on left this is paragraph next to image on left this is paragraph next to image on left this is paragraph next to image on left this is paragraph next to image on left this is </p> </section> <footer>this is footer</footer>
- 위 코드에서 overflow 속성 없이 아래처럼 나타난다.
- 하지만 parents인
section에overflow: hidden;을 적용하면 footer를 원하는 위치에 배치할 수 있다.
c) 결과
float를 가진 children의 parents에 overflow: hidden;을 주면 float가 없지만 떠다니는 요소를 바로 잡아준다.
다르게 말하면, children의 height 값이 parents의 height 값에 영향을 주도록 하는 방법
6. flex
- 마찬가지로 수월한 layout 작업을 위해 사용되는 속성. float보다 조금 더 발전된 형태
- 배치를 원하는 children의 parents에 flex를 적용한다.
- default로 block요소가 해제되며 왼쪽에서부터 정렬됨
a) flex-direction
- 정렬되는 방향 및 순서를 조정할 수 있음
- default는
flex-direction: row;
b) flex-wrap
- children block들의 크기가 parents를 벗어나지 않도록 잡아줌
- default는
flex-wrap: nowrap; flex-wrap: wrap;은 children의 고유 크기가 parents보다 클 경우 초과하는 children을 다음 행/열에 구현함
c) flex-flow
- a)와 b)를 동시에 지정할 때 사용
flex-flow: column wrap;처럼 한번에 지정 가능
d) justify-content
- flex의 x축 정렬 때 사용
- default는
justify-content: flex-start;이며 왼쪽부터 정렬이다. - 다양한 속성값이 있으므로 여기 MDN을 참고
e) align-items
- flex의 y축 정렬 때 사용
- default는
justify-content: flex-start;이며 위쪽부터 정렬이다. - 역시 다양한 속성값이 있기에 모두의 선생님 MDN에서 자세히 확인 가능
f) 잘 정리된 사이트
- 여기서 필요할 때마다 확인 하자!
7. 중앙 정렬
a) 방법 1
margin: 0 auto;
b) 방법 2
position: relative;
left: 50%;
margin-left: -(width의 50% 값);c) 참고 사이트
이외에도 다양한 x/y축 center 정렬 방법이 있으니 여기에서 참고 가능하다.
어려웠던 내용
이번 강의의 대부분은 제대로 배우지 못한 내용이라 신선했으며 또한 완벽히 이해하기엔 어려웠다. 특히, float, clear, overflow, flex가 어려웠지만, 강사님이 추천하는 참고 사이트 및 내가 검색한 사이트들을 통해 잘 이해할 수 있었다.
해결 방법
- 해당 link를 통해 one true layout의 어려웠던 내용을 이해할 수 있었다.
소감
css에서 상당히 중요한 layout 파트에 대해, 리뷰 및 이전에 접해보지 못한 내용도 알 수 있어서 좋았다. 확실히 이번 layout 내용은 구현될 경우의 수가 상당히 많으므로, 반복적 연습이 필요할 것 같다.
나의 코드
수업에 따라 진행한 코드는 github에 다시 update 하였다.
