기술면접 - CSS
1.float 속성이 무엇인가요?
float 속성은 CSS에서 사용되는 속성으로, 요소의 배치를 지정하는 데 사용됩니다. float 속성은 해당 요소를 왼쪽이나 오른쪽으로 띄워서 텍스트나 다른 요소가 그 주위를 감싸도록 만듭니다.float 속성은 다음과 같은 값으로 설정할 수 있습니다:none: 요소를
2.cascading이 무엇인가요?
"Cascading"은 CSS(Cascading Style Sheets)의 'C'에 해당하는 개념으로, 스타일 규칙이 요소에 적용되는 방식을 정의합니다. Cascading은 스타일 규칙의 우선 순위 및 상속에 따라 스타일이 결정되는 방식을 의미합니다.Cascading은
3.display 속성이 무엇인가요?
display 속성은 CSS에서 요소의 표시 방법을 지정하는 데 사용되는 속성입니다. display 속성은 요소를 블록(block), 인라인(inline), 인라인-블록(inline-block), 그리드(grid), 플렉스(flex) 등의 다양한 형태로 표시할 수 있도
4.Box-Model이 무엇인가요?
박스 모델(Box Model)은 CSS에서 요소의 크기와 레이아웃을 정의하는 모델입니다. 요소는 박스 형태로 간주되며, 이러한 박스는 콘텐츠 영역, 패딩 영역, 테두리 영역, 마진 영역으로 구성됩니다. 각 영역은 다음과 같은 역할을 합니다:1\. 콘텐츠 영역(Conte
5.padding과 margin이 무엇인가요?
padding과 margin은 CSS에서 요소의 레이아웃을 조정하기 위해 사용되는 속성입니다. 이들은 박스 모델에서 각각 패딩 영역과 마진 영역을 나타냅니다.패딩 (padding): 패딩은 요소의 콘텐츠 영역과 테두리 사이의 공간을 의미합니다. 패딩은 요소 내부에 적용
6.Position 속성이 무엇인가요?
position 속성은 CSS에서 요소의 위치를 지정하는 데 사용되는 속성입니다. position 속성은 요소를 정적(static), 상대적(relative), 절대적(absolute), 고정(fixed), 그리고 스티키(sticky) 위치로 배치할 수 있게 합니다.다
7.BFC(Block Formatting Context)가 무엇인가요?
BFC(Block Formatting Context)는 CSS 레이아웃 모델에서 요소를 배치하는 데 사용되는 개념입니다. BFC는 해당 요소와 그 자식 요소들이 어떻게 배치되고 상호작용하는지를 정의하는 독립적인 레이아웃 컨텍스트를 생성합니다.BFC의 주요 특징과 동작
8.CSS 전처리기(css preprocessor)가 무엇인가요?
CSS 전처리기(CSS Preprocessor)는 CSS의 기능을 확장하고 개선하기 위해 사용되는 도구입니다. 전처리기는 원본 CSS 파일에 특정 문법과 기능을 추가하여 개발자가 보다 효율적으로 CSS를 작성하고 유지할 수 있도록 도와줍니다.전처리기는 일반적으로 다음과
9.CSS-in-JS가 무엇인가요?
CSS-in-JS는 JavaScript 코드 안에서 CSS 스타일을 작성하고 관리하는 접근 방식입니다. 기존의 CSS 작성 방식과는 달리, CSS-in-JS는 JavaScript 코드의 형태로 스타일을 표현하고 해당 스타일이 적용될 컴포넌트와 함께 사용됩니다.CSS-i
10.box-sizing: border-box; 가 무엇인가요? 장점은 무엇인가요?
box-sizing: border-box;는 CSS 코드로, 모든 요소의 박스 크기 계산 방식을 변경하는 역할을 합니다. 이 코드는 모든 요소의 box-sizing 속성을 border-box로 설정하는 것을 의미합니다.box-sizing 속성은 요소의 너비와 높이를 계
11.inline 과 inline-block 의 차이점은 무엇인가요?
inline과 inline-block은 CSS의 박스 타입 중 두 가지입니다. 이 두 값은 요소가 인라인 흐름에 속하는 방식을 제어하고, 해당 요소가 수평으로 배치되는 방식을 결정합니다. 그러나 inline과 inline-block 사이에는 중요한 차이점이 있습니다.i
12.z-index의 동작방식은 무엇인가요?
CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.위치 지정 요소(position이 static 외의 다른 값인 요소)의 박스에 대해, z-
13.가로, 세로로 정렬하는 방법이 무엇인가요?
화면 가운데 정렬은 다양한 방법으로 구현할 수 있습니다. 다음은 일반적으로 사용되는 몇 가지 방법입니다:Flexbox를 사용한 화면 가운데 정렬:Position과 transform을 사용한 화면 가운데 정렬:Grid를 사용한 화면 가운데 정렬:텍스트 정렬을 사용한 화면
14.CSS에서 요소를 숨기는 방법은 무엇인가요?
CSS에서 요소를 숨기는 방법은 다양한 접근 방식이 있습니다. 여기에는 일반적으로 사용되는 몇 가지 방법이 포함됩니다:display: none;: 이 속성을 사용하면 요소를 완전히 숨길 수 있습니다. 해당 요소와 그 자식 요소는 레이아웃에서 사라지며, 렌더링되지 않습니
15.CSS 가상 클래스와 가상 요소는 무엇인가요? 어떤 상황에서 사용하나요?
CSS 가상 클래스와 가상 요소는 특정 상태나 위치에 있는 요소를 선택하기 위해 사용되는 선택자입니다. 다음은 가상 클래스와 가상 요소에 대한 개요입니다:가상 클래스 (Pseudo-classes):가상 클래스는 특정 상태에 있는 요소를 선택하는 데 사용됩니다.:hove
16.미디어 쿼리가 무엇인가요?
미디어 쿼리(Media Queries)는 CSS3의 기능으로, 장치의 특성과 화면 크기에 따라 스타일 및 레이아웃을 동적으로 조정하는 데 사용됩니다. 미디어 쿼리는 미디어 유형(예: 스크린, 프린트, 휴대폰) 및 미디어 특성(예: 화면 너비, 장치 종류)에 따라 스타일