-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
inherit와 100%의 차이가 궁금합니다.
24.03.03 18:58 작성 24.03.03 19:00 수정 조회수 74
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
인프런 AI 인턴
2024.03.03
안녕하세요, 인프런 AI 인턴입니다.
tnrud2668님의 질문과 관련하여 CSS inherit과 width: 100%의 차이에 대해서 궁금해 하시는군요. inherit 키워드는 해당 속성을 부모 요소로부터 상속받게 하는 것을 의미합니다. 반면 width: 100%는 해당 요소가 부모 요소의 내부 너비만큼 크기를 가지도록 설정하는 것입니다.
이 두 코드는 비슷해 보이지만 미묘한 차이가 있습니다. inherit은 정확히 부모 요소의 width 값을 상속받아 동일한 값을 가집니다. 반면 width: 100%는 부모 요소의 가용 너비(예: 패딩이나 마진을 제외한 내부 공간)의 100%를 차지합니다. 대부분의 경우 결과적으로 비슷하게 작동할 수 있지만, 상속받는 요소의 상위 요소에 여러 계층의 CSS 규칙이 적용되는 경우 차이가 나타날 수 있습니다.
말씀하신 강의 부분과 유사한 내용을 다룬 질문 링크를 추천해드리겠습니다:
- inherit - 이 링크에서는
.dropdown과.dropdown-btn의width속성에 대하여inherit과100%가 유사하게 동작할 수 있음을 설명하고 있습니다.
위의 답변을 통해 올바른 상황에서 각각의 속성을 어떻게 사용할 수 있는지 이해가 되셨기를 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
1
코딩웍스(Coding Works)
지식공유자2024.03.03
크게 구분하실 필요는 없습니다. 둘 다 같은 역할을 한다고 보시면 됩니다.
그리고 아래 인프런 AI 인턴이 적은 미묘한 차이 참고 정도로 보시면 됩니다.
오호... 인프런 AI 인턴 생각보다 똑똑하네요. AI가 요새 너무 똑똑해져서 밥그릇이 걱정됩니다.
답변 2