CSS 인터뷰 질문 스테레오타입 에세이 요약

1. CSS 선택기

• 출처: 인라인 스타일 > 내부 스타일 > 외부 스타일 > 브라우저 사용자 정의 > 사용자 정의 스타일
• 유형: id 선택기(1000) > 클래스 선택기 > 의사 클래스 선택기(:hover 등, 속성 선택기 > 레이블 선택기, 의사 요소(1) > 와일드카드 선택기, 자식 선택기, 인접 선택기 보충
  :
• ! 중요한 것이 가장 높은 우선 순위를 갖습니다
• 우선 순위는 동일하며 마지막 것이 적용됩니다.
• 상속은 우선순위가 낮음

2. CSS의 박스 모델

• 표준 박스 모델(W3C)
  box-sizing: content-box (기본값)
  standard box model total width/height: margin+border+padding+content area width/height (즉, width/height는 padding과 border 값을 포함하지 않음) ))
  

• 이상한 상자 모델(IE 상자 모델)
  box-sizing:border-box
  IE 상자 총 너비/높이 == (콘텐츠 영역 너비/높이 + 패딩 + 테두리) + 여백. (예: 너비/높이에는 패딩 및 테두리 값이 포함됨))

3. CSS 상속성 속성

• 폰트 패밀리: font-family, font-weight, font-size, font-style
• 텍스트 시리즈: text-align, line-height, color
• 보이는 요소: 가시성
• 목록 레이아웃 속성: list-style

4. 레이아웃 방법

정적 레이아웃:
적응형 레이아웃:
유동적 레이아웃:
반응형 레이아웃:
탄력적 레이아웃:

5. css 속성의 위치 속성은 무엇입니까?

문서 흐름은 요소 조판 및 레이아웃 과정을 말하며, 요소는 자동으로 왼쪽에서 오른쪽으로, 위에서 아래로 정렬되고 최종적으로 양식은 위에서 아래로 행으로 나뉘며 각 행은 순서에 따라 나뉩니다. 왼쪽에서 오른쪽으로 요소를 오른쪽 순서로 정렬합니다. [문서 흐름에서 벗어나는 것은 요소가 배열을 방해한다는 것을 의미합니다] 또는 조판에서 제거합니다.

css에는 문서 흐름, 부동 및 위치의 세 가지 위치 지정 메커니즘이 있습니다.

A: 위치: 절대는 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치 지정되는 절대적 위치 지정 요소를 생성합니다. 절대 위치 지정으로 인해 문서 흐름에서 분리됩니다.

B: 위치: 고정은 브라우저 창을 기준으로 절대 위치 지정 요소를 생성하며 일반 순서와 관련이 없습니다.

C: 위치: 상대 정상 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 문서 흐름에서 벗어날 방법이 없습니다.

D: float: left 떠다니며 원래 위치를 유지할 수 없습니다.
위치 포지셔닝

• 정적: 기본값, 위치 지정 없음, 요소가 정상적인 흐름으로 나타남(상단, 하단, 왼쪽, 오른쪽 또는 z-인덱스 선언 무시)
• 절대: 절대 위치 지정을 생성하는 요소는 정적 위치 지정 이외의 첫 번째 상위 요소를 기준으로 위치 지정되며 요소는 "left", "top", "right" 및 "bottom" 속성으로 지정됩니다.
• flxed: 브라우저 창에 상대적으로 배치된 고정 배치 요소 생성
• 상대: 상대 위치 생성, 다른 정상 위치에 상대적인 위치
• sticky: 고정 위치 지정, 위치 지정은 사용자 스크롤 위치를 기준으로 합니다.

6. 디스플레이: 없음과 가시성: 숨김의 차이점

• 다른 기능 가시성: 숨김---- 요소를 숨기지만 여전히 웹 페이지에서 차지해야 하는 위치를 차지합니다. display: none----요소의 표시를 없음으로 설정합니다. 즉, 웹 페이지에서 어떤 위치도 차지하지 않습니다.
• 요소가 표시되는지 여부를 지정하는 다양한 가시성 속성을 정의합니다. display 이 속성은 레이아웃이 설정될 때 요소에 의해 생성되는 디스플레이 상자의 유형을 정의하는 데 사용됩니다.

7. CSS 측정 단위

