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

Question

안녕하세요 선생님, ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 를 듣다가 궁금한 점이 생겨 질문 드립니다.   10:32 분에 보여지는 .dropdown { width: 150px'} .dropdown-btn { width:inherit;}   14:50 분 .tour-item { width:400px;} .tour-photo img { width:100%;}   둘다 부모 자식관계라 부모의 크기를 따라가는 것도 이해가 되었는데 inherit 과 100% 는 그럼 같은 기능을 가진 코드일까요? 두 가지 방식 모두 사용할 수 있다는 것을 소개해주신건지, 아님 특정 상황에 각각의 사용법이 있는지 궁금합니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. tnrud2668님의 질문과 관련하여 CSS inherit 과 width: 100% 의 차이에 대해서 궁금해 하시는군요. inherit 키워드는 해당 속성을 부모 요소로부터 상속받게 하는 것을 의미합니다. 반면 width: 100% 는 해당 요소가 부모 요소의 내부 너비만큼 크기를 가지도록 설정하는 것입니다. 이 두 코드는 비슷해 보이지만 미묘한 차이가 있습니다. inherit 은 정확히 부모 요소의 width 값을 상속받아 동일한 값을 가집니다. 반면 width: 100% 는 부모 요소의 가용 너비(예: 패딩이나 마진을 제외한 내부 공간)의 100%를 차지합니다. 대부분의 경우 결과적으로 비슷하게 작동할 수 있지만, 상속받는 요소의 상위 요소에 여러 계층의 CSS 규칙이 적용되는 경우 차이가 나타날 수 있습니다. 말씀하신 강의 부분과 유사한 내용을 다룬 질문 링크를 추천해드리겠습니다: inherit - 이 링크에서는 .dropdown 과 .dropdown-btn 의 width 속성에 대하여 inherit 과 100% 가 유사하게 동작할 수 있음을 설명하고 있습니다. 위의 답변을 통해 올바른 상황에서 각각의 속성을 어떻게 사용할 수 있는지 이해가 되셨기를 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

코딩웍스(Coding Works) · Answer

크게 구분하실 필요는 없습니다. 둘 다 같은 역할을 한다고 보시면 됩니다. 그리고 아래 인프런 AI 인턴이 적은 미묘한 차이 참고 정도로 보시면 됩니다. 오호... 인프런 AI 인턴 생각보다 똑똑하네요. AI가 요새 너무 똑똑해져서 밥그릇이 걱정됩니다.