학습한 내용
형제관계의 3차원 속성값을 가지고 있는 position: absolute;를 사용하게 되면 레이어가 겹치는 현상이 발생합니다.
가장 먼저 나오는 형제의 position이 2차인인지 3차원인지에 따라서 레이어가 겹칠지 안겹칠지가 결정됩니다.
z-index : 겹쳐있는 부분에서 원하는 색상을 앞쪽으로 배치하고 싶을때 사용합니다. 속성값으로는 숫자값만 입력하면 됩니다. Z축을 가지고 있어 3차원적인 특징을 가지고 있는 position 속성값에서만 적용이 됩니다.
float : 같은 선상에 박스들을 배치하고자 하는 기능을 켤 때 사용됩니다.
float: left;/float: right; : 특정 오브젝트를 브라우저 기준으로 왼쪽끝 또는 오른쪽끝에 배치하고자 할 때 사용합니다.
clear : float을 사용했을 때 따라오는 것으로, float에서 기능을 켰을 때 그 기능을 끌 때 사용됩니다. float을 마지막으로 사용한 태그 다음에 나오는 태그에 clear값 left/right/both를 넣어주면 됩니다.
float을 사용할 때 주의점
- float을 사용하게 되면 브라우저 크기를 오브젝트 크기보다 작게 줄이려고 하면 레이어가 틀어집니다. 그렇기 때문에 고정값을 부모로 가지고 있는 영역안에서 float을 사용해야 레이어가 틀어지는 현상을 방지할 수 있습니다.
- 부모의 고정값이 float에 지정한 값의 합보다 크거나 같아야 레이어가 틀어지지 않습니다. float을 사용한 영역은 그 영역의 높이값이 부모에게 영향을 주지 않습니다.
- float을 사용한다면 position 상태는 static이거나 relative를 사용해야 합니다. 순수 3차원 속성값인 absolute와 fixed는 float과 같이 사용할 수 없습니다.
footer 안에 clear: both;를 사용하게 되면 html 코드만 봤을때 어떤 부분에서 float이 사용되었는지, 어떤 부분에서 clear가 사용되었는지 명확히 확인할 수 없습니다. 그래서 개발자가 html 구조를 빠르게 파악하기 위해서 관례적으로 사용하는 class가 이름이 clearfix입니다.
.clearfix {clear: both;}을 입력하면 됩니다.
float을 마지막으로 사용한 지점 다음에 나오는 태그에 clear: both;값을 적용함으로써 float을 어디까지 사용했는지 유추할 수 있습니다.
일정 공간을 만들어 놓고 그 안에 글자를 공간을 벗어날 정도로 입력하게 되면 글자는 공간을 벗어나서 표기됩니다.
overflow: hidden; : 공간을 벗어난 오브젝트를 감추고 싶을때 사용합니다.
overflow-x: scroll/overflow-y: scroll : 공간을 벗어난 오브젝트는 감추고, 공간 크기는 유지하면서 어떠한 내용물이 있는지 scroll로 알고 싶을때 사용합니다.
overflow와 float을 결합해서 사용하게 되면 자식의 높이값을 부모가 인식할 수 있도록 만들 수 있습니다.
display는 Inline요소와 Block요소로 바꿀 수 있고, Flex요소로도 바꿀 수 있습니다.
flex영역으로 지정된 부모의 자식들은 자동으로 x축으로, 기본적으로 왼쪽에서부터 정렬됩니다.
flex-direction
- 정렬 방향
-
flex-direction: row;(기본값) : x축 정렬
-
flex-direction: column; : y축 정렬
-
flex-direction: row-reverse; : x축 역순 정렬
-
flex-direction: column-reverse; : y축 역순 정렬
flex-wrap
flex-wrap: nowrap; : 부모 영역을 벗어나지 않고 그 안에 있는 것들을 자동으로 부모 영역의 사이즈에 맞춥니다.
flex-wrap: wrap; : 부모 영역보다 자식들의 크기의 합이 더 크면 자동으로 줄바꿈 현상을 만들어 줍니다.(float에서의 현상과 유사)
flex-flow: row wrap; : direction과 wrap을 한번에 지정하고자 할때 사용됩니다.
justify-content
justify-content : x축 정렬 작업을 진행할 때 사용하는 속성입니다.
justify-content : flex-start; : justify-content의 기본적인 속성값. 왼쪽에서부터 정렬할 때 사용합니다.
justify-content : flex-end; : 오른쪽에서부터 정렬할 때 사용합니다.
justify-content : flex-center; : 가운데에 정렬할 때 사용합니다.
justify-content : space-between; : 각 영역의 안쪽에 균일한 간격을 만들때 사용합니다.
justify-content : space-around; : 각 영역의 안쪽에 균일한 간격과 바깥쪽에 간격을 만들때 사용합니다.(안쪽과 바깥쪽 간격의 크기는 다릅니다.)
align-items : y축 정렬 작업을 진행할 때 사용하는 속성입니다.
align-items : flex-start; : align-itemst의 기본적인 속성값. 윗쪽에서부터 정렬할 때 사용합니다.
align-items : flex-end; : 오른쪽에서부터 정렬할 때 사용합니다.
align-items : flex-center; : 가운데에 정렬할 때 사용합니다.
align-items : baseline; : 각 오브젝트 간의 가장 밑쪽에 맞춰서 정렬할 때 사용합니다.
- flexbox.help 사이트를 가서 참고
중앙 정렬하는 방법
- margin: 0 auto;(앞에 나오는 값은 상하, 뒤에 나오는 값은 좌우)를 사용하는 방법
- position: relative;를 적용해서 left: 50%;, margin-left: width값의 절반값을 사용하는 방법(width값이 변경될때마다 margin-left의 값도 변경)
- css center trick 사이트를 가서 참고
학습한 내용 중 어려웠던 점 또는 해결못한 것들
flex를 사용하여 정렬하는 방법이 가장 양도 많고 헷갈렸습니다. 태그들간의 부모자식 관계와 여러 경우의 수들을 모두 생각하면서 작업하기에는 너무 양이 많아서 어떤 경우에 어떻게 조합을 해서 작성해야 하는지 강의를 보면서도 헷갈릴 정도였습니다. 실습하게 된다면 혼자서는 못한다는 생각까지 하게 되었습니다.
해결방법 작성
실습할 때 강사님께서 알려주신 flexbox.help 사이트를 보고 참고하면서 작성하고 비슷한 것들은 따로 차이점을 위주로 다시 정리해서 복습을 하겠습니다.
학습 소감
오늘 강의를 듣고 자신감이 많이 떨어졌었는데 강사님께서도 저와 같은 사람들의 기분을 잘 아시는지 참고해서 공부하면 좋은 사이트를 알려주셔서 많은 도움이 되었습니다. 오브젝트를 정렬시킬 때 이렇게 많은 경우의 수가 필요한지 몰랐었고, 다시 한번 개발자분들에게 놀랐던 수업이었습니다.
