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

작성한 질문수

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

border와 backgorund-color 속성 차이를 알고 싶습니다.

작성

398

안녕하세요

똑같은 조건에서 child와 grandchild에.

다른 색상의 border 값을 줘서 얻는 div의 위치 결과(01)와,

다른 색상의 background-color 값을 줘서 얻는 div의 위치 결과(02)가 다른데,

어떤 원리가 적용된건가요 ?

왜 border는 두께 값 만큼 grandchild가 밀려나고,

background-color는 완전히 겹쳐지는 결과가 나오는 건가요 ?

답변 1

지식공유자

편의상 질문글의 캡쳐 이미지를 상단 하단으로 표현하겠습니다.

상단 캡쳐는 .parent > div에 배경색을 주고, .paernt > div div 배경색을 줬으니 나중에 배경을 준 orange가 보이게 되는겁니다.

하단 캡쳐는 .parent > div에 보더만 주고, .paernt > div div 보더만 줬으니 배경이 없이 가운데가 투명(trasnparent)로 보이게 되는겁니다.

원리는 따로 없어요. 배경색을 사용했느냐 사용하지 않았느냐의 차이 뿐입니다.

질문자

제가 여쭤보고자 한 내용은,,

서로 부모자식관계에 있고, 따로 위치를지정하지 않았을 때,

배경색 속성은 완전히 겹쳐져 뒤에 입력된 값만 보여지는데,

보더 속성은 자식요소가 부모위치로부터 보더의 두께만큼(top, left) 밀려나는 것을 확인했습니다.

여기에도 다른 원리가 없는건가요 ?

왜 보더 속성은 배경색 속성처럼 완전히 겹쳐지지 않고 그 두께만큼 이동하는지 알고싶습니다.

지식공유자

아... 질문이 그거군요.

html 요소의 height width에는 보더의 두께는 포함되지 않습니다.

그래서 2번째 그래서 3픽셀 * 2 = 6픽셀이 오버된거에요.

곧, 1번 그림은 보더가 없기 때문에 정확히 일치하는 것이구요.

보더를 height width에 포함시키는 속성은 box-sizing: border-box입니다.

작성한 질문수