-
질문 & 답변
카테고리
-
세부 분야
자격증 (디자인)
-
해결 여부
해결됨
border랑 겹치는 부분은
22.02.28 02:59 작성 조회수 414
1
실습하다가
border랑 겹치는 부분도 안생기게 아예 바깥으로 하고 싶은데
제가 생각한거는 부모요소에 box-sizing : border-box를 주면 된다고 생각했는데 안되더라구요..
어떻게 하는지 궁금합니다.
(수정)
어떻게 할까 생각해서
1번박스를 예를 들면
top : 100%로를 -> top : (.parent의 높이값 + border값);
left : 0을 -> left : (-border값);으로 주면 되더라고요
이경우는 브라우저 크기가 유동적으로 변할 경우
수정해야한다는 번거로움이있는데
px값 말고 다른방법으로 지정하는 방법이 있나요
[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
17. CSS 포지션 속성 완벽하게 이해하기(3편) – 부모요소 밖으로 위치시키기
강의실 바로가기
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2022.03.01
좌표라는 개념에서 보더를 생각하고 잡지는 않습니다.
보더는 학습할 때 사용하지 대부분의 실전 작업에서는 사용하지 않거나 1픽셀 등 미세하기 때문에 고려하지 않습니다.
만약 미세하지만 보더 밖으로 위치시키고 싶으면...
위에 얘기하신 것처럼 보더의 값을 빼줘도 됩니다.
top: calc(100% - 1px)
또는 보더를 사용하지 않고 outline을 사용해도 가능합니다.
<div class="parent">
<div></div>
</div>
.parent {
/* border: 10px solid #000; */
outline: 10px solid #000;
outline-offset: -10px;
width: 600px;
height: 300px;
position: relative;
}
.parent div {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}
답변 1