상위 50개 CSS 면접 질문 및 답변(2025)

꿈의 직업을 갖기 위한 신입생과 경력 지원자를 위한 CSS(CSS3) 면접 질문과 답변은 다음과 같습니다.

무료 PDF 다운로드: CSS 인터뷰 질문

1. CSS란 무엇인가?

CSS의 전체 형태는 계단식 스타일 시트(Cascading Style Sheets)입니다. 충분히 간단한 스타일링 언어입니다. HTML 강요. 이는 웹 디자인에서 널리 사용되며 XHTML에서도 그 응용이 일반적입니다.

---

2. CSS의 기원은 무엇입니까?

표준 일반화 마크업 언어(Standard Generalized Markup Language)는 1980년대 스타일 시트의 시작을 알렸습니다.

---

3. CSS의 다양한 변형은 무엇입니까?

CSS의 변형은 다음과 같습니다.

• CSS 1
• CSS 2
• CSS 2.1
• CSS 3
• CSS 4

---

4. CSS의 한계는 무엇입니까?

제한사항은 다음과 같습니다.

•  선택자를 통한 오름차순은 불가능합니다.
• 수직 제어의 한계
• 표현 없음
• 열 선언 없음
• 동적 동작에 의해 제어되지 않는 의사 클래스
• 규칙, 스타일, 특정 텍스트 타겟팅이 불가능합니다.

---

5. CSS의 장점은 무엇입니까?

장점은 다음과 같습니다.

• 대역폭
• 사이트 전체의 일관성
• 페이지 형식 재지정
• 접근 용이성
• 프레젠테이션과 분리된 콘텐츠

---

6. CSS 프레임워크란 무엇입니까?

CSS 언어를 사용하여 더 쉽고 표준을 준수하는 웹페이지 스타일을 허용하는 사전 계획된 라이브러리입니다.

---

7. CSS1을 사용하여 블록 요소를 어떻게 중앙에 배치할 수 있나요?

블록 수준 요소는 다음을 통해 중앙에 배치될 수 있습니다.

margin-left 및 margin-right 속성은 명시적인 값으로 설정할 수 있습니다.

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

이 경우 왼쪽과 오른쪽 여백은 (40em-30em)에서 남은 XNUMX개의 em을 분할했으므로 너비가 각각 XNUMX개의 em이 됩니다. BODY 요소에 대해 명시적인 너비를 설정하는 것은 불필요했습니다. 단순화를 위해 여기에서 수행되었습니다.

---

8. CSS 사양은 누가 관리하나요?

World Wide Web Consortium은 CSS 사양을 유지 관리합니다.

---

9. CSS를 웹페이지로 통합할 수 있는 방법은 몇 가지입니까?

CSS는 세 가지 방법으로 통합될 수 있습니다.

• 인라인: 스타일 속성을 사용하여 CSS에 HTML 요소를 적용할 수 있습니다.
• 포함: Head 요소에는 코드를 배치할 수 있는 Style 요소가 있을 수 있습니다.
• 연결됨/가져옴: CSS를 외부 파일에 배치하고 링크 요소를 통해 연결할 수 있습니다.

---

10. 외부 스타일 시트에는 어떤 장점과 단점이 있나요?

이점:

• 하나의 파일을 사용하여 서로 다른 스타일을 가진 여러 문서를 제어할 수 있습니다.
• 여러 HTML 요소에는 클래스를 포함할 수 있는 많은 문서가 있을 수 있습니다.
• 복합적인 상황에서 스타일을 그룹화하려면 선택기 및 그룹화와 같은 방법이 사용됩니다.

단점 :

• 스타일 정보가 있는 문서를 가져오려면 추가 다운로드가 필요합니다.
• 문서를 렌더링하려면 외부 스타일 시트를 로드해야 합니다.
• 작은 스타일 정의에는 실용적이지 않습니다.

---

11. Embedded Style Sheets의 장점과 단점에 대해 토론해 보세요.

임베디드 스타일 시트의 장점:

• 단일 문서에 여러 태그 유형을 생성할 수 있습니다.
• 복잡한 상황에서는 Selector 및 Grouping 방법을 사용하여 스타일을 적용할 수 있습니다.
• 추가 다운로드는 불필요합니다.

임베디드 스타일 시트의 단점:

• 여러 문서를 제어할 수 없습니다.

---

12. CSS 선택자는 무엇을 의미하나요?

선언 또는 그 집합이 선언된 HTML 요소에 해당하는 문자열로, HTML과 스타일시트를 연결하는데 참조할 수 있는 링크가 CSS 선택자입니다.