1. rem은 루트 글꼴 크기에 상대적인 단위입니다. 예를 들어 1rem=50px로 설정할 수 있습니다.
2. em은 font-size: 16px(브라우저 기본값), 2em=32px와 같이 font-size에 상대적입니다.
3. vm은 시점 너비, 창 너비입니다. 예를 들어 1vm의 너비는 창 너비의 1%입니다.
4. vh는 시점 높이, 창 높이입니다. 예를 들어 1vm의 높이는 창 높이의 1%입니다.

8. 리플로우 및 리페인트

브라우저가 페이지를 렌더링합니다.
● HTML 파서를 통해 HTML이 DOM 트리로 파싱됩니다.
● CSS 파서를 통해 CSS 파일을 파싱하여 캐스케이딩 스타일 시트 모델의 CSSOM 트리를 형성합니다.
● DOM 트리와 CSSOM 트리를 렌더링 트리로 결합
● 레이아웃, 브라우저는 화면에 렌더링 트리의 각 노드를 그립니다. 이를 레이아웃(Layout)이라고 합니다.
● 드로잉, 렌더링 트리의 각 노드를 화면에 그립니다. 단계를 드로잉(페인트)이라고 합니다.

재정렬(리플로우)
재정렬은 브라우저가 처음으로 페이지 레이아웃을 렌더링한 후 페이지의 각 노드 위치를 다시 계산 하거나 다시 레이아웃 하는 동작 입니다.

• 요소의 위치 나 크기가 변경되었기 때문에 브라우저는 렌더링 트리를 다시 계산하여 렌더링 트리의 일부 또는 전체를 변경하고 페이지에서 영향을 받는 요소를 다시 그려야 합니다.
• 재배열을 트리거할 수 있는 동작에는 페이지 크기 변경, 요소 크기 또는 위치와 관련된 작업 등이 포함됩니다.
  다시 그리기 다시 그리기
  는 레이아웃 계산이 완료된 후 페이지가 다시 그려지는 것을 의미합니다. 변경, 요소를 다시 그리는 과정
  ● 다시 그리기가 반드시 재정렬을 유발하는 것은 아니지만 재정렬은 확실히 다시 그리기를 유발
  합니다
  . CSS는 웹페이지의 외형, JS는 웹페이지의 동작으로, 일반적으로 웹페이지의 HTML 변경(즉, DOM 요소의 변경)에 관련된 것은 재정렬이고, CSS에 관련된 것은 color, reordering이다.그리기(display: flex를 사용하는 것과 같이 DOM에 영향을 미치는 것은 제외)를 줄이고
  피한다
  .재배열과 다시 그리기를 피하기 위해서는 여러 DOM 작업을 하나의 DOM 작업으로 축소하거나 병합해야 한다
  .왜냐하면 절대적인 위치는 요소를 만들 수 있습니다 문서 흐름에서 벗어나 외부 세계에 영향을 미치지 않고 부분적인 재정렬 만 시작합니다 중앙 집중식으로 인터뷰 답변을
  변경할 때 크기 및 위치를 변경하는 등 페이지 레이아웃에 영향을 미칠 때 , 재정렬을 트리거합니다 배경색 등을 변경할 때 다시 칠합니다.
  
  

9.CSS 박스 센터 디스플레이

1. 아버지와 아들 찾기

• 1.1 여백이 자동으로 설정됨

.child { 상단: 0px; 왼쪽: 0px; 하단: 0px; 오른쪽: 0px; 여백: 자동; }

• 1.2 변환은 하위 상자를 너비와 높이의 절반으로 "뒤로" 이동시킵니다.

