Q. font-family에 여러 글꼴을 나열하는 이유는? 마지막에 Sans-Serif를 쓰는 이유는?
font-family
Sans-Serif
font-family: Arial, '맑은 고딕', Sans-Serif;
Q. font-size: 20px과 font-size: 1.25em의 차이는?
font-size: 20px
font-size: 1.25em
px
em
Q. text-shadow: 5px 5px 2px #cccccc의 4개 값이 각각 의미하는 것은?
text-shadow: 5px 5px 2px #cccccc
text-shadow: X Y blur 색상
Q. background 속성 5가지(color, image, repeat, position, attachment)의 역할을 설명하라.
color
image
repeat
position
attachment
background-color
background-image
url('경로')
background-repeat
no-repeat
repeat-x
repeat-y
background-position
right top
background-attachment
fixed
scroll
Q. background 단축 표기법의 값 순서는? no-repeat right top을 포함한 예시를 써라.
no-repeat right top
body { background: #dddddd url('./img/forest.jpg') no-repeat right top; }
Q. background-size: cover와 contain의 차이는?
background-size: cover
contain
cover
Q. background-size: auto / 50% 50% / 150px 120px은 각각 어떻게 동작하나?
background-size: auto
50% 50%
150px 120px
auto
background-repeat: no-repeat
Q. opacity: 0.3과 img:hover { opacity: 0.8; }를 함께 쓰면 어떤 효과가 나타나나?
opacity: 0.3
img:hover { opacity: 0.8; }
img { opacity: 0.3; } img:hover { opacity: 0.8; }
Q. opacity와 rgba()의 alpha 값 차이는?
opacity
rgba()
rgba() alpha
Q. linear-gradient(to top, #d299c2 0%, #fef9d7 100%)의 각 값이 의미하는 것은?
linear-gradient(to top, #d299c2 0%, #fef9d7 100%)
to top
#d299c2 0%
#fef9d7 100%
to right
to bottom
135deg
Q. CSS로 글자에 그라데이션 색상을 적용하는 3단계 방법은?
background-image: linear-gradient(...)
background-clip: text
-webkit-
color: transparent
Q. 그라데이션 글자를 만들 때 -webkit-background-clip을 따로 쓰는 이유는?
-webkit-background-clip
-webkit-background-clip: text; /* Chrome, Safari */ -moz-background-clip: text; /* Firefox 구버전 */ background-clip: text; /* 표준 */