• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

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

24.03.03 18:58 작성 24.03.03 19:00 수정 조회수 71

1

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

 

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

width: 150px'}

.dropdown-btn {

width:inherit;}

 

14:50 분

.tour-item {

width:400px;}

.tour-photo img {

width:100%;}

 

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

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

답변 2

·

답변을 작성해보세요.

2

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.03.03

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

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

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

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

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

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

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

1

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

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

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