- px, em, rem 의 차이에 대해 설명해주세요. 반응형 웹을 구현할 때는 이 단위 중에서 어떤 단위를 주로 사용하시나요? (39번)
: px는 절대 단위로 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이고, em과 rem은 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 상대 길이를 의미합니다.
em과 rem은 둘 다 CCS의 font-size 속성값에 비례해서 결정되는 상대 단위입니다. 둘은 정확히 어디에 있는 font-size 속성값인지에 따라 차이가 발생합니다.
em은 해당 단위가 사용되고 있는 요소(부모 요소)의 font-size 속성값이 기준이 됩니다.
rem에서 r은 root를 의미하고, 최상위 엘리먼트의 font-size 값을 기준으로 변환된 단위를 의미합니다.
rem은 기준이 되는 폰트 크기 하나로 고정되어 있지만 em은 구조에 따라 기준이 계속 바뀌기 때문에 css가 복잡하면 변환될 크기를 예측하기 어렵다는 단점이 있습니다.
- vw, vh에 대해 설명해주세요. (40번)
:vw와 vh는 상대적인 길이 단위로, 뷰포트의 너비와 높이에 기반을 둡니다.
뷰포트의 크기에 따라 요소의 크기를 동적으로 조절가능하므로, 반응형 디자인에서 유용하게 사용됩니다.
1. vw (Viewport Width)
1vw는 뷰포트 너비의 1%에 해당합니다.
예를들어, 50vw는 뷰포트 너비의 50%를 차지하게 됩니다.
2. vh (Viewport Height):
1vh는 뷰포트 높이의 1%에 해당합니다.
예를 들어, 70vh는 뷰포트 높이의 70%를 차지하게 됩니다.
- 반응형 브레이크 포인트는 보통 어떻게 잡으시나요? (41번)
: 브레이크 포인트란 사용자들의 스크린 가로 사이즈가 몇 px인지에 따라 보여줄 내용을 변경시키는 지점을 말합니다. 브레이크 포인트에 대해 알기 위해서는 먼저 반응형 웹을 적용하기 위해 html <head> 태그에 meta viewport를 설정해주어야 합니다.
보통 반응형 페이지를 작업한다고 하면 pc, 태블릿, 모바일 세 가지로 나누게 됩니다. 브레이크 포인트를 설정하기 위해서는 해상도 사용 비율을 알아야 좋은 브레이크 포인트를 설정할 수 있습니다.
주로 4단계형 분기점 또는 3단계형 분기점을 사용합니다.
먼저 4단계형 분기점은 보통 낮은 해상도의 PC, 태블릿 가로, 모바일 가로, 모바일 이렇게 네단계로 나뉩니다.
- 낮은 해상도의 PC, 태블릿 가로 : ~1024px
- 태블릿 가로 : 768px ~ 1023px
- 모바일 가로, 태블릿 : 480px ~ 767px
- 모바일 : ~480px
두번째로 3단계형 분기점이 있습니다.
3단계형 분기점은 PC, 태블릿, 모바일 이렇게 세단계로 구분합니다.
- PC : 1024px ~
- 태블릿 가로, 세로 : 768px ~ 1023px
- 모바일 가로, 세로 : ~768px
이 밖에도 기기에서 직접 테스트 해서 사용하는 커스텀 분기점이 있습니다.
이는 원하는 해상도에 따라 적용 가능합니다.
- ⭐ CSS 선택자의 우선순위에 대해 설명해주세요. (42번)
1. !important : 해당 스타일 선언에 최고의 우선순위를 부여합니다.
2. 인라인 스타일 (<div style="color: red;">) : HTML 내부에 직접 정의된 스타일로, 외부 및 내부 스타일시트보다 높은 우선순위를 가집니다. (점수: 1000)
3. ID 선택자 (#someID) : 특정 ID를 가진 요소를 대상으로 합니다. (점수: 100)
4. 클래스 (.someClass), 속성 ([type="text"]) 및 의사 (:hover) 클래스 선택자 : (점수: 10)
5. 태그(h1, div, p 등) 및 의사 요소 선택자(::before, ::after) : (점수: 1)
6. 다른 선택자: *, >, +, ~ 등. 이들은 점수에 직접적인 영향을 주지 않지만, 다른 선택자와의 조합으로 우선순위가 결정됩니다.
점수가 높은 선언이 우선되고, 점수가 같으면 가장 마지막 선언을 우선합니다.
- 페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야될까요? (43번)
: 페이지 크기가 변해도 항상 같은 비율을 유지하려면, 요소의 너비와 높이에 퍼센트(%) 값을 사용하면 됩니다. 특히, 요소의 높이를 너비에 따라 유동적으로 조절하기 위해 패딩의 퍼센트 값을 활용하는 방법이 널리 사용됩니다. 또한, 미디어 쿼리를 사용하면 다양한 화면 크기나 장치에 따라 추가적인 스타일 변경을 적용할 수 있습니다.
- Flexbox에 대해 설명해주세요. (44번)
: flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하고, 복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다.
flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성된다.
정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면, 그 요소는 flex container가 되고 자식은 flex item이 된다.
1. 컨테이너에 적용되는 속성
flex 요소를 생성하기 위해 display에 flex나 inline-flex 값이 사용된다.
flex container의 flex-direction 속성으로 주축의 방향을 결정하는데, 기본값인 row이다.
justify-content는 주 축에서 아이템들을 어떻게 정렬할 것인지 결정하는 속성이고, align-items는 교차 축에서 아이템들을 어떻게 정렬할 것인지 결정하는 속성이다.
2. 아이템에 적용되는 속성
flex-grow 속성은 flex item의 확장에 관련된 속성이다.
속성값이 0이면 flex container의 크기가 커져도 flex item의 크기가 커지지 않고 원래 크기로 유지된다.
flex-shrink 속성은 flex item의 축소에 관련된 속성이고, 기본값은 1이다.
속성값이 0이면 flex container의 크기가 flex item의 크기보다 작아져도 flex item의 크기가 줄어들지 않고 원래 크기로 유지된다. 속성값이 1 이상이면 flex container의 크기가 flex item의 크기보다 작아질 때 flex item의 크기가 flex container의 크기에 맞추어 줄어든다.
flex-basis 속성은 flex item의 기본 크기를 결정하는 속성이다. flex item의 크기가 고정시킬수 있고, 기본값은 auto다. 값을 0으로 설정하면 flex item은 절대적 flex item(absolute flex item)이 되어 flex container를 기준으로 크기가 결정된다. flex-basis 속성의 값을 0으로 선언할 때에는 flex-basis: 0px, flex-basis: 0%와 같이 단위도 함께 설정해야 한다.
- ⭐ float의 동작에 대해 설명해주세요. (45번)
: Float는 이미지와 텍스트를 적절히 배치하는 도구입니다. 이 속성이 적용된 요소는 페이지의 정상적인 흐름에서 붕 뜨게 되며, 그 결과로 해당 요소를 둘러싼 다른 내용들은 그 주위로 흐르게 됩니다.
Float가 적용된 이미지나 다른 요소들과 함께 배치된 텍스트는 해당 요소에 가려지지 않습니다. 대신 텍스트는 이미지나 요소 주변을 둘러싸게 되며, 요소의 배치 방식에 따라 자동으로 조절됩니다.
Float 속성이 적용된 요소는 외부의 Block Formatting Context (BFC)에 의해 인식됩니다. BFC는 페이지의 블록 레벨 요소를 렌더링하는데 사용되는 CSS의 비주얼 서식 모델 중 하나입니다. BFC는 float와 관련된 block 요소 내부의 inline 콘텐츠를 파악하고, 해당 float 요소의 left와 top 값을 기반으로 Inline Formatting Context (IFC)를 변경하여 내부 콘텐츠를 배치합니다.
- CSS에서 Cascading에 대해 설명해주세요. (46번)
: CSS는 "Cascading Style Sheets"의 약자로, 위에서 아래로 떨어지는이라는 의미를 가진 단어 입니다.
캐스케이딩은 스타일 우선순위와 스타일 상속의 원칙을 통해 어떤 요소에 스타일을 적용할지 결정합니다.
1. 스타일 우선순위
: 스타일 요소는 각각 우선순위를 가지고 있는데, 이 우선순위가 가장 높은 스타일이 적용되는 것을 스타일 우선순위라고 합니다.
스타일 우선순위는 다음 3가지 요소를 통해 우선순위를 결정합니다.
1-1.중요도 : 중요도는 스타일이 선언된 위치에 따라서 우선순위를 매기는 것입니다.
스타일 시트는 작성자, 사용자, 사용자 도구가 작성한 세 종류로 나뉩니다. 이 중에서 가장 중요도가 높은 것은 작성자의 CSS파일입니다. 그 다음으로는 사용자 스타일 시트, 사용자 도구 스타일 시트 순서입니다.
일반적으로는저 순서대로 높은 우선순위를 가집니다. 하지만 !important키워드를 사용하면 의도적으로 중요도를 끌어올릴 수가 있습니다.
!important가 적용된 스타일 시트의 중요도는 "!important 작성자 스타일 시트 > !important 사용자 스타일 시트
> 작성자 스타일 시트 > 사용자 스타일 시트 > 사용자 도구 스타일 시트" 입니다.
1-2.명시도 : 명시도는 셀렉터가 가리키는 것이 명확할수록 우선순위를 높게 주는 것을 의미합니다. "인라인 > id > class > 태그"에 따른 우선순위를 갖습니다.
1-3.코드 순서 : 코드에서 가장 마지막에 등장한 속성을 최우선으로 적용한다는 것 입니다. 이것은 위에서 아래로 해석해나가는 프로그래밍의 기본 원리와도 일치합니다.
2. 스타일 상속
: 타일 상속은 태그들이 어떻게 포함되었는지에 따라서 스타일을 적용할 지 결정하는 원칙입니다.
상속 요소는 부모 요소의 스타일을 자식 요소가 따라가는 것을 의미합니다. 부모 요소에만 style을 적용해도 자식 요소에도 자동적으로 부모 요소의 스타일이 적용되는 것을 말합니다.
'스터디 > 프론트 cs 스터디(23.08-23.11)' 카테고리의 다른 글
| # React 예상 질문 - 1 (0) | 2023.08.28 |
|---|---|
| # CSS 예상 질문 - 2 (0) | 2023.08.28 |
| # 자바스크립트 예상 질문 -4 (자바스크립트 이벤트 처리 과정) (0) | 2023.08.23 |
| # 자바스크립트 예상 질문 - 3 (0) | 2023.08.15 |
| # 자바스크립트 예상 질문 - 2 (0) | 2023.08.09 |