■ 형제 관계에 따른 position 속성값에 따라서, 결과가 어떻게 달라지는가.
첫 번째 형제에 position이 2차원 혹은 3차원인가에 따라서 레이어가 겹칠지 안겹칠지 결정된다.
※ 큰 구역은 2차원으로, 작은 구역은 2차원 혹은 3차원 사용을 추천 – 큰 구역들을 3차원으로 설정하면 레이어가 겹칠 수 있기 때문
● float : 같은 선상에 박스들을 배치하고자 하는 기능을 켤 때 사용하는 속성
● clear : float의 기능을 끄고자 할 때 사용하는 속성
※ 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를 사용했는지 파악할 수 있다.
● 지정된 영역보다 많은 오브젝트가 있을 때, 사용하는 속성
① overflow: hidden; - 범위를 넘은 오브젝트를 전부 숨김
② overflow-x: scroll; 와 overflow-y: scroll; - 숨겨진 범위를 스크롤을 통해 확인할 수 있음
■ 실무 tip 2 : overflow와 float을 결합해서 사용하면 자식의 높이값이 부모에게 영향을 줄 수 있게 만들 수 있다.
● 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 사이트에서 정렬을 확인해 볼 수 있다.
① css에서
.sample { margin: 0 auto; }
② css에서
.sample {
position: relative
width: 300px;
height: 300px;
left:50%
margin-left: -150px;
}
※ 단점은 width 값이 변경되면 margin-left 값도 수정해줘야 한다.
이번 강의 내용에서는 특별히 이해가 안되는 내용은 없었기에 큰 문제가 없었습니다.
이해가 바로 되지 않는 부분은 강의를 반복해서 들어보거나, 인터넷에서 다른 사람의 설명을 참고해서 문제를 해결하였습니다.
position 부문의 연장선상이라는 느낌이라 이해를 하는데 시간이 꽤 걸렸습니다. float와 flex를 이용하여 레이아웃의 정렬을 사용할 수 있게 되어서 더 깔끔한 형태로 웹페이지를 만들 수 있을 것 같습니다.