7/5 [레이아웃] z-index, float과clear, overflow, flex, 중앙정렬 하는 방법

💡 학습한 내용

✅ Z-index z축에 영향을 미치는 속성

z-index: 10(숫자값만 입력/단위는 생략); 겹쳐저 있는 옐로우를 파란색 위로 끌어올리고 싶을 때 쓴 값
즉,
-z축의 위치를 바꿀 때 사용하는 속성
-3차원 차원을 가지고 있는 position속성(relative, absolute, fixed)값에서만 적용 가능 /

두가지 객체중 z-index속성값이 1이라도 높은 객체가 z축 기준에 배치된다. 2개 이상의 객체에도 적용되며 기본 적으로 객체의 3 차원 속성에 영향을 준다.

✅ 2차원 객체와 3 차원 객체

형제 관계 객체은 윗 순서를 가지고 있는 객체의 포지션 속성에 따라 정해진다.
맞붙어 있는 객체들 중 윗 순서의 차원 속성(2차원인지 3차원인지)에 따라 겹쳐질지 혹은 겹쳐지지 않을지 결정이 되는 것이다.
이와 같은 특징으로 인해 웹페이지의 설계도면에서 큰 구역을 만들 때는 2차원 객체을 주로 사용하며 세부적인 공간을 나누거나 컨텐츠를 입력할때는 2차원 객체와 3차원 객체를 필요에 따라 사용한다.
2 차원 객체 : 서로의 공간을 침범하지 못함
3 차원 객체 : 서로의 공간을 침범하여 겹쳐질 수 있고 z-index속성을 통해 객체를 조정할 수 있다.

✅ float

공간을 만들 때 사용되는 태그인 div, header, sectiond은 Block 요소를 갖고 있음.(y축으로 정렬된다.)
형제 객체를 x축으로 정렬시키기 위해서 사용
해당 객체를 3차원 속성으로 만들어 정렬시키는 float속성은 다음 순서의 객체와 겹처지게된다. 때문에 float속성을 가진 객체와 다음 객체를 분리하기 위해 clear: both ;속성을 함께 사용한다.

즉, float은 같은 선상의 박스들을 배치하고자 하는 기능을 킬 때 clear은 그 기능을 끄고자 할 때 쓰는 것이다.(float의 기능을 끄는 clear은 무조건 같이 따라 나와야 한다.)

위 사진과 같이 float을 사용하면 페이지 크기를 줄일 때 레이어의 형태가 틀어지는 것이 단점이다.

✔️ float을 사용할 때 주의점
① 고정값을 가진 부모객체를 사용

section {
    width: 1400px;
    height: 200px;
    background-color: orange;
}

float를 사용하는 객체들의 width 총합 보다 같거나 큰 width 값을 가진 부모객체를 사용하여 뒤틀어지는 것을 방지할 수 있다. 고정값을 사용하는 객체는 브라우저의 크기에 영향을 받지 않기 때문에 문제없이 float속성을 사용할 수 있다.

② float을 사용한 영역은 그영역의 높이 값이 부모에 영향을 주지 않는다. (자식의 높이값이 부모의 높이값에 영향을 줄 수 없다.)

③ 순수 3차원인 position 속성값인 absolute fixed는 float과 같이 사용할 수 없다.

❗️❕ 실무팁
① float에 동반되는 clear:both;를 적용하는 다른 방법
관례적으로 사용하는 class명<div>class="classfix<div>" .clear.fix {clear: both;}를 사용하여 footer객체가 div 객체들과 겹쳐지는 것을 막는다.

clearfix라는 class 명으로 이 전까지 float을 사용했다는 것을 한눈에 확인하는데 도움이 된다.

②overflow:hidden와 float을 결합해서 사용하게 되면 자식의 높이값을 부모가 인식할 수 있도록 할 수 있다.

✅ overflow

-위와 같은 박스에 벗어나는 object를 어떻게 할지 정하는 속성
overflow: hidden; : 벗어나는 object를 가린다.
overflow: scroll : 벗어나는 object를 스크롤로 표시한다.

✅ flex

float의 발전된 버전
제약사항이 float보다 적다.

display html의 성격을 바꿀 때 사용되는 속성 (inline을 block block을 inline으로)
display: flex; x축 정렬

정렬방향
flex-direction: row ; 행으로 정렬
flex-direction: row-reverse ; 행 역순으로 정렬
flex-direction: column ; 열으로 정렬
flex-direction: column-reverse ; 열 역순으로 정렬

flex-wrap : nowrap 부모영역에 맞춰서 객체를 자동으로 리자이즈
flex-flow : direction과 wrap을 동시에 입력할 때 사용되는 것 ex)flex-flow: row wrap;

x축 정렬
justify-content: flex-start ; 왼쪽 정렬
justify-content: flex-end ; 오른쪽 정렬
justify-content: center ; 가운데 정렬
justify-content: space-between ; 각각의 동일한 간격의 띄우기
justify-content: space-around ; 객체를 기준으로 동일한 공간 주기
y축 정렬
align-item: flex-start ; 상단정렬
align-item: flex-end ; 하단정렬
align-item: center ; 가운데 정렬
align-item: baseline ; 객체들 중 가장 낮은 곳에 맞추어 정렬

flex이해가 어려울 때 도움이 되는 사이트 https://flexbox.help/

✅ 중앙정렬 하는 법

① margin: 0(상하) auto(좌우);
-상하 0 좌우는 자동으로 맞추겠다는 걸 의미
-block 요소에서 주로 사용하면 좋다.

② position: relative;속성과 함께 속성과 함께 left, margin-left를 사용하여 중양정렬을 한다.

.center-2 {
position: relative;
width: 300px;
height: 300px;
background-color: blue;
left: 50%;
margin-left: -150px;
}

더 많은 css 중앙정렬 방식을 제공하는 사이트 : https://css-tricks.com/

❌ 학습내용 중 어려웠던 점

전체적으로 개념을 학습하는데에 어려움을 느꼈다. 생소한 css 개념들이다 보니 이해는 가는 것 같아도 확실하게 내 껏을 만들지 못한 느낌이다.

⭕️ 해결방법

이해하기 어려운 부분은 검색과 같은 다양한 방법으로 해결 할 수 있었으며 아무리 개념을 이해하였다고 해도 내가 실제로 이 속성들을 사용해보는 것이 제일 중요한 것 같다. 웹페이지틀을 잡아 이러한 기능을 사용한 페이지를 만들어봐야겠다.

🙋‍♀️ 학습소감

하루에 배우는 양이 많다 보니 소화를 하는데 시간이 걸리는 것 같다. 2시간강의이더라도 이해를 하면서 개발일지도 써야하니 시간이 더더욱 오래걸리는 것 같다.
강의를 이해한 다음 개발일지를 정리하면서 다시 되짚는 시간을 가져야겠다.