⏺학습한 내용🕵️‍♂️

⭕ CSS (layout) 강의내용

✅ z-index

🔷 z축에 영향을 미치는 속성, 3차원 속성값에서만 사용이 가능하다.

3차원 속성을 갖고 있는 상태에서는 형제관계에서 레이어가 겹치는 상황이 있다.

이럴 때 z축의 위치를 변경할 때 사용하는게 z-index (숫자만 입력, 단어는 생략)

레이어가 겹치는 문제가 있기 때문에 큰 section 같은 경우에는 2차원으로 구축하는게 좋다.

---

✅ float

🔷 x 축 정렬을 시키는 속성

float 은 같은 선상에 박스를 배치할 때, 그 기능을 off 할때 쓰는게 clear.

float을 쓸 때 꼭 같이 쓰는 것이 clear. (좌, 우 한번에 끌 때는 clear:both)

❗ 주의점 - 브라우저 크기를 변경하면 레이어가 틀어지는 현상있음. (float을 사용한 영역의 부모의 크기가 가변값이면 안되고 고정값이어야 한다.)

⭕ 부모태그에서 고정값을 준다.ex)section 으로 감싸서 고정 width값을 주면 안바뀜.

⭕ flot을 사용한 영역은 그영역의 높이값이 부모의 높이값에 영향을 주지 않는다.(section에 따로 기입)

⭕ 순수 3차원인 apsolute와 relative는 flot과 같이 쓸 수 없다.

💬 float 실무팁

.clearfix{
clear: both;

└> clearfix = HTML 구조를 빠르게 확인할 수 있는 방법 (이 클래스의 기준으로 앞선 position이 꺼짐)

overflow: hidden; = overbox 를 벗어나는 오버젝트를 숨김

overflow-y : scroll; = y축을 기준으로 스크롤 생성

overflow-x : scroll; = x축을 기준으로 스크롤 생성

flot과 overflow hidden 값을 결합시키면 부모가 자식의 높이값을 인지할 수 있다.

---

✅ flex

🔷 조금 더 효과/효율적으로 웹사이트 레이아웃 작업을 도와주는 css속성 (float 발전개념)

.container {
	display: flex;
	flex-wrap: wrap;
	flex-flow: row wrap;
        align-items: flex-end;

flex-direction (진행방향설정) : row(기본값, x축정렬),column(y축정렬)-reverse(역순으로 정렬)

flex-wrap : row wrap (기본값, 부모width 크기를 넘으면 자동으로 resize됨, wrap(자동줄바꿈현상)

✔ flex-flow -direction과 wrap을 한번에 설정함

x축정렬 작업을 진행할 때
justify-content :
flex-start (기본값 좌->우 정렬) 
flex-end (우>좌 정렬)
center (가운데 배치)
space-between (균일한 간격 배치)
space-around (box 바깥쪽의 공간에도 공백추가)
---------------------------------------------
y축 정렬 작업을 진행할 때
align-items:
flex-start (기본값 위>아래 정렬) 
flex-end (아래>위 정렬)
center (가운데 배치)
baseline (box들의 가장 아래라인에 맞춰 정렬)

▶ reference site => flexbox help

---

✅ 중앙정렬

🔷 margin 적용

.center-1{
	width: 300px;
	height: 300px;
	background-color: yellow;
	margin: 0 auto;
	}

앞의 숫자는 상하/ 뒤의 숫자는 좌우를 의미. (주로 block요소에서 사용)

🔷 position 결합

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

left: 50%; / margin-left: ##px;

첫 값은 가장 좌측면 기준으로 중앙정렬이라 width값의 절반만큼 margin left 해야 함. (##)

▶ reference site => css center trick

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

🔘 수학을 배울 때 처럼 공식을 계속 배워나가는데, 이해하는건 어렵지 않지만 역시 가장 중요한건 적재적소에 알맞은 공식을 써야 하는 것 처럼 최소한의 코딩으로 필요한 부분에 맞는 명령어를 넣어주는게 아직 머릿속에서 빨리빨리 안돌아간다,,

⏺해결방법🙋‍♂️

적어도 이해부분에서는 아직 막히고 있지 않으니 구축과정에서의 세세한 틀을 계속 살펴봐야겠다.

⏺학습소감🙇‍♂️

🔘 진행할수록 내용도 많아지고 어려워질텐데 나중에 허우적대지 않도록 잘 잡아가면서 끝까지 열심히 하자!