CSS 레이아웃

1. z-index

• z축에 영향을 미치는 속성
• 형제 관계에 3차원 성격을 가지는 position 속성값 (absolute, fixed)를 사용하게 되면 레이어가 겹치는 현상이 발생한다.
• 이때 둘 중 하나의 위치를 앞쪽으로 배치하고자 할 때, z-index를 사용한다. 속성값은 숫자만을 사용한다.
• z-index의 기본값은 0 이다. 값이 높을수록 앞쪽으로 배치된다.
  ※ 주의점 : z축이 있는 3차원 특징을 가진 position 속성값에서만 사용이 가능하다. (fixed, relative, absolute)

■ 형제 관계에 따른 position 속성값에 따라서, 결과가 어떻게 달라지는가.
첫 번째 형제에 position이 2차원 혹은 3차원인가에 따라서 레이어가 겹칠지 안겹칠지 결정된다.
※ 큰 구역은 2차원으로, 작은 구역은 2차원 혹은 3차원 사용을 추천 – 큰 구역들을 3차원으로 설정하면 레이어가 겹칠 수 있기 때문

코드

Git 링크.z-index

2. float와 clear

● float : 같은 선상에 박스들을 배치하고자 하는 기능을 켤 때 사용하는 속성

• display: Inline-block을 사용하지 않고 내가 선택한 영역을 x축으로 나란히 정렬시키고자 할 때
• 그리고 특정 오브젝트를 브라우저 기준으로 왼쪽 끝 혹은 오른쪽 끝으로 배치하고자 할 때

● clear : float의 기능을 끄고자 할 때 사용하는 속성

• 공간을 만들 때 사용하는 태그들(header, main, section, footer, div)은 전부 block 요소의 성격을 가짐
  그래서 줄바꿈 현상이 일어나서 y축으로 정렬됨
• float 속성을 사용하게 되면 선택된 영역을 띄우게 되어(일부 3차원 특징을 가짐), 다른 태그와 겹쳐질 수 있다.
• clear: both; 는 float: left와 float: right; 기능을 둘 다 끄는 속성값

※ float를 사용하는 경우, 브라우저의 크기가 작아지면 레이어가 틀어지는 경우가 생김

※ 주의점1 - float을 사용할 때는 float을 사용한 영역의 부모의 크기가 가변값이면 안됨
부모의 width가 모든 float width 고정값보다 크거나 같은 공간에서 float을 사용해야 레이어가 틀어지는 현상을 막을 수 있음
(부모 width 속성값 >= 모든 float width 속성값)
만약 float 영역의 모든 크기 속성값이 가변값(%)인 경우 별도의 부모 레이어 크기가 정해지지 않아도 됨 - 하지만 이런 경우는 드문 경우

※ 주의점2 – float을 사용한 영역은 그 영역의 높이값이 부모에게 영향을 주지 않는다.

※ 주의점3 – float를 사용할 경우, position은 static 혹은 relative를 사용해야 한다. 순수 3차원인 fixed, absolute는 float와 같이 사용할 수 없다.

■ 실무 tip : float를 사용한 후 별도의 태그(div class=“clearfix”)를 만들어 clear 속성을 사용하는 것이 어느 시점에서 clear를 사용했는지 파악할 수 있다.

Git 링크.float_clear

3. overflow

● 지정된 영역보다 많은 오브젝트가 있을 때, 사용하는 속성
① overflow: hidden; - 범위를 넘은 오브젝트를 전부 숨김
② overflow-x: scroll; 와 overflow-y: scroll; - 숨겨진 범위를 스크롤을 통해 확인할 수 있음

■ 실무 tip 2 : overflow와 float을 결합해서 사용하면 자식의 높이값이 부모에게 영향을 줄 수 있게 만들 수 있다.

Git 링크.overflow

4. flex

• float의 발전된 개념, float보다 제약사항이 줄어듬.
• display: flex;
• flex 영역으로 지정된 부모의 자식들은 기본적으로 자동으로 x축, 왼쪽기준으로 정렬됨

● flex-direction: row(기본값), column, row-reverse, column-reverse를 이용해서 자식들의 순서나 위치를 바꿀수 있다.

● flex-wrap: nowrap(기본값) 부모의 영역을 벗어나지 않고 그 안에 있는 박스들을 자동으로 부모의 영역에 맞추어 리사이즈 시킨다.
flex-wrap: wrap 부모의 영역보다 자식들의 크기가 크면 자동으로 줄바꿈 현상을 만든다.

● flex-flow: direction과 wrap을 동시에 사용하는 명령어

■ flex에서의 정렬

1) x축 정렬 방법(justify-content: )
① flex-start - x축에서 왼쪽 정렬

② flex-end - x축에서 오른쪽 정렬

③ center - x축에서 가운데 정렬

④ space-between – x축에서 각 영역에 균일한 간격을 만들어줌

⑤ space-around – box의 바깥쪽 부분에 동일한 공간이 생성됨, 바깥쪽 영역과 안쪽 영역의 간격의 크기는 다름

2) y축 정렬 방법(align-items: )
① flex-strat – y축에서 위쪽 정렬

② flex-end – y축에서 아래쪽 정렬

③ center – y축에서 가운데 정렬

④ baseline – 여러 item들 간에 가장 밑에 위치한 라인에 맞춰서 졍렬

※ flexbox.help 사이트에서 정렬을 확인해 볼 수 있다.

Git 링크.flex

5. 중앙정렬 하는 방법

① css에서

.sample { margin: 0 auto; }

• 0의 위치는 상하를 의미하고, auto의 위치는 좌우를 의미한다.
• auto는 좌우공백를 자동으로 맞추게하는 속성값

② css에서

.sample { 
	position: relative
  
	width: 300px;
	height: 300px;
	left:50%
	margin-left: -150px;
}

• margin-left에는 width 값의 절반에 마이너스를 넣어준다.

※ 단점은 width 값이 변경되면 margin-left 값도 수정해줘야 한다.

Git 링크.center_array

어려웠던 점

이번 강의 내용에서는 특별히 이해가 안되는 내용은 없었기에 큰 문제가 없었습니다.

해결방법

이해가 바로 되지 않는 부분은 강의를 반복해서 들어보거나, 인터넷에서 다른 사람의 설명을 참고해서 문제를 해결하였습니다.

학습 소감

position 부문의 연장선상이라는 느낌이라 이해를 하는데 시간이 꽤 걸렸습니다. float와 flex를 이용하여 레이아웃의 정렬을 사용할 수 있게 되어서 더 깔끔한 형태로 웹페이지를 만들 수 있을 것 같습니다.