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

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

CSS 포지션 속성 완벽하게 이해하기(3편) – 부모요소 밖으로 위치시키기

CSS 포지션 속성 완벽하게 이해하기(3편)

작성

207

자식요소를 부모요소 밖으로 위치 시킬 때 강의시간 10:23 쯤에 보면 예제에는 자식요소가 부모요소 테두리 바깥쪽까지 나가게 되는데, 선생님 코드로는 자식요소가 부모요소 테두리에 겹쳐지게 됩니다. 혹시 테두리 완전 밖까지 나가게 하는 방법이 있는가요?

답변 1

지식공유자

이 부분은 자식요소에 관련된건 아니구요.

부모요소에 box-sizing: border-box를 주시면 부모요소의 보더가 부모요소의 높이와 너비에 포함됩니다.

곧, 안쪽으로 들어간다는 의미입니다.

그리고 질문 주시지 않았으면 영상에서 제가 편집을 하지 않아서 불쾌하시게 해드리는 구간이 있었는데 그거 여전히 모르고 있었을거에요. 편집해서 다시 올리겠습니다.ㅜㅜ

아마 질문 주신분은 .parent의 border 두께가 5px이다보니, .child1의 top을 100%로 주면 5px 만큼 겹친다는 뜻 같아요!

그래서 5px도 겹치지 않게 하는 방법이 있는지 물어본 것 같습니다.

저같은 경우는 .child1은 margin-top을 5px,

.child2는 margin-left를 5px, .child3는 margin을 5px씩 각각 주었더니 겹치치 않고 딱 맞게 되었는데 이렇게 해도 괜찮을까요?

작성한 질문수