한국어
메뉴

웹 기술 기초

.card {
  box-sizing: content-box;
  width: 200px;
  padding: 10px;
  border: 2px solid #333;
  margin: 20px;
}

위의 CSS를 지정한 요소에서, 좌우 보더의 바깥쪽 끝에서 끝까지의 폭은?

  1. A200px
  2. B224px
  3. C264px
정답과 해설 보기

정답: B. 224px

CSS 박스 모델에서 요소는 안쪽부터 콘텐츠, 패딩, 보더, 마진 순으로 겹쳐 있습니다. box-sizing: content-box(기본값)에서는 width가 콘텐츠의 폭만을 나타내므로, 보더 바깥쪽까지의 폭은 200 + 10 × 2 + 2 × 2 = 224px입니다. 마진은 보더 바깥쪽의 여백으로, 다른 요소와의 간격이 됩니다. box-sizing: border-box로 하면 width가 보더까지 포함한 폭이 되어, 콘텐츠의 폭은 200 − 24 = 176px이 됩니다.

이 분야 연습하기 분야로 돌아가기

웹 기술 기초의 다른 문제

  1. 다른 스타일 지정은 없는 것으로 한다. 위의 HTML에서 'Hello'라는 문자의 색은?
  2. 브라우저가 첫 화면을 표시하기까지의 처리(중요 렌더링 경로)에서는 <head> 안에 속성 없이 쓴 <script src="app.js">가 있으면 HTML 파싱이 거기서 멈춘다. 이 요소에 defer 속성을 붙였을 때의 동작으로 올바른 것은?
  3. 위의 JavaScript를 브라우저에서 실행했을 때 콘솔에 표시되는 문자의 순서로 올바른 것은?
  4. 브라우저의 동일 출처 정책에서 https://www.example.com/app/index.html과 같은 출처로 간주되는 URL은?
  5. https://app.example.com 페이지의 JavaScript가 fetch를 사용하여 https://api.example.net/orders로 Content-Type: application/json 본문을 붙인 POST 요청을 보내려 한다. 이때 CORS의 동작으로 올바른 것은?