코드잇 스프린트 1주차 위클리페이퍼✏️

Q1. CSS(Cascading Style Sheets)의 Cascading에 대해 설명해 주세요.

A. Cascading이란?

여러 소스에서 나온 스타일 규칙 중 어떤 스타일이 적용되는지를 결정하는 우선순위를 말한다.

Cascading의 세 가지 주요 원칙

1. 중요도

   !important > 사용자 스타일(프로그래머가 작성한 스타일) > 브라우저가 설정한 기본 CSS
   important는 가장 높은 중요도를 가지며, 다른 모든 규칙을 무시한다.

2. 명시도

   명시도는 스타일 규칙이 얼마나 구체적인지를 나타내는 개념이다.
   선택자의 구성에 따라 결정되고, 더 구체적인 선택자가 더 높은 명시도를 갖는다.

   1) 인라인 스타일(Inline Styles)

   • 스타일이 HTML 요소의 style 속성에 직접 지정되었을 때 가장 높은 명시도를 갖는다.

   2) ID 선택자

   • ID 선택자는 #으로 시작하며, 한 페이지에서 특정 요소를 유일하게 식별한다.
   • ID 선택자를 사용할수록 명시도가 증가한다.

   3) 클래스 선택자, 속성 선택자, 가상 클래스

   • 클래스 선택자는 . 형식으로, 속성 선택자는 [] 형식으로, 가상 클래스는 :형식으로 표현된다.

   4) 요소 선택자

   • 요소 선택자는 태그 이름 자체를 가리킨다. ex) div

3. 선언 순서

   스타일 규칙이 어떤 순서로 선언되었는지에 따라 적용 순서가 달라진다.
   나중에 선언된 스타일이 이전에 선언된 스타일을 덮어쓴다.

Q2. position의 속성들과 각각의 특징을 설명해 주세요.

A. position이란?

position 속성은 요소의 위치를 결정하는 데 사용된다.

position 속성의 종류

1. static

   • 요소를 문서의 일반적인 흐름에 따라 배치한다.
   • position 속성의 기본값이다.

2. relative

   • 요소를 자기 자신을 기준으로 위치시킨다.
   • 원래 있어야 할 곳에서 상대적으로 위치한다.
   • 원래 있던 곳은 그대로 비워놓고 배치한다.

   margin이랑 다른 점: 다른 속성들은 움직이지 않고 relative가 적용된 코드만 움직인다.

3. absolute

   • 가장 가까운 포지셔닝이 된 조상 요소(position: relative, position: absolute, 또는 position: fixed) 기준으로 위치를 잡는다.
   • 기존의 배치에서 벗어나서 배치된다.
   • 크기를 정해주지 않으면 안에 내용만큼 크기를 갖는다.
   • left, right 양쪽 다 지정해주면 크기를 지정할 수 있다.

   영역 전체를 꽉차게 겹치게 하기
   position: absolute; top: 0; right: 0; bottom: 0; left: 0;
   position: absolute; inset: 0;

4. fixed

   • 기존 배치에서 벗어나서 배치된다.
   • 요소를 뷰포트(브라우저 창)에 상대적으로 고정시킨다.
   • 스크롤되더라도 화면 상에 항상 같은 위치에 남아 있다.
   • 내비게이션에 주로 사용된다.

     position: fixed; top: 0; left: 0; right: 0;
     width: 100%를 하거나 left: 0; right: 0;과 같이 좌우 위치를 모두 정하거나 해야지 요소를 꽉 채울 수 있다.

5. sticky

   • 원래 위치에서 공간을 차지한다. 기본적으로는 static처럼 배치된다.
   • 스크롤을 하다가 웹 브라우저의 상단에 닿으면 fixed로 바뀐 것처럼 화면에 고정된다.
   • 다시 스크롤하다가 원래 위치로 돌아가면 static 포지션처럼 배치된다.
   • 원래 위치에 있다가 지정한 위치에 닿으면 fixed 포지션처럼 고정된다.
   • 부모 요소가 사라지면 같이 사라진다.

     position: sticky; top: 0;

6. inherit

   • position: inherit;은 부모 요소의 position 속성을 상속한다.