| English | 의미 |
|---|---|
| padding/ˈpædɪŋ/ | 내부 여백 |
| border/ˈbɔːdə/ | 테두리 |
| CSS/ˌsiː es ˈes/ | CSS |
| selector/sɪˈlektə/ | 선택자 |
| declaration/ˌdekləˈreɪʃn/ | 선언 |
| the box model/ðə bɒks ˈmɒdl/ | 박스 모델 |
| margin/ˈmɑːdʒɪn/ | 여백 |
| responsive design/rɪˈspɒnsɪv dɪˈzaɪn/ | 반응형 디자인 |
| media query/ˈmiːdiːə ˈkwɪərɪ/ | 미디어 쿼리 |
320-픽셀 카드가 320-픽셀 화면에서도 넘쳐나기
- 카드에 명시된 너비가 항상 총 너비는 아닙니다. 패딩과 테두리가 콘텐츠 너비 외부에 여백을 추가할 수 있습니다.
- CSS는 표현 규칙을 적용합니다. 셀렉터는 요소를 선택하고, 선언은 속성과 값을 부여하며, 예를 들어
color: navy와 같습니다.
사용 가능한 스타일시트(style sheet)에 재사용 가능한 표현 규칙을 유지하는 데 대한 실용적인 이유 하나를 제시하십시오.
난이도 3/5 · 200 코인 + 오늘 첫 완료 시 소액 보너스
예시: “공유 스타일시트를 사용하면 모든 HTML 요소를 편집하지 않고 일관되게 매칭되는 카드를 업데이트할 수 있습니다.”
박스의 모든 부분 고려하기
- 박스 모델은 콘텐츠, 패딩, 테두리 및 마진으로 구성됩니다. 패딩과 테두리는 페인팅된 박스 내부에 위치하고, 마진은 인접 요소와 분리해 니다.
content-box의 경우, 너비 320 px에 양측 패딩 16 px, 양측 테두리 2 px를 더하면 여백을 제외한 총너비가 356 px가 됩니다. 반면border-box에서는 명시된 320 px에 패딩과 테두리가 이미 포함됩니다.
박스 모델 영역을 내용부(content)에서 바깥쪽으로 나열하십시오.
난이도 3/5 · 200 코인 + 오늘 첫 완료 시 소액 보너스
패딩(padding)과 테두리(border)가 내용부를 둘러싸고, 마진(margin)이 박스를 주변 요소와 분리합니다.
content-box 모델에서 콘텐츠 너비는 320 px, 좌/우 패딩은 각각 16 px, 좌/우 테두리는 각각 2 px입니다. 여백을 제외한 전체 너비(피크셀)는 얼마입니까?
난이도 2/5 · 140 코인 + 오늘 첫 완료 시 소액 보너스
320 + 16 + 16 + 2 + 2 = 356 px.
너비를 유연하게 만들기
- 반응형 디자인은 사용 가능한 공간에 맞춰 콘텐츠와 레이아웃을 조정합니다. 이 카드는 컨테이너를 채우며 최대 400 px까지 확장되며, 이때 패딩과 테두리도 포함됩니다.
- 对具有
class="card"的元素应用该规则。长而不间断的内容、父级边距和其他规则仍需检查；一条声明无法保证整个页面都能适配。
.card {
box-sizing: border-box;
width: 100%;
max-width: 400px;
padding: 16px;
border: 2px solid currentColor;
overflow-wrap: anywhere;
}
280 px 컨테이너 내에서 이 카드는 패딩과 테두리를 합친 총너비로 280 px입니다. 700 px 컨테이너 내에서는 400 px까지만 확장됩니다. 외부 여백은 여전히 추가된 공간으로 작용합니다.
테두리를 포함한 패딩 카드(padded card)가 컨테이너의 400 px까지 채워져야 합니다. 이 조건에 가장 적합한 규칙 세트는 무엇입니까?
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
border-box는 지정된 너비(width)에 패딩과 테두리를 포함합니다. 부모 레이아웃과 콘텐츠는 여전히 테스트가 필요합니다.
필요할 때만 레이아웃 변경하기
- 미디어 쿼리는 특정 조건 하에 규칙을 적용합니다. 예를 들어, 두 열이 너무 좁아져 읽기 어렵게 되면 한 열로 변경할 수 있습니다.
- 브레이크포인트은 콘텐츠를 기준으로 설정한 뒤, 여러 너비와 큰 글자 크기로 테스트해야 합니다. 모든 스마트폰이나 노트북이 동일한 사용 가능한 너비를 가질 것이라고 가정해서는 안 됩니다.
실제로 승자 규칙을 검사하기
- 캐스케이드는 선택자 특이도보다 먼저 출처, 중요성 및 레이어 등의 요소를 고려합니다. 유사한 규칙들 사이에서는 ID가 클래스보다, 클래스가 요소 선택자보다 특이도가 높습니다.
- 특이도가 동일하여 비교 가능한 규칙일 경우, 후속 소스 순서가 결정권을 갖습니다. 브라우저 개발자 도구를 사용하여 매칭되는 규칙, 로드된 스타일시트 및 계산된 값을 확인하세요.
!important은 캐스케이드에 참여하지만 CSS를 무효화하지는 않습니다. 설명 없는 패치로 사용하지 마십시오. 우선 원인을 확인하십시오: 누락된 스타일시트, 유효하지 않은 선언 또는 상쇄 규칙 등이 예상치 못한 결과를 설명할 수 있습니다.
동일한 원천(source)과 레이어의 두 일반 규칙이 동일한 선택자 .card를 사용하여 상충되는 색상을 설정합니다. 다른 결정 요인은 모두 동일합니다. 어떤 색상이 우선권을 얻습니까?
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
특이도(specificity)가 같다고 해서 순서가 무의미해지지 않습니다. 유사하게 대등한 규칙들의 경우, 소스 순서(source order)가 나중에 있는 것이 결정합니다.
!important는 CSS cascade(계층 구조) 규칙의 일부이지만, 설명 없는 패치로 사용해서는 안 됩니다.
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
중요성은 우선순위에 영향을 미칩니다. 충돌을 검사하고 CSS를 깨뜨린다는 구실 대신 의도적으로 사용하십시오.
관찰 내용을 다음 유용한 점검 사항과 매칭하십시오.
난이도 2/5 · 140 코인 + 오늘 첫 완료 시 소액 보너스
모든 실패가 특이도(specificity)에서 비롯된 것으로 가정하지 말고 실제 원인을 확인하십시오.
박스와 독서 경험을 테스트하기
- 좁고 넓은 컨테이너, 키보드 포커스, 확대된 텍스트를 시도해 보세요. 두 가지 색상 테마 모두에서 텍스트가 읽히는지, 콘텐츠가 줄바꿈되는지 확인하십시오.
- 박스 계산法을 사용하여 하나의 오버플로우 수정 사례를 설명하고, 실제 매칭 규칙을 사용하여 하나의 타일 충돌 사례를 설명하십시오.
전체 박스를 계산하고, 유연한 크기를 우선적으로 선택한 후 캐스케이드를 검토하십시오. 스펙시피city(특정성)가 중요하지만 유일한 결정 요인은 아닙니다.
출처: W3C CSS 캐스케이드.
카드가 정상 텍스트 크기에서는 잘 맞지만 텍스트를 확대하면 화면을 벗어납니다. 이 경우 어떻게 해야 합니까?
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
반응형(R responsive) 행동에는 단일 뷰포트 스크린샷뿐만 아니라 텍스트 및 콘텐츠 제약 조건 변경도 포함됩니다.