종합퀴즈
• 1.다음 중 CSS에 대한 설명으로 옳지 않은 것을 고르세요. 답:D
A.CSS는 웹 애플리케이션의 스타일링을 담당하는 스타일 시트 언어다.
B.화려하고 심미적인 부분 뿐만 아니라 콘텐츠를 적당한 위치에 배치하는 레이아웃도 CSS로 수행할 수 있다.
C.같은 콘텐츠일지라도 CSS를 적용해 색약이나 장애인이 편리하게 이용할 수 있도록 도울 수 있다.
D.CSS는 웹 디자이너에게 필요한 역량이므로, 프론트엔드 개발자는 JavaScript와 같은 프로그래밍 언어에만 집중하면 된다.
해설
CSS는 화려하고 심미적인 부분 뿐만 아니라, 콘텐츠를 적당한 위치에 배치하는 레이아웃 디자인에도 유용하고, 사용하기에 따라 색약이나 장애인이 보다 편리하게 웹 애플리케이션을 이용할 수 있도록 할 수도 있음, 이와 같은 UI를 만드는 역량은 프론트엔드 개발자에게 반드시 필요한 역량
•2.다음 CSS 코드에 대한 설명으로 옳은 것을 고르세요. 답:C
A.class가 container 인 요소의 font-size 는 10px로 지정되어 있다.
B.id가 navigation-title 인 요소의 배경색은 빨간색이다.
C.class가 selected 인 요소 안에 있는 텍스트에는 밑줄이 그어져 있다.
D.id가 selected 인 요소 안에 있는 텍스트는 bold(굵게) 처리가 되 있다.
해설
A: id가 container 인 요소의 font-size는 10px로 지정되어 있다.
B: id가 navigation-title 인 요소의 글자색은 빨간색이다.
D: class가 selected 인 요소 안에 있는 텍스트는 bold 처리가 되 있다.
•3. 다음 <h1> 요소의 CSS 속성으로 적절한 것을 고르세요 답:B
해설
•배경색은 background 속성, background-color 속성 모두 지정 가능
•글꼴 색상을 정하는 속성은 color
•글꼴 그림자를 정하는 속성은 text-shadow
•4. 다음 <h1> 요소의 CSS 속성으로 적절한 것을 고르세요 답:B
해설
•글꼴이 굵기가 <h1>요소의 기본 굵기보다 얇으므로 글꼴의 굵기를 조절하는 속성인 font-weight 사용
•글꼴 색상을 정하는 속성은 color
•그림자를 설정하는 text-shadow을 사용
•5. 다음 HTML 파일에서 <li> 요소의 자식인 <ul> 요소를 제외하고 <body> 요소의 직계 자식인 <ul> 요소만 선택하기 위한 셀렉터로 가장 올바른 것을 고르세요. 답: C
A. ul {}
B. body ul{ }
C. body > ul {}
D. body ~ ul { }
해설
문제는 자식 셀렉터를 사용하라는 것과 같다,
A: ul모두 선택이며
B: 후손 셀렉터,<body>요소의 후손인 모든 <ul>요소를 선택
D: 형제 셀렉터, 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
•6.다음 HTML 파일에서 모든 <li> 요소를 선택하는 방법으로 옳은 것을 모두 고르세요. 답: A,B
A. li {}
B. body li{ }
C. body > li {}
D. body ~ li { }
해설
A: 모든 <li> 요소를 선택하는 셀렉터
B: <body>요소의 후손인 <li>요소를 선택하는 후손 셀렉터
C: 자식 셀렉터
D: 형제 셀렉터
•7.다음 셀렉터에 대한 설명으로 옳은 것을 고르세요. 답:C
A. 사용자가 방문하지 않은<a>요소를 선택
B. 사용자가 이미 방문한 <a>요소를 선택
C. <a>태그로 생성된 요소 위에 마우스를 올렸을때 선택
D. 활성화 된(클릭 된)상태일 때 선택합니다.
해설
가상 클래스 셀렉터
A: a:link { }
B: a:visited { }
D: a:active { }
•8.다음 중 HTML 문서의 모든 요소를 선택하는 셀렉터를 고르세요. 답: A
A. * { }
B. body { }
C. header { }
D. #only { }
해설
B: <body>요소 선택
C: <header> 요소 선택
D: id가 only요소 선택
•9.div#border-box의 height 속성값으로 적절한 보기를 고르세요. 답: C
A. 520px
B. 180px
C. 120px
D. 80px
해설
box-sizing의 값이 border-box인 경우, 기존 CSS box model의 box 크기 산정 방식과 달라짐
border-box의 경우 box의 높이: height + padding-top + padding-bottom + border-top + border-bottom
content-box인 경우 box의 높이:height
•10.아래 <div> 요소 제작을 위해 필요한 CSS를 고르세요. 답:B
A. padding: 50px 50px 100px 100px
B. padding: 50px 100px
C. margin: 50px 100px
D. margin: 50px 50px 100px 100px
해설
여백을 주기 위해서는 padding을 늘려야 한다.
padding 속성의 값이 두 개인 경우 상하 | 좌우에 padding이 적용
padding 속성의 값이 네 개인 경우 상 | 우 | 하 | 좌에 padding이 적용
