개발자
css에서 % 단위
만약 어떤 요소의 width를 % 단위를 사용하면 부모 요소의 width를 기준으로 한 퍼센트 값이 적용되잖아요. 그런데 부모 요소가 width가 지정되어 있지 않고 하위 컴포넌트들을 감싸기만 해서 유동적인 width를 가지는 상황이고 부모의 부모 요소가 고정된 width를 가지는 상황이라면, 부모의 부모 요소의 width를 기준으로 퍼센트 값이 되는건가요? react와 tailwind를 사용한 예시로 다음과 같은 html 구조가 있다고 할 때, 저는 {item}을 감싸는 div의 width에서 %를 쓰면 <div className="flex items-center w-full gap-[30px]"> 요소의 width를 기준으로 될 줄 알았는데 <div className="w-full overflow-hidden"> 요소를 기준으로 한 값이 적용되는 거 같더라구요. 원래 css의 %단위가 무조건 직계 부모의 값을 기준으로 하는게 아니라 직계 부모의 값이 고정된 값이 아니면 더 상위의 부모들 중 고정 값인 요소를 기준으로 하게 되는 건가요?
1<div className="w-full overflow-hidden">
2 <div className="flex items-center w-full gap-[30px]">
3 {components.map((item, index) => (
4 <div className="flex-shrink-0" style={{ width: 'calc(100% - 500px)' }}>
5 {item}
6 </div>
7 ))}
8 </div>
9</div>
답변 0
첫 답변을 기다리고 있어요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 07월 07일
CSS에서의 `%` 단위는 항상 직계 부모 요소를 기준으로 계산됩니다. 즉, 자식 요소의 width가 `%`로 설정되어 있으면, 그 값은 항상 부모 요소의 너비에 대한 비율로 계산됩니다. 따라서, 여러분이 이야기한 상황에서 `calc(100% - 500px)` 는 `<div className="flex-shrink-0">`의 직접적인 부모인 `<div className="flex items-center w-full gap-[30px]">`를 기준으로 계산될 것입니다. 하지만 중요한 점은, flex container(`className="flex items-center w-full gap-[30px]"`) 내부에서 flex item(`className="flex-shrink-0"`)의 너비가 `calc(100% - 500px)`과 같이 정해져 있다면, 해당 item의 최종 너비는 부모 flex container의 사용 가능한 공간을 기준으로 결정이 됩니다. 만약 다른 flex item들이 있고 그 요소들도 등장하게 되면 그들 사이에서 사용 가능한 공간을 나누어 갖게 됩니다. 결론적으로 말씀드리자면 CSS의 % 값은 직계 부모를 참조하지만 Flexbox와 같은 레이아웃 모델에서는 복잡성에 따라 실제 결과가 달라질 수 있습니다. 이것이 여러분이 경험한 바와 같이 % 값이 예상과 다르게 동작하는 원인일 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!