질문입니다.

반응형 웹사이트 포트폴리오(Architecture Agency)

PC 레이아웃 섹션 상세 퍼블리싱(Location Section) - #02

해결된 질문

20.12.22 22:34 작성

151

.feature가 width: 70%; 인상태이고

그 바로아래 자식인 .office 는 width: 60%,

.service는 width: 40%를 주셨는데 이상태에서

.office에 padding-right를 100px주면 .service가 옆으로 밀려서 .feature 의 width를 초과해서 줄바꿈이 되야 하는게 아닌가요?

답변 2

지식공유자

2020. 12. 23. 22:53

이 부분은 웹개바르르 님이 착각하실 수도 있는 부분일거에요.

(60% + 100px) + 40% 그러니까 100%를 초과했으니까 가로배치가 안되야 하는거 아닌가라고 아마도 이렇게 생각하지 않으셨을까 합니다.

하지만 이 경우는 60% 내에서 100px를 쓴 것이기 때문에 6:4로 유지하는 경우가 됩니다.

box-sizing: border-box가 있기 때문에 가능합니다.

style.css 가장 상단에 이 부분이 있습니다. 그래서 패딩값 100px을 60% 내에 포함시켜서 너비가 초과되지 않습니다.

/* Reset CSS */
* { box-sizing: border-box; }

물론 마진 좌우를 주면 초과되니까 안됩니다. 패딩만 해당 됩니다.

질문자

2020. 12. 24. 16:25

아 처음에 box-sizing: border-box 줬던걸 깜박했었네요 .. 감사합니다

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