Q. CSS 적용 위치 3가지와 우선순위 순서는?
<p style="color: yellow;">
<style> p { color: blue; } </style>
<link rel="stylesheet" href="style.css">
Q. 외부 CSS를 HTML에 연결하는 방법은? 파일 첫 줄에 써야 하는 선언은?
<head>
<link rel="stylesheet" href="./css/style.css">
@charset "utf-8";
Q. <div>와 <span>의 차이는?
<div>
<span>
Q. class 선택자와 ID 선택자의 차이점은?
.클래스명
#아이디명
Q. 자손 선택자 nav ul과 자식 선택자 header > h1 > a의 차이는?
nav ul
header > h1 > a
>
Q. <li> 목록을 세로가 아닌 가로(수평)로 나열하려면?
<li>
li { display: inline; }
margin-right
.list-bar li { display: inline; margin-right: 30px; }
Q. nav ul li와 .list-bar li의 차이는? 언제 class를 사용하나?
nav ul li
.list-bar li
Q. list-style-type: none은 언제 쓰나? display: inline과 함께 써야 하는 이유는?
list-style-type: none
display: inline
Q. text-align: center로 내비게이션 메뉴를 가운데 정렬할 때 적용 대상은 ul인가, li인가?
text-align: center
nav ul { text-align: center; }
text-align
Q. border-radius: 50% 50% 0 50%의 네 값이 의미하는 모서리 순서는?
border-radius: 50% 50% 0 50%
50% 50% 0 50%
Q. 클로버 이미지에서 4개 이미지 각각에 고유 id를 부여하는 이유는?
border-radius
width, margin
.clover img
#spring
Q. display: flex; flex-wrap: wrap;으로 이미지를 2×2로 배치할 때 각 이미지 너비는 어떻게 설정해야 하나?
display: flex; flex-wrap: wrap;
width: 420px
width: 200px
flex-wrap: wrap