레이아웃

학습내용

z-index

z축에 영향을 미치는 속성

position absolute

: 레이어가 겹쳐져있는 상태, 첫번째 레이어가 2차원(큰섹션)인지 3차원(레이어가 겹쳐짐)인지에 따라 겹칠지 안겹칠지 결정된다.

.z-one{position: absolute;}

z-index

: z축 위치를 조정하는 코드

.z-one{z-index: 10;}

float

레이아웃 구조 중 창의 왼쪽 끝이나 오른쪽 끝 등에 배치하고자 사용하는 CSS 속성.

1. 레이어가 틀어질 수도 있으니 고정값을 갖고있는 영역안에서 사용하는게 좋다.

2. position 상태가 static 이나 relative에서만 사용 가능하다. (순수 3차원 상태에서는 float는 사용 불가하다.)

clear

float을 사용하면 같이 사용하는 속성이며, float을 마지막 사용한 값에 넣어주면 된다. float에 대한 기능을 끄고자 할 때 사용된다.

footer{clear: both;}

overflow

HTML 문서에서 요소 안의 내용이 너무 크면 담고 싶은 공간 안을 넘어 화면 밖으로 벗어나 출력될 수 있다. 이 상태를 오버플로우(Overflow), 넘쳐흘렀다고 표현한다.

hidden : 넘치는 부분이 잘려서 보이지 않음

scroll : y축 기준으로 스크롤바가 생성됨

flex

레이아웃을 만들 수 있는 가장 효율적인 방법 중 하나이다. 남는 공간을 어떻게 차지할 것인지에 대한 성질이 가장 핵심적인 개념이다.

display: flex

flex container를 의미. x축으로 정렬

flex-direction: 진행방향 변경(주 축 설정)

x축정렬으로 진행 방향 변경

flex-direction: row;

y축정렬으로 진행 방향 변경

flex-directon: column;

x축 기준 역순정렬으로 진행 방향 변경

flex-direction: row-reverse;

flex-wrap: 여러 줄 묶음(줄 바꿈) 설정

nowrap: 한줄에 표시

flex-wrap: nowrap;

wrap: 다음줄에 표시

flex-wrap: wrap;

wrap-reverse: 역방향으로 다음줄에 표시

flex-wrap: wrap-reverse;

flex-flow: flex-direction과 flex-wrap을 한번에 지정하고자 할 때 사용

flex-flow: row wrap;

justify-content: 주 축의 정렬방법을 설정

flex-start: item을 시작점부터 정렬

flex-end: item을 끝점으로 정렬

center: item을 가운데로 정렬

space-between: 시작 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지는 사이에 고르게 정렬

space-around: item들을 균등한 여백을 포함하여 정렬

중앙정렬 하는 법

CSS center trick

어려운점

레이아웃 구조가 잘 이해가 가지 않아 레이아웃을 나누는 것이 아직 어렵다.

해결방법

내일 실습 수업을 통하여 레이아웃에 대한 공부를 좀 더 해야겠다.

학습소감

일지를 좀 더 깔끔하고 한눈에 알아보기 쉽게 정리하고싶은데 아직도 뒤죽박죽이다. 개발 일지를 정리하는데 쓰는 시간보다 공부하는데 시간을 좀 더 투자하고 싶은데 어떡해야 더 효율적으로 작성 할 수 있을지..