1. CSS 기본 개념
Q1. CSS란 무엇인가요?
A: “HTML 구조를 시각적으로 꾸미는 스타일링 언어로, 색상, 글꼴, 레이아웃 등을 정의합니다.”
Q2. CSS의 장점은 무엇인가요?
A: “HTML과 스타일을 분리하여 코드 관리가 쉽고, 재사용성과 유지보수가 용이합니다.”
Q3. CSS와 HTML의 차이점은?
A: “HTML은 문서 구조와 내용을 정의하고, CSS는 그 구조를 시각적으로 꾸미는 역할입니다.”
Q4. 인라인, 내부, 외부 CSS의 차이점은?
A: “인라인은 태그 안에 직접 스타일, 내부는 <style> 태그, 외부는 별도 CSS 파일 연결. 우선순위는 인라인 > 내부 > 외부.”
Q5. CSS 우선순위(Specificity)란?
A: “같은 요소에 여러 스타일이 적용될 때, 어떤 스타일이 우선하는지를 결정하는 규칙입니다.”
Q6. !important의 의미와 사용 방법은?
A: “우선순위를 강제로 높여 스타일을 적용. 가능한 최소한으로 사용해야 합니다.”
---
2. 선택자(Selector)
Q1. CSS 선택자 종류와 차이점은?
A: “태그, 클래스, ID, 의사 클래스(:hover 등), 의사 요소(::before 등)를 사용해 HTML 요소를 선택합니다.”
Q2. :nth-child()와 :nth-of-type() 차이점은?
A: “:nth-child()는 부모의 모든 자식 순서 기준, :nth-of-type()은 같은 태그 타입 기준입니다.”
Q3. :hover, :focus, :active 차이점은?
A: “:hover는 마우스 올렸을 때, :focus는 포커스 시, :active는 클릭했을 때 상태 스타일 적용.”
---
3. 박스 모델(Box Model)
Q1. CSS 박스 모델 구성 요소?
A: “content, padding, border, margin으로 구성되며, 요소 크기와 간격을 정의합니다.”
Q2. box-sizing: border-box와 content-box 차이점?
A: “border-box는 padding과 border를 포함해 요소 크기 계산, content-box는 content만 계산.”
Q3. 마진 충돌(Margin Collapse)이란?
A: “위아래 인접 요소의 마진이 겹쳐서 큰 쪽 하나만 적용되는 현상.”
---
4. 레이아웃
Q1. Flexbox와 Grid 차이점?
A: “Flexbox는 한 방향 정렬, Grid는 2차원(행+열) 전체 레이아웃 설계에 적합합니다.”
Q2. Flexbox 주요 속성?
A: “justify-content(주축 정렬), align-items(교차축 정렬), flex-grow(공간 비율 조정).”
Q3. CSS Grid 주요 속성?
A: “grid-template-columns, grid-template-rows, gap으로 행/열 크기와 간격을 설정합니다.”
Q4. float와 position 차이점, 주의점?
A: “float는 문서 흐름에서 요소를 띄우는 용도, position은 위치 지정. float는 레이아웃 용도보다 이미지/텍스트 감싸기에 적합.”
Q5. 반응형 웹 디자인과 Media Query란?
A: “화면 크기나 장치 환경에 따라 다른 스타일을 적용하는 CSS 기능입니다.”
---
5. 시각적 효과
Q1. CSS3에서 추가된 주요 기능?
A: “Transition, Animation, Transform, Shadow, 그라디언트 등 시각적 효과가 추가되었습니다.”
Q2. transition과 animation 차이?
A: “transition은 상태 변화 시 자동 애니메이션, animation은 키프레임 기반 복잡한 애니메이션.”
Q3. transform 속성 용도?
A: “요소를 회전(rotate), 이동(translate), 크기 변경(scale), 기울이기(skew) 등 변형.”
Q4. 그림자(box-shadow, text-shadow) 사용법?
A: “box-shadow: 요소 그림자, text-shadow: 글자 그림자. 색상, 위치, 흐림 정도 지정.”
Q5. 그라디언트(Linear, Radial) 사용법?
A: “background-image: linear-gradient(…) 또는 radial-gradient(…)로 색상 그라데이션 표현.”
---
6. 폰트와 텍스트
Q1. 웹폰트(@font-face)란?
A: “외부 폰트를 불러와 웹에서도 사용할 수 있는 CSS 기능입니다.”
Q2. text-align과 vertical-align 차이?
A: “text-align: 수평 정렬, vertical-align: 수직 정렬.”
Q3. 글자 자간(letter-spacing), 줄 간격(line-height) 차이?
A: “letter-spacing은 글자 사이 간격, line-height는 줄과 줄 사이 간격 조정.”
---
7. 기타
Q1. CSS 변수(CSS Custom Properties)란?
A: “재사용 가능한 값을 변수로 정의하여 유지보수와 관리 편리. 예: --main-color: blue;”
Q2. z-index 의미와 stacking context란?
A: “겹친 요소의 앞뒤 순서를 정의하며, 특정 부모 요소가 stacking context를 형성하면 z-index 기준이 달라집니다.”
Q3. position 속성 차이(static, relative, absolute, fixed, sticky)?
A: “static: 기본, relative: 원래 위치 기준, absolute: 부모 기준, fixed: 화면 기준, sticky: 스크롤 시 고정.”
Q4. CSS 레이아웃 성능 최적화 방법?
A: “불필요한 중첩 제거, selector 단순화, transform/opacity로 애니메이션, repaint/reflow 최소화.”
Q5. CSS와 SCSS(Sass) 차이?
A: “SCSS는 CSS 전처리기로, 변수, 중첩, 믹스인 등 기능을 추가하여 코드 재사용과 관리가 편리합니다.”
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
1. CSS란 무엇인가요?
답: “HTML 구조를 꾸미는 스타일링 언어로, 색상, 글꼴, 레이아웃 등을 정의합니다.”
2. CSS와 HTML의 차이점?
답: “HTML은 구조와 내용을 정의하고, CSS는 그 구조를 시각적으로 꾸미는 역할을 합니다.”
3. 인라인, 내부, 외부 CSS 차이?
답: “인라인: 태그 안에 직접 스타일, 내부: <style> 태그, 외부: 별도 CSS 파일 연결. 우선순위는 인라인 > 내부 > 외부입니다.”
4. 선택자란 무엇인가요?
답: “CSS에서 어떤 HTML 요소에 스타일을 적용할지 지정하는 방법입니다.”
5. CSS 박스 모델 구성 요소?
답: “content, padding, border, margin으로 구성되며, 요소의 크기와 간격을 정의합니다.”
6. box-sizing: border-box와 content-box 차이?
답: “border-box는 padding과 border를 포함해 요소 크기를 계산하고, content-box는 content만 계산합니다.”
7. Flexbox란 무엇인가요?
답: “컨테이너 안 아이템을 한 방향으로 쉽게 정렬하고 공간을 분배할 수 있는 CSS3 레이아웃 시스템입니다.”
8. Flexbox vs Grid 차이?
답: “Flexbox는 한 방향 정렬, Grid는 2차원(행+열) 전체 레이아웃 설계에 적합합니다.”
9. CSS Grid란 무엇인가요?
답: “행과 열을 이용해 2차원 레이아웃을 정밀하게 구성할 수 있는 시스템입니다.”
10. Media Query란 무엇인가요?
답: “화면 크기나 장치에 따라 다른 CSS 스타일을 적용해 반응형 웹을 구현하는 기능입니다.”
11. transition과 animation 차이점?
답: “transition은 상태 변화 시 자동 애니메이션, animation은 키프레임 기반 복잡한 애니메이션입니다.”
12. transform 속성은 무엇인가요?
답: “요소를 회전, 이동, 크기 조절, 기울이기 등 변형할 수 있는 CSS3 기능입니다.”
13. z-index란 무엇인가요?
답: “겹친 요소의 앞뒤 순서를 정의하는 속성입니다.”
14. position 속성 차이?
답: “static: 기본, relative: 원래 위치 기준, absolute: 부모 기준, fixed: 화면 기준, sticky: 스크롤 시 고정”
15. CSS 변수(CSS Custom Properties)란?
답: “재사용 가능한 값을 정의할 수 있는 변수로, 유지보수와 관리가 편리합니다. 예: --main-color: blue;”
---