[코드잇 스프린트] 0314 데일리 퀴즈

 

 

 

 

1. relative 포지션의 A, 그 밑의 absolute 포지션의 B가 있다. B를 자신의 조상 요소인 A와 완전히 겹치게 두고 싶을 때, 어떤 코드를 작성해야 할까?

 

답: 

/* A 요소에 relative 포지션을 설정한다. */
.A {
    position: relative;
}

/* B 요소에 absolute 포지션을 설정하고 top, left 값을 0으로 지정하여 A 요소와 겹치도록 한다. */
.B {
    position: absolute;
    top: 0;
    left: 0;
}

 

 

2.

  

다음의 사진을 보았을 때, 아이템들의 둘레에 균일한 간격을 주게 하는 flex 컨테이너의 속성은?

 

답: justify-content: space-around;

 

3.  flex와 grid의 차이점을 설명해라

 

답: flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있지만 grid는 2차원으로 수평, 수직 영역을 동시에 나눌 수 있다.

 

 

 

*추가 공부

CSS z-index 속성의 3가지 포인트

Q1. CSS가 아래와 같이 작성되어 있을 때, HTML 코드에 있는 3개의 <div>를 상위에 표시되는 순서대로 나열해라

<div id="first">
    1st Box
</div>
<div id="second">
    2nd Box 
    <div id="third">3rd Box</div>
</div>

#first
{
    z-index     : 30;
    width       : 200px;
    height      : 200px;
    background  : #3366cc;
}
#second
{
    z-index     : 20;
    width       : 200px;
    height      : 200px;
    margin-top  : -100px;
    background  : #cc3333;
}
#third
{
    z-index     : 50;
    width       : 200px;
    height      : 200px;
    margin-top  : -100px;
    margin-left : 100px;
    background  : #ffaa33;
}

A1. 3rd – 2nd – 1st

z-index 값을 지정하기 위해서는 해당 요소의 position 속성이 relative, absolute, fixed 중 하나여야만 한다.

 

position 속성이 지정되지 않은 상태라면, 이 요소들은 z-index가 0인 것처럼 작동한다. 따라서 HTML 소스 상에서 나중에 등장하는 요소가 앞에 나온 요소를 덮어버리게 된다.

 

 

 

Q2. CSS가 아래와 같이 작성되어 있을 때, HTML 코드에 있는 3개의 <div>를 상위에 표시되는 순서대로 나열해라

#first
{
    position    : relative; 
    z-index     : 30;
    width       : 200px;
    height      : 200px;
    background  : #3366cc;
}
#second
{
    position    : relative; 
    z-index     : 20;
    width       : 200px;
    height      : 200px;
    margin-top  : -100px;
    background  : #cc3333;
}
#third
{
    position    : relative;
    z-index     : 50;
    width       : 200px;
    height      : 200px;
    margin-top  : -100px;
    margin-left : 100px;
    background  : #ffaa33;
}

 

A2. 1st – 3rd – 2nd

z-index의 값은 같은 depth의 요소끼리 비교하는 것이 원칙이다.

 

z-index 값은 같은 depth에 있는 형제 요소(Siblings) 간에 비교하여 상하를 결정하는 것이 원칙이며, 자식 요소는 부모 요소의 비교결과를 따라가게 된다.

위 코드의 경우에는 형제간인 1st와 2nd를 비교하여 이미 1st가 상위에 있는 것으로 결론내렸기 때문에, 2nd의 자식 요소인 3rd는 아무리 높은 z-index 값을 주어도 1st보다 상위에 표시되지 않는다.

 

 

 

 

Q3. CSS가 아래와 같이 작성되어 있을 때, HTML 코드에 있는 3개의 <div>를 상위에 표시되는 순서대로 나열해라.

#first
{
    position    : relative; 
    z-index     : 30;
    width       : 200px;
    height      : 200px;
    background  : #3366cc;
}
#second
{
    position    : relative; 
    /*z-index   : 20;*/
    width       : 200px;
    height      : 200px;
    margin-top  : -100px;
    background  : #cc3333;
}
#third
{
    position    : relative;
    z-index     : 50;
    width       : 200px;
    height      : 200px;
    margin-top  : -100px;
    margin-left : 100px;
    background  : #ffaa33;
}

 

A3. 3rd – 1st – 2nd

z-index의 기본값은 auto이며, 이 경우 브라우저는 그 요소를 제쳐두고 자식 요소의 z-index 값을 비교대상으로 삼는다.

 

z-index에 아무런 값이 지정되지 않은 경우, 기본값은 auto가 된다. z-index가 auto로 지정된 요소는 z-index가 0으로 입력된 것처럼 작동하는 동시에, z-index 값의 비교대상을 자식 요소에게 넘겨준다.

위 코드에서는 2nd의 z-index가 auto이므로, 1st와 z-index를 비교할 대상은 3rd가 된다. 비교 결과 3rd의 z-index가 1st의 z-index보다 더 높으므로, 결과적으로 3rd가 가장 위에 표시되는 결과를 보게 된다.