---

13. CSS가 허용하는 미디어 유형을 등록하시겠습니까?

문서의 디자인과 사용자 정의는 미디어에 의해 렌더링됩니다. 외부 스타일 시트에 미디어 제어를 적용하면 네트워크에서 로드하여 검색하고 사용할 수 있습니다.

---

14. 논리적 태그와 물리적 태그를 구별합니까?

• 물리적 태그는 프리젠테이션 마크업이라고도 하지만 논리적 태그는 모양새에는 쓸모가 없습니다.
• 물리적 태그는 최신 버전인 반면, 논리적 태그는 오래되어 콘텐츠에 집중합니다.

---

15. 스타일 시트 개념을 HTML과 구별하나요?

HTML은 쉬운 구조 방식을 제공하지만 스타일 시트와 달리 스타일이 부족합니다. 또한 스타일 시트에는 더 나은 브라우저 기능과 서식 옵션이 있습니다.

---

16. '규칙 세트'에 대해 설명해주세요.

규칙 세트: 선택기는 규칙 세트로 식별되도록 다른 선택기에 연결될 수 있습니다.

두 부분으로 구성됩니다.

• 선택기(예: R 및
• 선언 {텍스트 들여쓰기: 11pt}

---

17. CSS의 대소문자 구분에 대한 설명?

CSS에는 대소문자가 구분되지 않지만 글꼴 모음, 이미지 URL 등은 구분됩니다. 일 때만 XML XHTML DOCTYPE과 함께 선언이 페이지에서 사용되고 CSS는 대소문자를 구분합니다.

---

18. 선언 블록을 정의하시겠습니까?

속성, 콜론 및 값으로 구성된 중괄호 내의 방향 카탈로그를 선언 블록이라고 합니다.
예: [속성 1: 값 3]

---

19. 다양한 글꼴의 속성을 등록하시겠습니까?

그들은 :

• 글꼴 스타일
• 글꼴 변형
• 글꼴 두께
• 글꼴 크기/줄 높이
• 폰트 패밀리
• 표제
• 아이콘

 

---

20. 파일을 가져와서 삽입하는 것이 왜 쉬운가요?

가져오기를 사용하면 외부 시트를 결합하여 여러 시트에 삽입할 수 있습니다. 다양한 파일과 시트를 사용하여 다양한 기능을 사용할 수 있습니다. 통사론:

@import 표기법, 함께 사용됨 tag.

---

21. 클래스 선택자의 용도는 무엇입니까?

특정 스타일에 고유한 선택자를 CLASS 선택자라고 합니다. 이를 통해 스타일 선언 및 HTML과의 연관성을 선언할 수 있습니다. 통사론:

클래스 이름
AZ, az 또는 숫자일 수 있습니다.
.top {font: 14em ;}, 클래스 선택기
이 클래스는 요소와 연관되어 있습니다

---

22. 클래스 선택자와 ID 선택자를 구별하나요?

클래스 선택자는 전체 블록을 부여하는 반면, ID 선택자는 다른 요소와 다른 단일 요소만을 선호한다. 즉, ID는 고유하지만 클래스는 고유하지 않습니다. 요소에 클래스와 ID가 모두 있을 수 있습니다.

---

23. CSS에 선언을 두 개 이상 추가할 수 있나요?

예, 세미콜론을 사용하면 가능합니다.

---

24. 의사 요소란 무엇입니까?

의사 요소는 일부 선택기에 특수 효과를 추가하는 데 사용됩니다. CSS는 HTML 마크업에 스타일을 적용하는 데 사용됩니다. 문서에 추가 마크업이나 스타일 지정이 불가능한 경우에는 CSS에서 의사 요소(pseudo-element)라는 기능을 사용할 수 있습니다. 실제 문서를 방해하지 않고 문서에 추가 마크업을 허용합니다.

---

25. 하이퍼링크 밑줄을 무시하는 방법은 무엇입니까?

제어 문과 외부 스타일 시트는 하이퍼링크 밑줄을 무시하는 데 사용됩니다.

예 :

B {

text-decoration: none;

}

<B href="career.html" style="text-decoration: none">link text</B>

 

---

26. 100% 너비가 페이지 전체에 걸쳐 플로트와 함께 사용되면 어떻게 됩니까?

float 선언을 할 때 테두리 형태로 사용될 때마다 1픽셀씩 추가되고, 그 이후에는 더 많은 float가 허용됩니다.

---

27. CSS를 통해 기본 속성값을 복원할 수 있나요? 그렇다면 어떻게?

CSS에서는 기본값이 부족하여 이전 값으로 되돌릴 수 없습니다. 속성을 다시 선언하여 기본 속성을 얻을 수 있습니다.

---

28. 사용된 다양한 미디어 유형을 나열하시겠습니까?

미디어마다 대소문자를 구분하지 않으므로 속성이 다릅니다.

그들은 :

• 청각 – 사운드 신디사이저 및 음성용
• 인쇄 – 인쇄 시 내용을 미리 볼 수 있습니다.
• 투영 - 프로젝터에 CSS를 투영합니다.
• 휴대용 - 휴대용 장치를 사용합니다.
• 화면 - 컴퓨터 및 노트북 화면.

---

29. CSS 박스 모델은 무엇이며 그 요소는 무엇입니까?

이 상자는 CSS 요소의 디자인과 레이아웃을 정의합니다. 요소는 다음과 같습니다.

한계: 최상위 레이어, 전체 구조가 표시됩니다.
경계: 주변에 테두리가 있는 패딩 및 콘텐츠 옵션이 표시됩니다. 배경색은 테두리에 영향을 줍니다.
패딩: 공백이 표시됩니다. 배경색은 테두리에 영향을 줍니다.
내용: 실제 내용이 표시됩니다.

---

30. 상황별 선택자란 무엇입니까?

특정 요소의 특별한 항목을 선택하는 데 사용되는 선택자를 상황별 선택자라고 합니다. 개별 선택기는 공백으로 구분됩니다. 이러한 종류의 선택기에서는 패턴의 마지막 요소만 처리됩니다. 예: TD P TEXT {색상: 파란색}

---

31. RGB 값을 XNUMX진수 색상 코드와 비교하시겠습니까?

색상은 두 가지 방법으로 지정할 수 있습니다.

• 색상은 6개의 문자, 즉 00진수 색상 코딩으로 표시됩니다. 숫자와 문자의 조합으로 이루어져 있으며 앞에는 #이 붙습니다. 예: g {색상: #XNUMXcjfi}
• 색상은 빨간색, 녹색, 파란색이 혼합되어 표현됩니다. 색상 값도 지정할 수 있습니다. 예: rgb(r,g,b): 이 유형에서 값은 정수 0과 255 사이일 수 있습니다. rgb(r%,g%,b%): 빨간색, 녹색 및 파란색 비율이 표시됩니다.

---

32. CSS에 대한 컨텍스트를 사용하여 이미지 스프라이트를 정의합니까?

일련의 이미지가 하나의 이미지로 공동 작업되는 경우 이를 '이미지 스프라이트'라고 합니다. 웹 페이지의 모든 이미지를 로드하는 데는 시간이 걸리기 때문에 이미지 스프라이트를 사용하면 시간이 단축되고 정보를 빠르게 얻을 수 있습니다.

CSS 코딩:

img.add { width: 60px; height: 55px; background: url (image.god) 0 0; }

 

이 경우 필요한 부분만 사용됩니다. 이를 통해 사용자는 상당한 마진과 시간을 절약할 수 있습니다.

---

33. CSS의 그룹화와 중첩을 비교하세요.

그룹화: 동일한 속성값을 갖는 선택자를 그룹화하여 코드를 줄일 수 있습니다.
예:

h1 {

color: blue;

}

h2 {

color: blue;

}

p {

color: blue;

}

 

모든 요소가 동일한 속성을 공유한다는 것을 코드에서 볼 수 있습니다. 각 선택기를 쉼표로 구분하여 작성하면 다시 작성하는 것을 피할 수 있습니다.

중첩: 선택기 내에 선택기를 지정하는 것을 중첩이라고 합니다.

P

{

color: red;

text-align: left;

}

.marked

{

background-color: blue;

}

.marked p

{

color: green;

}

 

---

34. 요소의 치수는 어떻게 정의할 수 있나요?

차원 속성은 다음과 같이 정의할 수 있습니다.

• 높이
• 최대 높이
• 최대 너비
• 최소 높이
• 최소 너비
• 폭

---

35. CSS의 float 속성을 정의하시겠습니까?

float 속성을 사용하면 이미지를 텍스트와 함께 오른쪽이나 왼쪽으로 이동할 수 있습니다. 이 속성이 적용되기 전의 요소는 해당 속성을 변경하지 않습니다.

---

36. Z 인덱스는 어떻게 작동하나요?

HTML 요소 위치를 지정하기 위해 CSS를 사용하는 동안 겹침이 발생할 수 있습니다. Z 인덱스는 겹치는 요소를 지정하는 데 도움이 됩니다. 양수 또는 음수일 수 있는 숫자이며 기본값은 XNUMX입니다.

---

37. 우아한 타락이란 무엇입니까?

구성 요소에 오류가 발생하더라도 정상적인 성능 저하가 발생하더라도 계속해서 제대로 작동합니다. 웹페이지를 디자인할 때 최신 브라우저 애플리케이션이 사용됩니다. 모든 사람이 사용할 수 있는 것은 아니기 때문에 더 많은 사용자가 사용할 수 있는 기본 기능이 있습니다. 이미지를 볼 수 없는 경우 alt 태그와 함께 텍스트가 표시됩니다.

---

38. 점진적 강화란 무엇입니까?

이는 웹 문제에 집중하는 우아한 저하에 대한 대안입니다. 기능은 동일하지만 최신 대역폭을 사용하는 사용자에게 추가 우위를 제공합니다. 최근 모바일 인터넷 연결이 기반을 확장하면서 눈에 띄게 사용되었습니다.

---

39. CSS에서 이전 버전과의 호환성을 어떻게 설계할 수 있나요?

HTML 시트 방법은 CSS와 협력하여 그에 따라 사용됩니다.

---

40. 이미지 아래 공백은 어떻게 없앨 수 있나요?

인라인 요소인 이미지는 텍스트와 동일하게 처리되므로 공백이 남아 있으며 다음을 통해 제거할 수 있습니다.

CSS

img { display: block ; }

 

---

41. @import가 맨 위에만 있는 이유는 무엇입니까?

@import는 우선 적용되는 규칙을 피하기 위해 맨 위에서만 선호됩니다. 일반적으로 Java, Modula 등과 같은 대부분의 프로그래밍 언어에서는 순위 순서를 따릅니다. C에서 #은 @import가 맨 위에 있는 대표적인 예입니다.

---

42. CSS 속성 또는 HTML 프로시저 중 어느 것이 더 우선합니까?

CSS는 HTML 프로시저보다 우선합니다. CSS를 지원하지 않는 브라우저는 HTML 속성을 표시합니다.

---

43. 인라인 스타일이란 무엇입니까?

CSS의 인라인 스타일은 개별 HTML 요소에 스타일을 추가하는 데 사용됩니다.

---

44. CSS에 주석을 어떻게 추가할 수 있나요?

CSS의 주석은 /* 및 */를 사용하여 추가할 수 있습니다.

---

45. 속성 선택기를 정의 하시겠습니까?

이는 일련의 요소, 값 및 해당 부분으로 정의됩니다.

---

46. ​​재산을 정의하는가?

CSS에 영향을 미치는 데 도움이 되는 스타일입니다. 예: 글꼴. FONT에는 굵게, 기울임꼴 등과 같은 다른 스타일이 있는 것처럼 해당 값이나 속성이 있습니다.

---

47. 대체 스타일 시트란 무엇입니까?

대체 스타일 시트를 사용하면 보기>페이지 스타일 메뉴를 사용하여 페이지가 표시되는 스타일을 선택할 수 있습니다. 대체 스타일 시트를 통해 사용자는 필요와 선호도에 따라 다양한 버전의 페이지를 볼 수 있습니다.

---

48. URL에는 따옴표가 필수인가요?

따옴표는 URL에서 선택 사항이며 단일 또는 이중일 수 있습니다.

---

49. 앳룰(at-rule)이란 무엇입니까?

시트 전체에 적용되고 부분적으로 적용되지 않는 규칙을 at-rule이라고 합니다. @ 앞에는 AZ, az 또는 0-9가 옵니다.

---

50. CSS를 어떻게 계단식으로 연결하여 사용자의 개인 시트와 혼합할 수 있습니까?

속성은 권장 위치에 설정할 수 있으며 문서는 CSS에 맞게 수정되어 사용자의 개인 시트와 혼합될 수 있습니다.

이러한 면접 질문은 귀하의 비바(구술)에도 도움이 될 것입니다. 모든 산업 분야에서 웹사이트와 웹 애플리케이션의 사용이 나날이 증가하고 있으며, 매력적인 웹사이트를 구축하기 위해서는 CSS가 필수적인 부분입니다. 따라서 HTML을 포함하는 CSS에 대한 풍부한 지식을 갖춘 UI/UX 및 웹 디자이너에 대한 수요가 엄청납니다.