FE가 되고싶니? 나도✨

"Cascading"이라는 용어는 여러 분야에서 사용되지만, 일반적으로 "연속적으로 일어나는" 또는 "연쇄적인" 의미이다.

알아볼 cascading은 스타일 시트 언어, CSS(Cascading Style Sheet)에 들어가는 cascading이다.

여기서 Cascading이란 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 것을 의미한다. 즉, 웹 문서의 요소에 스타일을 적용할 때 우선순위를 두고 적용된다는 의미이다.

그 우선순위엔 결정하는데엔 판단기준이 있다.

1. 중요도
2. 명시도
3. 코드의 순서
4. 상속

중요도 importance

중요도는 스타일이 선언된 사람(위치)에 따라서 우선순위를 메기는 것이다. 작성자(author), 사용자(user), 사용자 도구(user agent, 브라우저가 대표적)가 작성한 세 종류로 나뉘는데

1. 작성자(author) 스타일 시트
2. 사용자(user) 스타일 시트
3. 사용자도구(user agent) 스타일 시트

순서로 작성자 스타일시트가 제일 우선순위가 높다.

1. !important : 최우선 순위로 적용되는 스타일, 명시도와 무관하지만, 명시도에 직접 영향을 미치고 다른 선언보다 우선한다.
2. 인라인 스타일 : 특정 태그 안에 'style' 속성을 이용해 부여된 스타일, 
   인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기 때문에 가장 높은 명시도를 갖는다.

**!important 는 가능한 사용하지 말자. (스타일 디버깅을 어렵게 한다)
**인라인 스타일 정의도 가능한 사용하지 말자. (스타일 디버깅을 어렵게 한다)

명시도 specificity

만약 중요도가 같을 경우 스타일은 적용범위의 영향을 받게 된다. 스타일의 적용범위가 좁을수록 우선순위는 높다.

1. 인라인 스타일 : HTML요소의 style 속성을 통해 직접 지정된 스타일. 가장 높은 명시도를 갖는다.
2. ID 선택자: #id 형식으로 정의된 선택자는 문서 내에서 한 번만 사용할 수 있으므로 비교적 좁은 범위를 가지게 된다.
3. 클래스 선택자, 속성 선택자, 가상(pseudo)클래스 선택자 : .class 형식으로 정의된 선택자는 ID 선택자보다 낮은 명시도를 갖는다.
4. 태그 선택자, 가상((psuedo)) 요소: div, p 등과 같은 태그 선택자로 문서 내 모든 태그를 가리키기 때문에 범위가 제일 넓고, 가장 낮은 명시도를 갖는다.

명시도는 점수화해서 계산을 할 수 있는데, 각 선택자 유형에 따라 점수로 계산된다.

인라인 스타일: 1,0,0,0
ID 선택자: 0,1,0,0
클래스 선택자: 0,0,1,0
태그 선택자: 0,0,0,1

명시도는 id 개수, class 개수, tag 개수로 결정되며, (id 개수, class 개수, tag 개수) 형태로 표시되는데, 앞에 있는 숫자가 클수록 명시도 점수가 높고 cascading 우선순위가 높다.

코드의 순서

같은 명시도를 가진 여러 스타일 규칙이 있을 경우, 나중에 선언된 스타일이 우선 적용된다. 즉, CSS 파일 내에서 아래쪽에 위치한 스타일이 위쪽에 위치한 스타일보다 우선적으로 적용된다.

상속

상속은 부모 요소의 특정 CSS 속성이 자식 요소에 전달되는 것이다. 조상 태그들에서 스타일이 모두 계산된 상태에서 우선순위를 따지는데, 가까운 조상에게 물려받은 속성일수록 우선순위가 높다. 

부모 요소에 설정된 글꼴이나 텍스트 색상은 자식 요소에 자동으로 적용되는데 모든 CSS 속성이 상속되는 것은 아니고, 일부 속성만 상속된다.

상속되는 속성

• 폰트 관련 속성: font-family, font-size, font-style, font-weight, line-height
• 텍스트 관련 속성: color, text-align, text-indent, text-transform
• 리스트 스타일: list-style, list-style-type, list-style-position

상속되지 않는 속성

• margin, padding, border, width, height 등

커맨드에서는 아규먼트를 줄 수도 있고 옵션을 줄 수도 있다.

Argument(인자) : 어느 대상에 대해 커맨드를 실행할지 정해주는 것

Option(옵션) : 커맨드가 실행되는 방식을 바꾸는 것. -(대시)와 특정 알파벳을 입력하면 된고 동시에 여러 옵션을 사용할 땐 붙여서 사용하면 된다.

cal -j 2024

cal :커맨드
-j :옵션
2024 :아규먼트

cal 커맨드를 j(날짜 대신 1월1일을 기준으로 몇번째 날인지 보여주는 옵션)라는 옵션을 써서 2024년도에 대해 실행한 것이다.

• 옵션은 커맨드를 어떻게 실행할지 정하는 것 
• 아규먼트는 커맨드의 대상 이라고 생각하면 쉽다.

터미널 : 인풋을 받고 아웃풋을 출력해주는 프로그램을 뜻한다. 보통생각하는 커맨드를 입력하는 '검은 화면'을 터미널이라고 할 수 있다.

shell : 커맨드를 해석해 주는 프로그램. 컴퓨터는 date같은 단어를 이해하지 못한다. 그래서 이런 커맨드를 컴퓨터가 이해할 수 있는 형태로 바꿔줘야 하는데 이것이 shell의 역할이다. shell이 date같은 커맨드를 컴퓨터가 이해할 수 있는 형태로 바꿔 전달해 주면,  컴퓨터가 실제로 커맨드를 '실행'하고 결과를 되돌려 주는 것이다.

shell은 여러 종류가 있고 종류에 따라 커맨드를 작성하는 방식이나 제공하는 인터페이스가 조금은 다를 수 있지만 대부분의 경우 아주 비슷하거나 똑같이 작동하기 때문에 크게 상관은 없다.

bash : shell의 한 종류로  Bourne agin shell이라고 부른다. 가장 보편적이고 많은 유닉스 운영 체제에서 기본 shell로 사용된다.

아무튼, shell과 터미널은 엄밀히 말하면 서로 다르지만, 커맨드를 입력하는 '검은 화면'을 그냥 shell이라고 부르는 경우도 많다.