Week1. Cascading 과 시맨틱 태그

CSS의 Cascading

CSS에서 "Cascading"이란 스타일 규칙이 충돌할 때, 어떤 규칙이 적용될지를 결정하는 우선순위 체계를 의미합니다. "Cascading"이라는 용어는 "폭포처럼 내려간다"는 의미에서, 여러 스타일 규칙이 적용될 때 순서대로 내려오면서 적용된다는 것을 비유적으로 설명한 것입니다.

Cascading의 주요 개념

1. 우선순위(Specificity):
   • CSS에서 특정 요소에 적용되는 여러 규칙이 있을 때, 우선순위에 따라 어떤 규칙이 적용될지 결정됩니다. 우선순위는 선택자의 타입에 따라 결정되며, 인라인 스타일 > ID 선택자 > 클래스, 속성, 가상 클래스 선택자 > 태그 선택자의 순으로 우선순위가 높습니다.
   • 예를 들어, id 선택자가 class 선택자보다 높은 우선순위를 가집니다.
2. 출처(Origin):
   • 스타일 규칙은 브라우저 기본 스타일, 사용자 스타일 시트, 작성자 스타일 시트에서 올 수 있으며, 우선순위는 작성자 스타일 시트 > 사용자 스타일 시트 > 브라우저 기본 스타일의 순으로 높습니다.
   • 예를 들어, 브라우저 기본 스타일이 있는 경우에도 작성자 스타일 시트에서 정의한 규칙이 더 높은 우선순위를 가집니다.
3. 중요도(Importance):
   • !important 키워드는 특정 규칙의 우선순위를 강제로 높이는 데 사용됩니다. !important가 붙은 규칙은 우선순위에서 가장 높게 평가되며, 이 키워드가 없는 다른 모든 규칙보다 우선 적용됩니다.
4. 소스 코드 순서:
   • 우선순위가 동일한 규칙이 충돌할 때는 소스 코드에서 나중에 정의된 규칙이 우선 적용됩니다.

요약

CSS의 "Cascading"은 여러 스타일 규칙이 요소에 적용될 때, 어떤 규칙이 최종적으로 적용될지를 결정하는 우선순위 체계입니다. 이 체계는 선택자의 우선순위, 스타일의 원산지, !important의 사용, 소스 코드의 순서 등에 따라 결정됩니다. Cascading을 이해하면, 스타일링이 예상대로 적용되지 않을 때 그 이유를 파악하고 해결하는 데 도움이 됩니다.

 

 

시맨틱 태그 사용시 좋은 점

시맨틱 태그를 사용하면 웹 개발에서 여러 가지 이점을 제공합니다. 시맨틱 태그란 HTML에서 요소의 의미를 명확하게 나타내는 태그를 말합니다. 예를 들어, <header>, <footer>, <article>, <section>, <nav> 등이 시맨틱 태그에 해당합니다. 이러한 태그를 사용하면 다음과 같은 장점이 있습니다.

1. 웹 접근성 향상

• 시맨틱 태그를 사용하면 스크린 리더와 같은 보조 기술이 페이지의 구조와 콘텐츠를 더 잘 이해할 수 있습니다. 이는 시각 장애인이나 다른 장애를 가진 사용자들이 웹 콘텐츠를 더 쉽게 탐색하고 이해할 수 있도록 도와줍니다.

2. SEO(검색 엔진 최적화) 개선

• 검색 엔진은 시맨틱 태그를 통해 웹페이지의 구조와 주요 콘텐츠를 더 쉽게 파악할 수 있습니다. 예를 들어, <article> 태그로 감싸진 내용은 중요한 기사로 인식될 수 있으며, <nav> 태그는 내비게이션 링크로 인식됩니다. 이런 식으로 시맨틱 태그를 사용하면 검색 엔진이 페이지의 중요도와 관련성을 더 정확하게 평가할 수 있습니다.

3. 코드 가독성 향상

• 시맨틱 태그는 코드의 의미를 명확하게 전달하므로, 개발자나 협업자가 코드를 읽고 이해하기가 더 쉬워집니다. 예를 들어, <div> 대신 <header>를 사용하면, 해당 블록이 페이지의 헤더 부분임을 쉽게 알 수 있습니다. 이는 유지보수성과 협업의 효율성을 크게 높여줍니다.

4. 표준 준수

• HTML5 표준에서는 시맨틱 태그 사용을 권장합니다. 표준에 맞게 코드를 작성하면, 다양한 브라우저와의 호환성 문제가 줄어들며, 향후 HTML의 진화에 따라 코드가 더 오래 사용 가능하고 호환성을 유지할 가능성이 높습니다.

5. 스타일링과 스크립팅의 용이성

• 시맨틱 태그를 사용하면 CSS와 JavaScript를 통해 특정 요소를 더 명확하게 선택하고 스타일링하거나 조작할 수 있습니다. 예를 들어, <nav> 태그를 사용하여 내비게이션 바를 쉽게 스타일링하거나, 특정 시맨틱 태그에 맞춘 스크립트를 작성할 수 있습니다.

요약

시맨틱 태그를 사용하면 웹 접근성, SEO, 코드 가독성, 표준 준수, 스타일링 및 스크립팅의 측면에서 많은 이점을 얻을 수 있습니다. 이를 통해 웹사이트가 더 이해하기 쉽고, 유지보수가 용이하며, 검색 엔진 및 보조 기술과의 호환성이 높아지게 됩니다.