top 30 popular css interview questions
답변이있는 가장 인기있는 CSS 인터뷰 질문 목록 :
그만큼 CSS 거의 모든 기본 및 고급 CSS 범주를 다루는 질문이 예제와 함께 설명됩니다.
CSS는 웹 개발의 가장 필수적인 기능 중 하나입니다. 웹 페이지의 모양을 설명 할 수있는 언어입니다.
따라서 CSS의 기본 및 고급 부분을 모두 은폐하는 것이 중요합니다. 좋은 웹 개발자가되고 웹 개발자 인터뷰를 성공적으로 완료하려면 CSS를 배워야합니다.
자주 묻는 CSS 인터뷰 질문
다음은 가장 자주 묻는 CSS 인터뷰 질문 및 답변 목록입니다.
시작하자!!
Q # 1) CSS 란 무엇입니까?
대답: CSS는 HTML 웹 페이지의 스타일을 설명합니다. HTML 웹 페이지의 동작을 설정할 수있는 언어입니다. HTML 콘텐츠가 화면에 표시되는 방식을 설명합니다.
CSS는 여러 HTML 웹 페이지의 레이아웃을 제어합니다. CSS를 Cascading Style Sheet라고합니다.
Q # 2) 현재 CSS 버전에서 사용되는 모든 모듈의 이름을 지정하십시오.
답변 : CSS에는 아래와 같이 여러 모듈이 있습니다.
- 선택자
- 박스 모델
- 배경과 테두리
- 텍스트 효과
- 2D / 3D 변환
- 애니메이션
- 다중 열 레이아웃
- 사용자 인터페이스.
Q # 3) CSS2와 CSS3를 구별하십시오.
대답: CSS2와 CSS3의 차이점은 다음과 같습니다.
- CSS3는 모듈이라고하는 두 개의 다양한 섹션으로 나뉩니다. CSS2에서는 모든 정보가 포함 된 단일 문서에 액세스합니다.
- CSS3 모듈은 거의 모든 브라우저에서 지원되지만 CSS 및 CSS2 모듈은 모든 브라우저에서 지원되지 않습니다.
- CSS3에서는 Border-radius 또는 box-shadow, flexbox와 같은 많은 그래픽 관련 특성이 도입되었음을 알 수 있습니다.
- CSS3에서 사용자는 background-image, background-position, background-repeat 스타일과 같은 속성을 사용하여 웹 페이지에서 여러 배경 이미지를 정밀하게 만들 수 있습니다.
Q # 4) 다양한 유형의 CSS를 인용하십시오.
답변 : CSS에는 다음과 같은 세 가지 유형이 있습니다.
- 외부: 이들은 별도의 파일로 작성됩니다.
- 내부의: 이들은 웹 페이지 코드 문서의 맨 위에 인용됩니다.
- 인라인 : 이것들은 텍스트 바로 옆에 기록됩니다.
Q # 5) 외부 스타일 시트가 유용한 이유는 무엇입니까?
대답: 외부 스타일 시트는 모든 스타일링 코드를 단일 파일에 작성하기 때문에 매우 유용하며 해당 외부 스타일 시트 파일의 링크를 참조하는 것만으로 어디서나 사용할 수 있습니다.
따라서 해당 외부 파일을 변경하면 웹 페이지에서도 변경 사항을 볼 수 있습니다. 따라서 우리는 매우 유용하고 큰 파일에서 작업하는 동안 작업을 쉽게 할 수 있다고 말할 수 있습니다.
Q # 6) 임베디드 스타일 시트의 용도는 무엇입니까? ?
대답: 포함 된 스타일 시트는 HTML 문서의 한 위치에서 스타일을 정의 할 수있는 권한을 제공합니다.
포함 된 스타일 시트를 사용하여 여러 클래스를 생성하여 웹 페이지의 여러 태그 유형에서 사용할 수 있으며 정보를 가져 오기 위해 추가로 다운로드 할 필요가 없습니다.
예:
p { font-family: georgia, serif; font-size: x-large; color:#ff9900; } a:hover { color: LimeGreen; text-decoration: none; } Embedded style sheet gives us the privilege to define styles at one place in a HTML document. We can generate multiple classes using embedded style sheet to use on multiple tag types a web page and also there is no extra downloading required importing the information.
Q # 7) CSS 선택기는 어떻게 사용하나요?
대답: CSS 선택기를 사용하여 스타일 시트와 HTML 파일 사이의 다리라고 말할 수 있도록 스타일을 지정할 콘텐츠를 선택할 수 있습니다.
CSS 선택기의 구문은 ID, 클래스, 유형 등에 생성 된 '선택'HTML 요소입니다.
Q # 8) 트위닝의 개념을 설명하세요.
대답: 트위닝은 두 번째 이미지로 발전하는 첫 번째 이미지의 모양을 얻기 위해 두 이미지 사이에 중간 프레임을 만드는 프로세스입니다.
주로 애니메이션 제작에 사용됩니다.
Q # 9) CSS 이미지 스크립트를 정의합니다.
대답: CSS 이미지 스크립트는 하나의 이미지에 배치되는 이미지 그룹입니다. 여러 이미지를 단일 웹 페이지에 투사하면서 서버에 대한로드 시간과 요청 수를 줄입니다.
Q # 10) 반응 형 웹 디자인이라는 용어를 설명하십시오.
대답: 화면 크기, 다양한 기기에서의 웹 페이지 이식성 등과 같은 다양한 구성 요소를 기반으로 사용자 활동과 조건에 따라 웹 페이지를 디자인하고 개발하는 방식입니다. 다른 유연한 레이아웃과 그리드.
Q # 11) CSS 카운터 란 무엇입니까?
대답: CSS 카운터는 검사자가 변수가 사용 된 횟수를 추적하는 CSS 규칙에 의해 증가 될 수있는 변수입니다.
Q # 12) CSS 특이성은 무엇입니까?
대답: CSS 특이성은 요소에 사용할 스타일 선언을 결정하는 점수 또는 순위입니다. (*)이 범용 선택자는 특이성이 낮고 ID 선택자는 특이성이 높습니다.
CSS에는 선택 자의 특이성 수준을 승인하는 네 가지 범주가 있습니다.
- 인라인 스타일
- ID
- 클래스, 속성 및 의사 클래스.
- 요소 및 의사 요소.
Q # 13) 특이성을 어떻게 계산할 수 있습니까?
대답: 특이성을 계산하려면 0부터 시작하여 각 ID에 대해 1000을 추가해야하며 각 요소 이름 또는 의사 요소가있는 속성, 클래스 또는 의사 클래스에 10을 추가해야합니다. 나중에 여기에 1을 추가해야합니다. .
예:
h2 #content h2 heading
Q # 14) CSS를 사용하여 둥근 모서리를 만드는 방법은 무엇입니까?
대답: 'border-radius'속성을 사용하여 둥근 모서리를 만들 수 있습니다. 이 속성을 모든 요소에 적용 할 수 있습니다.
예:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
Q # 15) HTML 요소에 테두리 이미지를 어떻게 추가합니까?
대답: CSS“border-image”속성을 사용하여 요소와 함께 테두리 이미지로 사용할 이미지를 설정할 수 있습니다.
예:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }Q # 16) CSS에서 그라디언트 란 무엇입니까?
대답: 둘 이상의 지정된 색상 사이에서 부드러운 변형을 표시 할 수있는 CSS의 속성입니다.
CSS에는 두 가지 유형의 그라디언트가 있습니다. 그들은:
- 선형 그라디언트
- 방사형 그라데이션
Q # 17) CSS flexbox 란 무엇입니까?
대답: CSS의 부동 또는 위치 지정 속성을 사용하지 않고도 유연한 반응 형 레이아웃 구조를 디자인 할 수 있습니다. CSS 플렉스 박스를 사용하려면 처음에 플렉스 컨테이너를 정의해야합니다.
예:
.flex-container { display: flex; background-color: #f4b042; } .flex-container > div { background-color: #d60a33; margin: 10px; padding: 20px; font-size: 30px; } 1 2 3 Example of flex box.
Q # 18) flexbox의 모든 속성을 작성하십시오.
대답: HTML 웹 페이지에서 사용되는 Flexbox의 여러 속성이 있습니다.
그들은:
- 플렉스 방향
- 플렉스 랩
- 플렉스 흐름
- 정당화 내용
- 정렬 항목
- 내용 정렬
Q # 19) 전체 웹 페이지에서 세로로 펼쳐지는 분할에서 이미지를 세로로 정렬하는 방법은 무엇입니까?
대답: 요소에서 verticle-align : middle 구문을 사용하여 수행 할 수 있으며 두 텍스트 범위를 다른 범위로 묶을 수도 있습니다. 그 후에는 verticle-align : middle in the content #icon을 사용해야합니다.
Q # 20) 여백과 여백의 차이점은 무엇입니까?
대답: CSS에서 여백은 요소 주위에 공간을 만들 수있는 속성입니다. 외부에 정의 된 경계에 공간을 만들 수도 있습니다.
CSS에는 다음과 같은 margin 속성이 있습니다.
- 여백 상단
- 여백-오른쪽
- 여백-하단
- 여백-왼쪽
Margin 속성에는 아래와 같이 몇 가지 정의 된 값이 있습니다.
- 자동 – 이 속성 브라우저를 사용하여 여백을 계산합니다.
- 길이 - px, pt, cm 등의 여백 값을 설정합니다.
- %- 요소의 너비 %를 설정합니다.
- 상속 – 이 속성을 통해 부모 요소에서 margin 속성을 상속 할 수 있습니다.
CSS에서 패딩은 요소의 콘텐츠 주변과 알려진 테두리 내부에 공간을 생성 할 수있는 속성입니다.
CSS 패딩에는 다음과 같은 속성도 있습니다.
- 패딩 탑
- 패딩-오른쪽
- 패딩 하단
- 패딩-왼쪽
패딩에는 음수 값이 허용되지 않습니다.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }Q # 21) CSS에서 박스 모델을 사용하는 것은 무엇입니까?
대답: CSS에서 상자 모델은 모든 HTML 요소를 바인딩하는 상자이며 여백, 테두리, 패딩 및 실제 콘텐츠와 같은 기능을 포함합니다.
상자 모델을 사용하여 요소 주변에 테두리를 추가 할 수있는 권한을 얻고 요소 사이의 공간을 정의 할 수도 있습니다.
Q # 22) 웹 페이지에 아이콘을 추가하려면 어떻게해야합니까?
대답: font-awesome과 같은 아이콘 라이브러리를 사용하여 HTML 웹 페이지에 아이콘을 추가 할 수 있습니다.
인라인 HTML 요소에 주어진 아이콘 클래스의 이름을 추가해야합니다. ( 또는). 아이콘 라이브러리의 아이콘은 CSS로 사용자 정의 할 수있는 확장 가능한 벡터입니다.
Q # 23) CSS 의사 클래스 란 무엇입니까?
대답: HTML 요소의 특별한 상태를 정의하는 데 사용되는 클래스입니다.
이 클래스는 사용자가 스누핑 할 때 요소를 스타일링하여 사용할 수 있으며 포커스를받을 때 HTML 요소의 스타일을 지정할 수도 있습니다.
selector:pseudo-class { property:value; }Q # 24) CSS에서 의사 요소의 개념을 설명하세요.
대답: 요소의 주어진 부분을 스타일링하는 데 사용되는 CSS의 기능입니다.
예를 들어 ,HTML 요소의 첫 글자 나 줄에 스타일을 지정할 수 있습니다.
selector::pseudo-element { property:value; }Q # 25) CSS 불투명도 란 무엇입니까?
대답: 요소의 투명성에 대해 자세히 설명하는 속성입니다.
이 속성으로 0.0-1.0의 값을 취할 수있는 이미지를 투명하게 할 수 있습니다. 값이 낮 으면 이미지가 더 투명 해집니다. IE8 및 이전 버전의 브라우저는 0-100의 값을 사용할 수 있습니다.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}Q # 26) CSS에서 사용되는 모든 위치 상태를 작성하세요.
답변 : CSS에는 아래와 같이 네 가지 위치 상태가 있습니다.
- 정적 (기본값)
- 상대적인
- 결정된
- 순수한
Q # 27) CSS의 내비게이션 바는 무엇입니까?
대답: 내비게이션 바를 사용하여 일반 HTML 페이지를 사용자 별보다 동적 인 웹 페이지로 만들 수 있습니다. 기본적으로 링크 목록이므로
- 과
- 요소는 완벽한 의미가 있습니다.
ul { list-style-type: none; margin: 0; padding: 0; }Q # 28) CSS에서 상대와 절대의 차이점은 무엇입니까?
대답: 상대와 절대의 주요 차이점은 CSS에서 동일한 태그에 'relative'가 사용된다는 것입니다. 즉, left : 10px를 작성하면 패딩이 왼쪽에서 10px로 이동하는 반면 절대 값은 non- 정적 부모.
즉, left : 10px를 쓰면 결과는 부모 요소의 왼쪽 가장자리에서 10px 떨어져 있습니다.
Q # 29) CSS에서 사용되는 '중요한'선언을 정의하세요.
대답: 중요한 선언은 일반 선언보다 더 중요한 선언으로 정의됩니다.
실행하는 동안 이러한 선언은 덜 중요한 선언을 재정의합니다.
예를 들면 중요한 선언을 가진 두 명의 사용자가있는 경우 선언 중 하나가 다른 사용자의 선언을 재정의합니다.
예를 들면 :
본문 {배경 : # FF00FF! important; 파란색}자바에서 xor를 사용하는 방법
이 몸에서 배경은 색보다 무게가 더 큽니다.
Q # 30) 계단식 순서 내에서 사용할 수있는 다른 계단식 방법을 정의합니다.
대답: 계단식 순서는 그 자체로 다른 여러 정렬 방법을 허용하는 정렬 방법입니다.
a) 원산지 정렬 : 다음과 같이 정의 된 대체 방법을 제공 할 수있는 몇 가지 규칙이 있습니다.
- 특정 공급자 스타일 시트의 일반적인 가중치는 사용자 스타일 시트의 가중치 증가에 의해 무시됩니다.
- 특정 사용자의 스타일 시트 규칙은 공급자 스타일 시트의 일반 너비로 재정의됩니다.
b) 선택 자의 특이성에 따라 정렬 : 덜 구체적인 선택기는 더 구체적인 선택기에 의해 재정의되었습니다.
예를 들면 , 상황 별 선택기는보다 구체적인 ID 선택자에 비해 덜 구체적이며 해당 상황 별 선택기가 ID 선택기에 의해 재정의되었습니다.
c) 지정된 순서로 정렬 : 이는 두 선택자가 동일한 가중치이고 재정의를 위해 표시되는 사양과 다른 속성 인 시나리오에서 발생합니다.
예:
스타일 속성이 인라인 스타일에 사용되는 경우 다른 모든 스타일은 재정의 된 것으로 보입니다.
또한 링크 요소가 외부 스타일에 사용되는 경우 가져온 스타일을 재정의합니다.
Q # 31) 인라인 요소와 블록 요소를 구분하세요.
대답: 인라인 요소에는 너비와 높이를 설정하는 요소가 없으며 줄 바꿈도 없습니다.
예: em, strong 등
블록 요소 사양 :
- 줄 바꿈이 있습니다.
- 컨테이너를 설정하여 너비를 정의하고 높이를 설정할 수도 있습니다.
- 인라인 요소에서 발생하는 요소도 포함 할 수 있습니다.
예:
너비와 높이
최대 너비 및 최대 높이
최소 너비 및 최소 높이
안녕 (i = 1-6)-제목 요소
p- 단락 요소.Q # 32) 상속 개념은 CSS에 어떻게 적용 되나요?
대답: 상속은 자식 클래스가 부모 클래스의 속성을 상속하는 개념입니다. 여러 언어에서 사용되는 개념이며 동일한 속성을 다시 정의하는 쉬운 방법입니다.
CSS에서 최상위 수준에서 최하위 수준으로 계층을 정의하는 데 사용됩니다. 상속 된 속성은 자식이 같은 이름을 사용하는 경우 자식의 클래스에 의해 재정의 될 수 있습니다.
예:
본문 {글꼴 크기 : 15pt;}
그리고 또 다른 정의는 자식 클래스에서 정의되고 있습니다.
본문 {글꼴 크기 : 15pt;}
H1 {글꼴 크기 : 18pt;}모든 단락 텍스트는 속성을 사용하여 표시되며 글꼴 18로만 텍스트를 표시하는 H1 스타일을 제외하고 본문에 정의됩니다.
Q # 33) 아이디와 클래스를 구분하세요.
대답: ID와 클래스는 모두 HTML에서 사용되었으며 CSS의 값을 할당합니다.
차이점은 다음과 같습니다.
- ID는 특정 요소에 고유하게 이름을 할당하는 요소의 일종이지만 클래스에는 전체 블록에 사용할 수있는 특정 속성 집합이있는 요소가 있습니다.
- ID는 고유하게 식별 할 수 있기 때문에 요소로 사용할 수 있지만 클래스는 요소를 차단하고 사용되는 곳에 너무 많은 태그를 적용하도록 정의되어 있습니다.
- ID는 속성을 하나의 특정 요소에 사용하는 제한을 제공하는 반면 클래스에서는 상속이 특정 블록 또는 요소 그룹에 적용됩니다.
결론
이 인터뷰 질문 및 답변 목록은 더 신선하고 경험 수준이 높은 웹 개발자 인터뷰를 작성하는 데 도움이됩니다. 인터뷰에서 자주 묻는 질문입니다.
이 기사가 웹 개발자를위한 CSS 관련 인터뷰에 도움이되기를 바랍니다.
추천 읽기 = >> 웹 개발자 인터뷰 질문 및 답변
모든 성공을 기원합니다 !!
추천 도서