< Quetsion >
div를 가운데 정렬하는 방법 중 absolute 를 적용해보았는데, 화면을 줄이거나 늘려보았을때
이미지 크기와 구역이 겹치는 등 화면 크기가 계속 달라졌었다.
-> 이미지 or 옆div 의 높이때문에 / 밖으로 싼 div의 80% 만 높이를 적용해서 아래는 선택안되는것
< 튜터님 피드백 >
- 보통 absolute 는 어느 한 부분에 고정시킬때 사용한다. ex) 사진속 한 부분의 버튼, 헤더
- left, right 는 position 을 fix 했을때 적용할 수 있다.
- div 밖 body, 부모 div 의 높이가 제대로 잡혀있지 않았다.
- flex 사용하는것을 추천!
- realtive & absolute 는 짝꿍이다.
relative 값을 활용한 배치는
absolute 값을 가지는 하위 요소가 구조 상의 부모 요소에 위치 상의 부모 요소가 될 수 있도록
position: relative; 값을 부여하는 용도로 쓰인다. 즉, position: relative;가 명시되어 있다면,
그 요소의 자식, 후손 요소에 position: absolute;를 통해서 무엇인가가 배치되고 있다고 유추할 수 있다.
< 코드 재작성시 참고내용 >
-
justify-conten : 가로 가운데축으로 오게함
-
align-items: 세로의 가운데축으로 오게함
-
disply: flex;
< 개선할 부분 >
- 구조는 제대로 적용이 되는듯하나 옆에 세로스크롤이 생긴것 / 반응형일때 이미지 삽입을 어떻게 할건지가 고민이다.
