01. CSS에서 Cascading 이란?
MDN에 따르면 'cascade란 user agent가 다양한 소스에서 가져온 스타일 규칙들을 정의하는 알고리즘이다 .'라 명시한다. 여기서 user agent란 Web 맥락에서 웹 브라우저를 뜻한다. 쉽게 말해 브라우저가 웹페이지를 렌더링 할때 우선순위에 따라 여러 출처의 스타일들을 하나로 합치는 과정이 cascade라는 말인데,
그럼 Cascading 알고리즘은 무슨 기준으로 스타일의 우선순위를 정할까?
1. 출처(Origin)와 중요도(!important):
중요도(!important가 쓰였는지 아닌지) 와 출처에 따라 순서를 정한다.
참고로 origin types은 아래와 같다.
- user agent stylesheet: 웹브라우저가 기본으로 제공하는 스타일.
- author stylesheet: 개발자가 만든 css 파일이나 html 파일`<style>`내 정의한 스타일.
- user stylesheet: 사용자가 브라우저 익스텐션이나 사용자 설정을 통해 정의한 스타일.우선순위:
In-line Style > !importance > Author Stylesheet (작성자 스타일) > user stylesheet (사용자가 브라우저에 설정한 스타일시트) > user agent stylesheet (브라우저 기본스타일) >
2. 명시도(Specificity)
origin이 같다는 가정하에 선택자의 명시도가 높을수록 우선수위이다.
한 선택자의 ID, class tag가 몇개인지에따라 점수가 부여되고 한마디로 선택자가 복잡하고 자세 할수록 우선수위가 된다.
명시도 우선순위:
in-line style > #ID > .class > <html tag>
Specificity를 계산해주는 사이트: https://specificity.keegan.st
3. 스코프 근접성 (Scoping proximity)
같은 스타일시트내에서 명시도가 같고, @scope규칙을 사용했을때 Dom트리 관점에서 스코프 루트와 더 가까운 선택자가 우선적으로 적용된다.
Dom 트리 = HTML 구조
Dom 루트 = HTML 태그 (문서의 최상위 요소)
Scope 루트 = scope 시작범위
//기본 syntax
@scope (scope-root) {
selector{
property : value;
}
}
e.g)
Dom 트리에서 .element 가
.container 에 더 가깝다면 Red
.block 에 더 가깝다면 Blue
@scope(.container){
.element{color: red;}
}
@scope(.block){
.element{color:blue;}
}
4. 코드 순서 (Order of appearence)
위의 3가지가 같은 스펙의 선택자라면 맨 나중에 써진 코드가 우선순위가 된다.
요약
여기 1, 2, 3번 특징만 기억해도 문제가 생겼을때 어디서 override가 되었는지 예상할수 있을것 같다. 그리고 HTML 구조를 잘짜고 CSS이름을 규칙적으로 짓는게 선행되어야겠다.
@scope을 쓰지않은 이상 스코프 접근성은 생각안해도 될듯. 처음 접하는 개념이라 이해하기 힘들었다.. 그치만 역시 nesting으로 선택자 사용하는것이 더 범용적이고 여러 요소를 한번에 선택하기에는 좋아보임. @scope은 대부분 큰 프로젝트나 협업을 할때 컴포넌트나 모듈의 충돌을 방지하기 위해 사용된다함.
Reference:
02. HTML 시맨틱 태그(Semantic tag)를 사용해야 하는 이유
Semantic tag란??
HTML에서 Semantic tag란 말그대로 의미가 '있는' 태그로 컨텐트의 의미를 묘사하거나 전달하기 위해 쓰인다. 예를들어 HTML 태그 안 <body>태그에 기본 구조인 <header> <main> <footer> 순서대로 써주는 이유도, 각 부분이 페이지의 어느 부분을 포함하는지 나타내기 때문이다.
Semantic tag의 종류
non-semantic tag:
<div>, <span>semantic tag:
<form>, <table>, <article>,<section>,<aside> ..etc
제일 많이 사용되는 비의미적 태그는 아마<div> 이지 않을까 싶다. Division의 약자로 HTML 문서를 나누거나 그룹을 지을때 많이 사용된다. 말그대로 의미없는 빈 컨테이너로서 스타일하기 편한 태그이다.
<span>은 in-line 컨테이너로 나는 주로 <p>안의 텍스트나 작은 요소를 스타일할때 사용한다. Font-Awsome이나 아이콘 라이브러리에서 아이콘을 따올때도 <span> 안에 넣는 편이다. 참고로 이 글안의 보라색 텍스트도 <span>으로 감싸줘 스타일링을 해준것이다.
W3Schools에 따르면 HTML5기준 HTML요소들만 100개가 웃돈다 한다. 그 중 아무의미 없는 div와 span을 빼도 100개가 넘는다. 이걸 언제 다 외울까 싶지만 결국 쓰는것들만 쓰게 되는것 같다. tag이름도 직관적이기 때문에 존재만 안다면 자주 쓰는 태그들은 외우기 무리 없을거 같다.
Codecademy의 HTML tag Cheat Sheet을 한번쯤 읽어보면 HTML 요소와 구조들을 한눈에 볼수 있으니 참조.
이 링크는 MDN: MDN HTML 요소
아래는 W3Schools 참조해서 만들어본 대략적 HTML 구조. 디자인에 따라서<nav>는 <header> 안에 넣어주기도 한다. <aside>는 side bar나 사이드 노트, 주석용으로 보조적인 정보를 제공할때 쓰이기 때문에 사이드바가 있는 디자인일때 유용히 쓸 수 있을거 같다.
Semantic Tag의 장점
1. SEO (검색 엔진 최적화)
시맨틱 태그는 사이트의 구조와 콘텐츠의 의미를 명확히 전달하기 때문에 검색 엔진이 웹페이지의 맥락이나 중요도를 정확히 인식해 관련 검색어와 매칭되게 도와준다. 이는 사용자가 관련 검색어를 입력했을때 웹사이트가 웹에 더 잘 노출이 되게 한다.
2. 접근성과 호환성
시맨틱 태그를 잘 사용하면 스크린리더나 다른 보조기기와 호환성을 높여 사용자의 웹페이지 접근성을 높여준다.
e.g) <img>의 alt 속성으로 이미지를 텍스트로 설명하는것도 스크린 리더 사용자나 링크가 깨져 이미지를 알 수 없을때 이미지 요소를 이해할 수 있도록 도와준다.
3. 가독성과 유지보수
올바른 태그 사용은 웹브라우저 뿐만 아니라 개발자에게도 코드의 가독성을 높여 쉽게 이해할수 있어 차후에 유지보수 하는 사람들이 수정하기 편해진다. 또 모든것에 div로 .class나 #id를 붙이는 것보다도 적절한 태그의 사용은 CSS 선택자 쓰기도 수월하게 하고 일관된 디자인을 유지하게 도와준다.
요약
HTML에서 시맨틱태그는 뜻을 나타내는 요소로서, HTML을 작성할때 의미있는 태그로 구조와 요소를 잘 정해야 웹페이지의 가독성을 높여 맥락을 쉽게 파악할수 있게 도와준다. 개발자에게는 코드의 가독성을 높여 유지보수를 수월하게 하고, 검색엔진은 시맨틱 태그를 통해 웹페이지를 더 잘 이해하여 웹사이트가 검색 결과에 노출 되는데 도움을 준다. 또한, 보조 기기의 호환성을 높여 다른 방식으로 웹을 사용하는 사람들의 웹페이지 접근성을 향상시킨다.
Refernce:
Codecademy의 HTML tag Cheat Sheet
W3Schools: HTML Semantic Element
MDN HTML 요소
