💻 학습 내용
css 레이아웃
💡 Z-index
- z 축에 영향을 미치는 속성
- 형제관계에 position 속성값 absolute, fixed 사용시 레이어가 겹치는 현상이 발생, z축이 있다는 건 3차원 영역에서 사용이 가능
- 단위 작성 하지 않음
- 3차원 속성을 가지고 있는 position 속성값에서만 사용 가능
<span style="color: red;"absolute, fixed,Relative 에서만 사용이 가능
‼️ 주의점
형제 관계에서 첫 번째 태그값이 순수 3차원 포지션 속성값으로 설정 되면 레이어가 겹치게 된다.
첫 번째 값이 2차원인지 3차원인지에 따라 레이어가 겹칠지의 유무가 정해진다.
형제 관계의 양쪽 모두가 3차원이면 레이어가 겹치게 되기 때문에 큰 구역은 2차원으로 작은 구역은 2차원 또는 3차원으로 작업하는 것을 권장함
💡 float
: 같은 선상의 박스들을 배치 할때
- 선택된 영역을 공중에 띄움
- 왼쪽에서부터 정렬 시킴
- display: Inline-block을 사용하지 않고 내가 선택한 영역을
x축으로 나란히 정렬시키고자 할 때
그리고 특정 오브젝트를 브라우저 기준으로 왼쪽 끝 혹은 오른쪽 끝으로 배치하고자 할 때
‼️ 주의점
- 부모의 크기가 가변값이면 안되고 고정값인 경우에만 레이어가 변형되지 않음
- 부모값이 본문을 설정하는 부분의 크기 합 보다 크거나 같아야 한다
- 본문의 값을 고정값이 아니라 가변값을 사용 했다면 부모값을 고정값으로 굳이 설정해주지 않아도 됨
- float을 사용한 영역은 그 영역의 높이 값이 부모에게 영향을 주지 않음
- position은 relative, static 상태여야 함
- 순수 3차원적인 특징을 가지면 float 사용이 불가능
💡 clear
: float의 기능을 끄고자 할 때 사용
- float을 설정했던 태그 바로 다음 태그에 작성을 해주면 됨
- clear: both; 는 float: left와 float: right; 기능을 둘 다 끄는 속성값
Float을 사용한 실무팁
- clearfix
<div class ="clearfix"></div>해당 class이전은 float을 사용했고 이 지점 부터는 float기능이 꺼졌다 라는걸 빠르게 파악하는데 사용
💡 overflow
: 박스를 벗어나는 모든 컨텐츠들은 감춰지게 된다 - hidden
Overflow: hidden;
+float = 자식의 높이값을 부모가 인식할 수 있도록 만들 수 있다
💡 Flex
: float의 발전된 개념
dispaly : flex;기본값 : x축기준으로 왼쪽에서 부터 일렬로 정렬이 됨
- flex-direction : row(기본값),column,row-reverse,column-reverse
- Flex-wrap
▶︎ no-wrap : 부모 영역에 맞춰서 사이즈를 resize해줌
▶︎ wrap : 부모 영역보다 큰 값이 설정되면 자동으로 줄바꿈 현상을 만듦
💡 x축 정렬 작업 - Justify-content
- 왼쪽 : flex-start
- 가운데 : center
- 균일한 간격 : space-between
- 박스의 바깥족 부분에 동일안 공백 : space-around
💡 y축 정렬 작업 - align-items
- 가장 윗쪽에 배치 : flex-start
- 가장 아랫쪽에 flex-end
- 중앙 : flex-center
- 가장 밑의 라인을 맞춰서 정렬 : base line
💡 중앙 정렬 공식
Margin 0 auto
▶︎ 0은 상하를 의미, auto는 좌우를 의미
▶︎ auto는 좌우공백을 자동으로 맞추게 함
📝 마무리
저번주에 학습했던 Position 개념의 연정산으로 레이아웃을 배치하는 법을 배웠다.
2차원과 3차원 속성에 따라 공간의 배치하는 방법이 달라진다는 것을 학습했다. position 속성값들을 제대로 이해하고 넘어가야지만 float와 flex까지 내가 원하는 대로 적용해 나갈 수 있을 것 같다.
학습을 따라가면서 딱히 어려운 점은 없었고 여전히 오탈자가 나에게 학습 시간을 잡아먹는 가장 큰 문제인 것 같다.
오늘은 선생님이 알려주신 사이트를 보면서 레이아웃에서 정렬에 대해 반복적으로 복습해 나갈 수 있었다.
