당신을 혼란스럽게 할 5가지 CSS 질문

얘들 아!

CSS에 대해 몇 가지 질문을 드리고 싶습니다. 그러나 나는 당신에게 경고합니다. 그들은 당신을 혼란스럽게 할 수 있습니다. 그런 일이 발생하면 이에 대해 자세히 알아보는 데 도움이 되는 항목a live cheat sheet을 만들었습니다.

그러나 독서를 시작하기 전에 나는 떠납니다 the link on my Substack newsletter about CSS . 당신은 무엇을 만들지 알고 있습니다 😎

또한 저의 스폰서인 Ben Rinehart, Tanya Ten, Konstantinos Kapenekakis에게도 감사드립니다. 저는 그들의 지원 없이 이 글을 쓰지 않았습니다.

갑시다!

Q1. 다음 예에서 display 요소에 대한 .child 속성의 계산된 값은 무엇입니까?

<div class="parent">
  <span class="child">I'm a child</span>
</div>

.parent {
  display: flex;
}

.child {
  display: inline-grid;
}

대답
정답은 grid 값입니다.

Q2. 다음 예에서 .child 요소 사이의 간격은 무엇입니까?

<div class="parent">
  <div class="child">I'm a child #1</div>
  <div class="child">I'm a child #2</div>
</div>
<div class="parent-flex">
  <div class="child">I'm a child #1</div>
  <div class="child">I'm a child #2</div>
</div>

.parent-flex {
  display: inline-flex;
  flex-direction: column;
}

.child:first-child {
  margin-bottom: 20px;
}

.child:last-child {
  margin-top: 10px;
}

대답
정답은 20px 및 30px 입니다.

Q3. 다음 예에서 width 요소에 대한 .child 속성의 계산된 값은 무엇입니까?

<div class="parent">
  <span class="child">I'm a child</span>
</div>

.parent {
  display: grid;
  width: 500px;
}

.child {
  display: inline;
}

대답
정답은 500px 입니다.

Q4. width 요소에 대한 .child 속성의 계산된 값은 500px 입니다. 진실?

<div class="parent">
  <span class="child">I'm a child</span>
</div>

.parent {
  display: grid;
  width: 500px;
  height: 200px;
}

.child {
  margin: auto;
}

대답
아니요. 계산된 값은 내용에 따라 다릅니다.

Q5. .child 요소가 수평 및 수직 중앙에 배치됩니까?

<div class="parent">
  <span class="child">I'm a child</span>
</div>

.parent {
  display: flex;
  height: 200px;
}

.child {
  margin: auto;
}

대답
예.