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

 

 

 

 

 

1. CSS Box Model의 HTML요소를 설명하기
모든 HTML요소는 박스 모양으로 구성이 되고, 이것을 박스모델이라고 한다.
박스모델의 html 요소는 콘텐츠, 패딩, 보더, 마진 4가지가 있다.

먼저 콘텐츠는 텍스트나 이미지와 같은 박스의 실질적인 내용을 담당하는 부분이고, 패딩은 콘텐츠와 보더 사이의 간격을 말한다. 보더는 콘텐츠와 패딩 주변을 감싸는 테두리이며 마진은 테두리와 다른 요소 사이의 간격을 말한다.


2. .class > a와 .class a의 차이점 설명하기
전자는 .class는 직계 자식인 a태그를 선택하는 반면에 후자는 .class의 모든 a태그를 선택한다.

3. .text의 글자색이 흰색으로 변경되지 않은 이유 설명하기

<div id="header">
    <h1 class="header-title"><span>Code</span>it</h1>
    <div class="header-content">
        <p class="text">css 공부</p>
    </div>
</div>

#header > .text{
    color: #ffffff;
}

text 클래스는 header id의 자식이 아니라 자손인데 잘못된 코드에서는 자식 결합자인 꺽쇠를 사용하고 있다.
따라서 꺽쇠를 없애거나 #header > .header-content > .text로 코드를 수정하면 올바르게 동작한다.

4. a:hover 가상 클래스 설명하기

a:hover는 사용자가 링크 요소 위로 마우스를 움직였을 때 활성화되는 가상 클래스이다. 따라서 링크에 마우스를 올렸을 때 링크의 글자색을 빨간색으로 변하게 해주거나 텍스트에 밑줄을 추가해주는 등 시각적인 효과를 줄 때 사용된다.