codeit weekly paper1

• CSS의 Cascading에 대해 설명해 주세요.
• 시맨틱 태그를 사용하면 좋은 점을 설명해주세요.

---

Cascading(종속)은 원 단어의 의미적으로 '계단식 폭포'를 표현할 때 가장 많이 사용되는 단어입니다.

그 이미지와 같이 css의 종속은 단계적으로 스타일 설정이 쌓여서, 최종적으로 어떤 스타일이 적용되는가? 에 대한 내용입니다.

기본적으로 종속은 선언 순서에 따라 결정됩니다. 같은 우선순위를 가진 스타일이라면 선언 순서 상 가장 마지막에 선언된 스타일이 페이지에 적용되는 것이죠.

하지만 반드시 선언 순서만으로 적용되지는 않습니다. 위에도 언급했지만 '같은 우선순위'를 가질 때에 적용되는 것으로, 우선순위를 계산할 필요가 있습니다. 이 우선순위는 css 선택자를 기준으로 계산됩니다.

이를 css에선 특수성이라 표현하고, (id 선택자, 클래스 선택자, 선택자 개수)를 기준으로 삼습니다.

선택자가 div > p > span과 같은 형식이라면 id, 클래스 선택자가 모두 없고 선택자가 총 3개이므로 (0, 0, 3)의 특수성을 가집니다.

div.wrap > p > span.red와 같은 형식이라면 id 선택자가 없고 클래스 선택자가 2개, 선택자 개수가 총 3개이므로 (0, 2, 3)의 특수성을 가집니다.

div#sec1 > p > span.red라면 (1, 1, 3)의 특수성을 가집니다.

이 특수성은 앞에서부터 비교해 더 높은 수치를 가지는 선택자가 우선순위를 높게 가집니다. (1, 1, 3)이 (0, 2, 3)보다 우선순위가 높습니다.

이 특수성보다도 더 높은 우선순위를 가지는 규칙이 하나 있는데 이는 중요도가 설정된 경우입니다.

color : red !important 와 같이 어떤 속성을 선언할 때 !important로 선언하면 중요도가 설정되고, 다른 규칙보다 가장 우선해서 적용됩니다.

물론 중요도가 설정되거나, 특수성이 같아서 우선순위가 같다면 선언 순서에 따라 덮어씌워져 마지막 선언이 적용됩니다.

---

시맨틱 태그는 기능적으로는 div 태그와 동일하지만, 태그 자체가 일종의 의미를 포함하는 태그입니다. 기능적으로 동일하기에 div태그로 짜도 문제는 없지만 시맨틱 태그를 사용하는 것이 권장됩니다.

이는 html의 근본적인 의미를 생각하면 알 수 있습니다.

HyperText Markup Language. html은 이름부터 마크업 언어, 즉 문서의 '구조'를 명시하는 언어입니다. 기능적으로 같더라도 구조의 이해에 도움이 되는 시맨틱 태그는 마크업 문서를 작성하는데 있어서 매우 중요한 요소라 할 수 있습니다.

시맨틱 태그를 사용하는 것에는 몇가지 장점이 있습니다.

우선 html 문서를 읽는 사용자(사람이든 ai든)에게 문서의 구조를 더 명확하게 전달할 수 있습니다. 문서를 수정해야하는 개발자의 입장이라면 구조를 더 명확하게 이해하는 것으로 보다 정확한 수정이 가능하게 됩니다. 만일 문서를 읽는 사용자가 문서를 음성으로 변환해 출력해주는 프로그램이라고 한다면, 시각장애인 이용자가 문서의 원하는 위치로 이동할 때 프로그램이 보다 쉽게 해당 위치를 인지할 수 있게 됩니다.

이 외에도 검색이나 링크 등으로 해당 페이지의 정보를 얻고자 할 때, 프로그램이 문서의 명확한 구조를 알게 되기 때문에 관련 정보를 분석해 이용자에게 제공할 때 보다 편리합니다.