- ⭐ SCSS에 대해 설명해주세요. (47번)
: CSS는 CSS의 기능과 호환성을 확장하는 CSS 전처리기의 하나로, "Sassy CSS"의 약자입니다. 원래는 SASS의 새로운 문법 형식으로 도입되었고, 지금은 SASS보다 널리 사용되는 문법이 되었습니다.
SCSS는 여러 가지 기능과 특징을 가지고 있습니다.
1. 특정 값을 변수로 저장하고 재사용할 수 있습니다.
ex) $primary-color: #3498db;
body {
background-color: $primary-color;
}
2. 선택자의 중첩을 허용하므로 CSS 코드의 계층 구조를 더 명확하게 나타낼 수 있습니다.
ex) nav {
ul {
list-style-type: none;
li {
display: inline-block;
}
}
}
3. 재사용 가능한 스타일 묶음을 정의하고 필요한 곳에 삽입할 수 있습니다.
ex) .box {
@include border-radius(10px);
}
4. 한 선택자의 스타일을 다른 선택자에 상속시킬 수 있습니다.
ex) .btn-primary {
@extend .btn;
background-color: $primary-color;
}
5. SCSS에서는 숫자, 색상 등의 연산이 가능합니다.
ex) .container {
width: 100% / 3 - 2em;
}
6. 내장된 함수와 조건문, 반복문을 사용하여 더 동적인 스타일을 생성할 수 있습니다.
7. 스타일시트를 여러 파일로 나누고 필요한 곳에서 임포트할 수 있습니다. 이를 통해 코드의 구조와 유지 보수가 더욱 쉬워집니다.
그러나 주의해야 할 점은, SCSS로 작성된 코드는 웹 브라우저에서 직접 해석될 수 없습니다. 따라서 SCSS를 표준 CSS로 변환하는 과정이 필요하며, 이를 위해 다양한 도구와 컴파일러(예: Sass, Node-sass, Dart Sass 등)가 사용됩니다.
- ⭐ postition 속성에 대해 설명해주세요. (48번)
: position 속성은 HTML 요소의 위치 지정 방식을 결정하는 CSS 속성으로 요소를 문서의 특정 위치로 이동하거나, 다른 요소와의 위치 관계를 설정할 수 있습니다.
1. static (기본값): 요소는 일반적인 문서 흐름에 따라 배치됩니다. top, right, bottom, left 속성은 static으로 설정된 요소에는 영향을 주지 않습니다.
2. relative: 요소는 일반적인 문서 흐름에 따라 배치된 후, top, right, bottom, left 속성 값에 따라 위치가 조정됩니다. 이 위치 조정은 해당 요소의 기존 위치를 기준으로 합니다.
3. absolute: 요소는 가장 가까운 상위 요소 중 position 값이 static이 아닌 요소를 기준으로 위치가 지정됩니다. 만약 이러한 상위 요소가 없다면 <body> 요소를 기준으로 합니다. top, right, bottom, left 속성을 사용하여 위치를 지정합니다.
4. fixed: 요소는 뷰포트(브라우저 창)를 기준으로 위치가 지정됩니다. 스크롤 시에도 요소의 위치는 변하지 않습니다. top, right, bottom, left 속성을 사용하여 위치를 지정합니다.
5. sticky: 요소는 스크롤에 따라 상대적(relative) 또는 고정(fixed) 위치 사이에서 변환됩니다. 예를 들어, 스크롤을 하면서 특정 위치에 도달하면 요소가 고정되어 보이게 됩니다.
- margin과 padding에 대해 설명해주세요. (49번)
1. Padding: 내용과 테두리 사이의 간격으로 요소의 내부 여백으로 취급됩니다.
2. Margin: 요소의 바깥 여백을 의미하며, 주로 인접한 요소와의 간격을 조절하는 데 사용됩니다. 투명한 영역으로, 배경색이나 이미지를 가질 수 없습니다.
요소 간에 마진이 겹칠 때, "마진 병합"이라는 현상이 발생할 수 있습니다. (마진 병합은 두 요소가 수직으로 인접해 있을 때, 한 요소의 마진이 다른 요소의 마진과 합쳐져 더 큰 마진 값 중 하나만 적용되는 현상입니다.)
- CSS 애니메이션과 JS 애니메이션의 차이에 대해서 설명해 주세요. (55번)
1. CSS 애니메이션 : 간단한 애니메이션을 처리하기에 적합하고 외부 라이브러리가 필요 없고 직관적으로 표현이 가능하며, 미디어쿼리를 사용하여 반응형으로 애니메이션을 구현 할 수 있다는 장점이 있습니다.
2. JS 애니메이션 : 복잡하고 무거운 애니메이션 작업을 효율적이고, 세밀하게 다루기 위해 사용합니다. 외부 라이브러리를 사용하면 성능 좋은 애니메이션을 구현할 수 있습니다. 브라우저 호환성이 좋고 GPU를 통한 하드웨어 가속을 제어할 수 있다는 장점이 있습니다.
- CSS in JS의 장단점에 대해 설명해주세요. (56번)
:CSS in JS는 JavaScript 내에서 CSS 스타일링을 적용하는 방식입니다. 주로 React나 Vue와 같은 컴포넌트 기반 프레임워크/라이브러리에서 사용됩니다. styled-components, emotion, JSS 등이 있습니다.
CSS in JS의 장점으로는 컴포넌트 스코핑, 동적 스타일링, 재사용성과 유지보수, 패키지 최적화, 툴링과 플러그인 등이 있습니다.
1. 컴포넌트 스코핑: 스타일이 해당 컴포넌트에 고유하므로, 다른 컴포넌트의 스타일에 영향을 주거나 받지 않습니다. 이는 스타일 충돌을 방지합니다.
2. 동적 스타일링: JavaScript 변수나 함수를 이용하여 스타일을 동적으로 변경할 수 있습니다. 이는 상호작용이 많은 UI나 테마 전환 등의 기능에 유용합니다.
3. 재사용성과 유지 보수: 스타일링이 컴포넌트 코드 내부에 위치하기 때문에 컴포넌트의 재사용성과 유지 보수가 간편합니다.
4. 패키지 최적화: 사용하지 않는 스타일을 제거하는 Dead Code Elimination이 가능하여 최종 번들 크기를 최적화할 수 있습니다.
5. 툴링과 생태계: 여러 CSS in JS 라이브러리들은 서버 사이드 렌더링, 자동 접두사 추가, 런타임 최적화 등의 툴링과 플러그인을 제공합니다.
CSS in JS의 단점으로는 학습 곡선, 런타임 오버헤드, 서버사이드 렌더링의 복잡성, 기존 css와의 호환성, 추가 의존성 등이 있습니다.
1. 학습 곡선: 기존의 CSS 작성 방식과는 다르게 새로운 문법이나 패턴을 배워야 합니다.
2. 런타임 오버헤드: 일부 CSS in JS 라이브러리는 런타임에서 스타일을 계산하므로, 성능에 영향을 줄 수 있습니다.
3. 서버 사이드 렌더링 복잡성: CSS in JS를 서버 사이드 렌더링과 함께 사용할 때 추가적인 설정이나 복잡성이 발생할 수 있습니다.
4. 기존 CSS와의 호환성: 기존 프로젝트에서 CSS in JS로 전환할 때 호환성 문제가 발생할 수 있습니다.
5. 추가 의존성: CSS in JS 라이브러리를 프로젝트에 추가하면, 해당 라이브러리의 업데이트나 버그 등에 의존적이게 됩니다.
가 있습니다.
CSS in JS는 컴포넌트 기반의 현대적인 웹 개발에 많은 이점을 제공하지만, 프로젝트의 요구사항에 맞게 선택해야 합니다.
- 가상 클래스에 대해 설명해주세요. (60번)
: 가상 클래스(pseudo-classes)는 특정 상태 또는 조건에 따라 선택된 HTML 요소를 스타일링하기 위해 CSS에서 사용하는 선택자로, 웹 페이지 내의 요소들을 더 세밀하게 타겟팅하고, 다양한 상태와 조건에 따라 스타일을 적용할 수 있게 도와줍니다. 가상 클래스는 : 기호로 시작합니다.
1. 상태 기반 가상 클래스 (:hover, :active, :focus)
2. 구조 기반 가상 클래스 (:first-child, :nth-child(n), nth-of-type(n), :only-child, :last-child)
3. 타겟 및 UI 요소 상태 기반 가상 클래스 (:target, :checked, :disabled)
4. 부정 가상 클래스 (:not(selector))
- margin 병합에 대해 설명해주세요. (61번)
: 마진 병합은 두 요소가 수직으로 인접해 있을 때, 한 요소의 마진이 다른 요소의 마진과 합쳐져 더 큰 마진 값 중 하나만 적용되는 현상입니다. 이는 주로 블록 레벨 요소에서 발생하며, 수평 마진에서는 병합이 발생하지 않습니다.
1. 상황별 마진 병합
1-1. 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 또는 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진이 병합될 수 있습니다.
1-2. 수직으로 인접한 형제 요소의 하단 마진과 다음 요소의 상단 마진이 병합될 수 있습니다.
1-3. 마진이 적용된 요소의 높이가 0일 경우, 상단 및 하단 마진이 병합될 수 있습니다.
2. 마진 병합의 계산
2-1. 양수 마진만 있을 경우: 가장 큰 마진 값이 적용됩니다.
2-2. 음수 마진이 포함될 경우: 모든 마진을 합산하여 결과적인 마진 값이 결정됩니다.
2-3. 양수와 음수 마진이 동시에 있을 경우: 양수 마진에서 절대 값이 가장 큰 음수 마진을 뺀 결과가 최종 마진으로 적용됩니다.
3. 마진 병합을 피하는 방법
부모 요소에 padding이나 border 값을 설정하거나, 부모 요소의 overflow 속성을 hidden, auto, scroll 등의 값으로 설정하면 마진 병합을 방지할 수 있습니다.
- ⭐ Flexbox와 Grid 레이아웃의 주요 차이점은 무엇인가요?
: Flexbox는 주로 한 방향(가로 또는 세로)의 아이템 배열에 적합하며, Grid는 두 방향(가로와 세로)의 복잡한 레이아웃 설계에 적합합니다.
Flexbox는 주 축 및 교차 축으로 아이템을 정렬하거나 분배하는 데 사용되고, Grid는 행과 열 모두에서 아이템의 위치를 정의하고 정렬할 수 있습니다.
Flexbox는 주로 작은 컴포넌트나 단순한 레이아웃에, Grid는 복잡한 페이지 레이아웃에 더 적합합니다.
'스터디 > 프론트 cs 스터디(23.08-23.11)' 카테고리의 다른 글
| # HTML 예상 질문 - 1 (0) | 2023.09.01 |
|---|---|
| # React 예상 질문 - 1 (0) | 2023.08.28 |
| # CSS 예상 질문 - 1 (0) | 2023.08.23 |
| # 자바스크립트 예상 질문 -4 (자바스크립트 이벤트 처리 과정) (0) | 2023.08.23 |
| # 자바스크립트 예상 질문 - 3 (0) | 2023.08.15 |