.child { 위치: 절대; 상단: 50%; 왼쪽: 50%; 변환: 변환(-50%, -50%);

2. Flex 레이아웃
부모 상자를 유연한 상자 컨테이너로 설정하여
자식 요소를 가로 및 세로 중앙에 배치합니다.

.parent { 디스플레이: 플렉스; justify-content: 센터; 정렬 항목: 중앙; }

• 3. inline-block 인라인 블록 요소
  text-align: center; 인라인 요소와 인라인 블록 요소에만 유용함

.parent { text-align: center; line-height: 500px; } .child { display: inline-block; vertical-align: middle; vertical-align 속성은 요소의 수직 정렬을 설정합니다. middle은 이 요소를 상위 요소의 중간에 배치합니다. }

CSS 상자는 오른쪽에 고정되고 왼쪽에 적응됩니다.
1. 부동 상자 고정 + 적응 상자 너비: 100%;//폭은 100%와 같습니다.

.left { float: 왼쪽; 너비: 200px; 높이: 400px; 배경: 빨간색; } .right { 너비: 100%;//폭은 100%와 같음 height: 400px; 여백-왼쪽: 200px; 배경: 파란색; }

2. 플렉스 레이아웃의 상위 컨테이너는 display: flex로 설정되고 오른쪽 부분은 flex: 1로 설정됩니다.

.box{ 디스플레이: 플렉스;}

.left{폭:200px;배경: 빨간색;}

.right{width:%;flex:1;background: blue;}/ 왼쪽 열의 너비와 같음 /

3. 양쪽 절대 위치 결정

.left{폭:200px;배경: 빨강; 위치: 절대;왼쪽:;}

.right{width:100%;background: blue;position: absolute;left:200px;}/ 왼쪽 열의 너비와 같음 /

10. CSS 스타일 숨겨진 요소

화면 외부에 위치 지정, 투명도 변환, 표시, 불투명도,

• opacity 속성의 효과는 배경색에 투명도를 더해주는 것으로 값의 범위는 0~1이지만 배경색의 폰트도 함께 투명하게 만들어주는 역할을 합니다.
• Visibility 요소에 대한 가시성 설정: hidden은 이 요소를 숨길 수도 있지만 숨겨진 요소는 여전히 숨겨지지 않은 경우와 동일한 공간을 차지해야 합니다. 즉, 요소가 보이지 않더라도 여전히 페이지 레이아웃에 영향을 미칩니다. .
• display 요소에 대해 display: none을 설정하면 해당 요소와 모든 하위 요소가 숨겨지며 이는 프런트 엔드 개발자가 가장 자주 사용하는 숨기기 방법입니다. 숨은 요소는 클릭 불가, 스크린리더 등 보조기기 접근 불가, 점유공간 소멸

보충:
가시성과 표시의 차이

• 가시성은 상속됩니다. 가시성:숨김을 상위 요소로 설정하면 하위 요소도 이 속성을 상속합니다. 그러나 가시성: 가시성을 하위 요소에 다시 설정하면 하위 요소가 다시 표시됩니다. 이것은 display:none과 질적으로 다릅니다.
• Visibility: hidden은 그림에 표시된 것처럼 카운터 계산에 영향을 미치지 않습니다. 이것은 디스플레이와 완전히 다릅니다: 없음
• CSS3 트랜지션은 Visibility 속성은 지원하지만 디스플레이는 지원하지 않는데, 트랜지션이 지연될 수 있기 때문에 Visibility와 함께 사용하여 순수 CSS를 사용하여 호버 지연 표시 효과를 얻을 수 있습니다. 사용자 경험을 향상시킵니다.

11. CSS 스타일 표시

• 블록"을 사용하여 요소를 블록 수준 요소로 표시
• none은 가시성 속성의 숨겨진 값과 다르며 숨겨진 개체를 위한 물리적 공간을 예약하지 않고 웹 페이지에서 사라지지만 요소는 문서에서 삭제되지 않고 웹 페이지에서 숨겨집니다. 구조이며 웹 페이지에 표시되지 않습니다. 물리적 공간을 차지하지 않고 웹 페이지에 표시되지 않지만 DOM 구조는 여전히 존재합니다.
• 인라인"은 주로 블록 수준 요소를 인라인 요소로 변환하는 데 사용됩니다.

12. CSS의 의사 클래스

링크 의사 클래스: 방문한 링크 호버 활성화
구조적 의사 클래스: 첫 번째 자식 마지막 자식 n번째 자식(n) n번째 마지막 자식(n)
N: 짝수 홀수 n 2n 등
대상 의사 클래스: :target { }

13. CSS 애니메이션

애니메이션의 공통 속성:
애니메이션 프레임 animation
animation-name: 애니메이션 이름
animation-duration: 기간
animation-timing-function: 애니메이션 속도 곡선
animation-delay: 애니메이션 시작 시간
animation-iteration-count: 지정된 애니메이션 재생 횟수 기본값은 1
animation 입니다. - 방향: 애니메이션이 다음 주기에서 반대로 재생되도록 지정합니다. 기본값은 공칭입니다.