7주차 퀴즈 — DevFlash

CSS

Q. 수평 메뉴에서 letter-spacing과 border-top / border-bottom은 각각 어떤 역할을 하나?

클릭하여 답 확인 →

CSS

letter-spacing: 글자 사이 간격을 넓혀 메뉴 텍스트에 여유를 줌.
border-top / border-bottom: ul의 위아래에 구분선을 추가해 메뉴 영역을 시각적으로 구분.

ul {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  padding: 10px 0;
}
ul li { display: inline; letter-spacing: 10px; }

← 다시 보기

CSS

Q. 수평 메뉴 링크(a)의 기본 밑줄을 제거하고, 마우스를 올렸을 때 밑줄이 나타나게 하려면?

클릭하여 답 확인 →

CSS

ul li a {
  text-decoration: none;   /* 기본 밑줄 제거 */
  color: black;
}
ul li a:hover {
  text-decoration: underline;  /* hover 시 밑줄 */
}

text-decoration: none으로 기본 밑줄을 없애고, :hover에서 다시 추가.

← 다시 보기

CSS

Q. 링크 상태 선택자 4가지(LVHA)를 순서대로 나열하고 각 상태를 설명하라.

클릭하여 답 확인 →

CSS

L a:link — 방문한 적 없는 기본 링크
V a:visited — 방문한 적 있는 링크
H a:hover — 마우스를 올렸을 때
A a:active — 클릭하는 순간

암기: LoVe HAte

← 다시 보기

CSS

Q. LVHA 순서를 지키지 않으면 어떤 문제가 생기나?

클릭하여 답 확인 →

CSS

CSS는 위에서 아래로 적용되므로, 나중에 선언된 규칙이 앞 규칙을 덮어씀.
:hover를 :visited 앞에 쓰면 방문 후 hover 스타일이 visited에 덮여 동작하지 않음.
→ 반드시 L → V → H → A 순서로 작성해야 함.

← 다시 보기

CSS

Q. rgb()와 rgba()의 차이는? alpha 값의 범위와 의미는?

클릭하여 답 확인 →

CSS

rgb(R, G, B): 각 채널 0~255 정수, 불투명.
rgba(R, G, B, alpha): R·G·B에 투명도 추가.
alpha 범위: 0(완전 투명) ~ 1(완전 불투명)
rgba(0, 0, 255, 0.5) → 50% 투명 파란색, 배경이 비쳐 보임.

← 다시 보기

CSS

Q. CSS 색상 표기법 3가지(키워드·16진수·rgb/rgba)를 각각 예시와 함께 설명하라.

클릭하여 답 확인 →

CSS

키워드: yellow, hotpink — CSS 미리 정의된 색상 이름
16진수: #ff0000 — R·G·B 각 2자리 16진수
rgb(): rgb(255, 0, 0) — R·G·B 각 0~255
rgba(): rgba(255, 0, 0, 0.5) — rgb + 투명도

← 다시 보기

CSS

Q. border 단축 표기 형식은? 방향별로 지정하는 속성 4가지는?

클릭하여 답 확인 →

CSS

단축 표기: border: 두께 스타일 색상;
예: border: 5px solid #00FFFF;

방향별:
border-top / border-bottom / border-left / border-right
예: border-top: 1px solid red;

← 다시 보기

CSS

Q. border 스타일 4가지(solid, double, dotted, dashed)의 모양을 설명하라.

클릭하여 답 확인 →

CSS

solid: 실선 ─────
double: 이중선 ═════
dotted: 점선 · · · · ·
dashed: 파선 - - - - -

예: border: double 5px #00ff00;

← 다시 보기

CSS

Q. padding과 margin의 위치 차이는? 배경색과의 관계는?

클릭하여 답 확인 →

CSS

padding: 테두리 안쪽 여백 — 배경색이 padding 영역까지 채워짐.
margin: 테두리 바깥쪽 여백 — 다른 요소와의 거리, 배경색 없음.

즉 padding은 요소의 내부 공간, margin은 요소 간의 외부 공간.

← 다시 보기

CSS

Q. padding: 10px 20px 30px 40px에서 각 값이 의미하는 방향은?

클릭하여 답 확인 →

CSS

4값 단축 표기 — 시계방향:
위(top) → 오른쪽(right) → 아래(bottom) → 왼쪽(left)

padding: 10px 20px 30px 40px
→ 위10 / 오른20 / 아래30 / 왼40

margin도 동일한 순서 적용.

← 다시 보기

CSS

Q. box-sizing: content-box와 border-box의 차이는? width: 300px; border: 10px; padding: 50px일 때 실제 너비는?

클릭하여 답 확인 →

CSS

content-box(기본): width = 콘텐츠 크기. padding·border가 추가되면 전체 커짐.
→ 300(content) + 20(border) + 100(padding) = 420px

border-box: width = 테두리 포함 전체 크기 고정.
→ 전체 300px 유지. content = 300 - 20 - 100 = 180px

← 다시 보기

CSS

Q. 블록·인라인·인라인블록 요소의 너비, 줄바꿈, width/height 지정 가능 여부를 비교하라.

클릭하여 답 확인 →

CSS

블록(div, p, h1, ul, li): 가로 전체, 줄바꿈 O, width·height·margin 모두 적용됨.
인라인(span, a, strong): 내용 너비, 줄바꿈 X, width·height·margin 위아래 무시됨.
인라인블록(img, button): 내용 너비, 줄바꿈 X, width·height·margin 모두 적용됨.

← 다시 보기