inherit와 100%의 차이가 궁금합니다.

중상급 퍼블리싱을 위한 CSS3의 모든 것

hover 가상클래스(hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠)

해결된 질문

작성

162

수정됨

안녕하세요 선생님, ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 를 듣다가 궁금한 점이 생겨 질문 드립니다.

10:32 분에 보여지는
.dropdown {

width: 150px'}

.dropdown-btn {

width:inherit;}

14:50 분

.tour-item {

width:400px;}

.tour-photo img {

width:100%;}

둘다 부모 자식관계라 부모의 크기를 따라가는 것도 이해가 되었는데 inherit 과 100% 는 그럼 같은 기능을 가진 코드일까요?

두 가지 방식 모두 사용할 수 있다는 것을 소개해주신건지, 아님 특정 상황에 각각의 사용법이 있는지 궁금합니다.

HTML/CSS

답변 2

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

tnrud2668님의 질문과 관련하여 CSS inherit과 width: 100%의 차이에 대해서 궁금해 하시는군요. inherit 키워드는 해당 속성을 부모 요소로부터 상속받게 하는 것을 의미합니다. 반면 width: 100%는 해당 요소가 부모 요소의 내부 너비만큼 크기를 가지도록 설정하는 것입니다.

이 두 코드는 비슷해 보이지만 미묘한 차이가 있습니다. inherit은 정확히 부모 요소의 width 값을 상속받아 동일한 값을 가집니다. 반면 width: 100%는 부모 요소의 가용 너비(예: 패딩이나 마진을 제외한 내부 공간)의 100%를 차지합니다. 대부분의 경우 결과적으로 비슷하게 작동할 수 있지만, 상속받는 요소의 상위 요소에 여러 계층의 CSS 규칙이 적용되는 경우 차이가 나타날 수 있습니다.

말씀하신 강의 부분과 유사한 내용을 다룬 질문 링크를 추천해드리겠습니다:

inherit - 이 링크에서는 .dropdown과 .dropdown-btn의 width 속성에 대하여 inherit과 100%가 유사하게 동작할 수 있음을 설명하고 있습니다.

위의 답변을 통해 올바른 상황에서 각각의 속성을 어떻게 사용할 수 있는지 이해가 되셨기를 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

코딩웍스(Coding Works)

지식공유자

크게 구분하실 필요는 없습니다. 둘 다 같은 역할을 한다고 보시면 됩니다.

그리고 아래 인프런 AI 인턴이 적은 미묘한 차이 참고 정도로 보시면 됩니다.

오호... 인프런 AI 인턴 생각보다 똑똑하네요. AI가 요새 너무 똑똑해져서 밥그릇이 걱정됩니다.

인프런 커뮤니티 질문&답변

inherit와 100%의 차이가 궁금합니다.