E-1 레이아웃 제작 중 궁금점

Question

강의 내용중에는 슬라이드 아이템에 height: calc(100vh - 100px); 을 주셨는데, .main-content > div에 똑같은 값을 주고 슬라이드 아이템에 height: inherit;을 주는건 안될까요?

코딩웍스(Coding Works) · Answer

헤더의 높이 100픽셀을 빼고 브라우저 높이를 가득 채워야 하기 때문에 height: inherit로는 안될거에요. height: inherit란 부모요소의 높이를 받아오는 건데 .main-content > div의 높이가 100%일 경우 .main-content > div 밑에 div에 height: inherit를 적용하면 될거에요. 그런데 이렇게 하면 중복해서 코드를 작성해야 하니 슬라이드 아이템에 height: calc(100vh - 100px); 이렇게 주는게 간편한거죠.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. Cheon님. 질문 주신 내용은 슬라이드 이미지의 높이를 설정할 때 발생하는 레이아웃 설정 방법에 관한 것입니다. 먼저, height: calc(100vh - 100px); 를 사용하여 슬라이드 이미지의 높이를 설정하는 것은 브라우저의 전체 뷰포트 높이에서 특정 픽셀 값을 뺀 결과로 슬라이드의 높이를 정하는 방식입니다. 이 경우 main-content 의 각 div 요소가 개별 높이를 갖도록 설정되어 있습니다. 만약 .main-content > div 에 동일한 height: calc(100vh - 100px); 를 주고 슬라이드 아이템에 height: inherit; 을 사용한다면, 다음과 같은 점을 고려해야 합니다: 계산 결과의 상속 : inherit 속성은 부모 요소가 가지고 있는 스타일 속성을 자식 요소가 동일하게 따라간다는 의미입니다. 따라서 부모 요소에 height: calc(100vh - 100px); 을 정확히 설정하였다면 슬라이드 아이템에 height: inherit; 을 적용해도 동일한 높이를 적용받게 됩니다. CSS 특징 고려 : CSS 상속의 경우 일부 속성(hight 같은 레이아웃 관련 속성)은 기본적으로 상속되지 않으므로, 명시적으로 inherit 를 지정하여야만 같은 값을 상속받습니다. 레이아웃 구조에 따른 유연성 : 좀 더 유연한 레이아웃을 원할 경우, 직접적으로 슬라이드 아이템에 원하는 height 를 주는 것이 때로는 더 간결하고 의도한 바를 명확히 나타낼 수 있습니다. 아래 링크에서는 비슷한 문제에 대한 해결 방법과 최적화된 레이아웃 설정 방식에 대해 논의하고 있습니다. 참고해 보시면 더욱 도움이 되실 것입니다: E타입 레이아웃 : 레이아웃 설정 시 발생할 수 있는 스크롤바 문제의 해결 방법에 대한 답변입니다. 위 내용을 참고하시어 코드에서 조정해 보시면 설정하시는데 도움이 될 것입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.