border와 backgorund-color 속성 차이를 알고 싶습니다.
440
작성한 질문수 8
안녕하세요
똑같은 조건에서 child와 grandchild에.
다른 색상의 border 값을 줘서 얻는 div의 위치 결과(01)와,
다른 색상의 background-color 값을 줘서 얻는 div의 위치 결과(02)가 다른데,
어떤 원리가 적용된건가요 ?
왜 border는 두께 값 만큼 grandchild가 밀려나고,
background-color는 완전히 겹쳐지는 결과가 나오는 건가요 ?
답변 1
0
편의상 질문글의 캡쳐 이미지를 상단 하단으로 표현하겠습니다.
상단 캡쳐는 .parent > div에 배경색을 주고, .paernt > div div 배경색을 줬으니 나중에 배경을 준 orange가 보이게 되는겁니다.
하단 캡쳐는 .parent > div에 보더만 주고, .paernt > div div 보더만 줬으니 배경이 없이 가운데가 투명(trasnparent)로 보이게 되는겁니다.
원리는 따로 없어요. 배경색을 사용했느냐 사용하지 않았느냐의 차이 뿐입니다.
0
제가 여쭤보고자 한 내용은,,
서로 부모자식관계에 있고, 따로 위치를지정하지 않았을 때,
배경색 속성은 완전히 겹쳐져 뒤에 입력된 값만 보여지는데,
보더 속성은 자식요소가 부모위치로부터 보더의 두께만큼(top, left) 밀려나는 것을 확인했습니다.
여기에도 다른 원리가 없는건가요 ?
왜 보더 속성은 배경색 속성처럼 완전히 겹쳐지지 않고 그 두께만큼 이동하는지 알고싶습니다.
0
아... 질문이 그거군요.
html 요소의 height width에는 보더의 두께는 포함되지 않습니다.
그래서 2번째 그래서 3픽셀 * 2 = 6픽셀이 오버된거에요.
곧, 1번 그림은 보더가 없기 때문에 정확히 일치하는 것이구요.
보더를 height width에 포함시키는 속성은 box-sizing: border-box입니다.
class 값 한 번에 부여하는법
2
79
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
69
1
div#css-checker-widget의 해결방
1
60
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
79
2
강의듣는법
1
73
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
67
2
input checked 질문합니다.
0
76
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
140
2
Part 1 영상 안나옵니다
1
88
1
제이쿼리 작동이 안됩니다
1
199
3
강의 내용 질문있습니다.
1
120
2
일정 부분만 주석하는 방법
1
211
2
폰트어썸
1
134
2
인접선택자에 대한 질문드립니다!
1
129
2
delay 적용 안됨
1
134
1
rotateY(360deg)가 적용이 안됩니다!
1
186
2
세로이동할때 height값
1
138
2
폰트어썸이 안되요..
1
484
2
화면 정중앙에 오게끔 할수있나요?
1
169
1
어코디언 네비게이션 중
1
124
1
라이브서버 문제
1
225
2
넷플릭스 어코디언 예제 질문
1
102
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
154
1
active 관련 질문
1
145
2