안녕하세요! 개발자 꿈나무 엠디노입니다.
건축, 도시계획에만 근 10년을 매진하다가
더 나은 미래를 위해 '웹개발 풀스택' 과정을 훈련하고 있습니다.
(앞으로 7개월... 화이팅하자..)
훈련 중 첫 번째 숙제(?)인 '위클리 페이퍼'를 포스팅하고자 합니다.
각설하고 바로 시작하겠습니다.
1st 위클리 페이퍼 주제
- CSS의 Cascading에 대해 설명
- 시맨틱 태그를 사용하면 좋은 점을 설명
처음 이 주제를 보고 든 생각은..... 바로바로....
엥? 이게 뭐람? 이었습니다.
그리고,,, 내가 강의에 집중을 안했던가...?
하지만 본격적으로 서칭하기도 전 강의내용에 있더라구요...!
(너무 빨리 숙제에 대해서 고민해버렸다)
자 이제 숙제 시작해보겠습니다...!
(본격 숙제 포스팅 시작)
1. CSS의 Cascading이란?
구글에서 검색해본 결과, '캐스케이딩(Cascading)'은 '폭포처럼 위에서 아래로 쏟아지다'라는 뜻입니다.
그리고 여러 분야에서 연쇄적, 단계적으로 적용되거나 진행되는 것을 의미합니다.
웹개발에서는 규칙이 계층적으로 적용되는 방식을 의미한다고 합니다.
최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 말하는데요.
한국어로는 "종속"이라고 번역하기도 합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다.
너무나 서술형이라 강의와 구글 서칭을 바탕으로 아래에 다시 정리해보겠습니다......
* 구글 서칭, 강의 내용 참고
# 기본설명 - 폭포, 계단, 계층적 규칙
- 계단같은 작은 폭포?, 분수를 통해서 만들어지는 인공적인 폭포임
- 순서에 따라 계단식으로 합치는 것임
- 위에 있는 규칙이 아래있는 규칙을 덮어쓰는 것(제일 위에 것을 적용)
# 캐스케이드 순서 - 대부분 나중에 쓰는 게 우선, 점수가 높으면 장떙
- User agent stylesheet(기본설정?)는 우리가 만든 css보다 우선순위가 낮음
- HTML에 직접 작성하는 inline스타일은 가장 우선순위가 높음
- 코드 상 순서에서는 나중에 쓸수록 우선순위가 높음(똑같은 선택자인 경우)
- 선택자의 점수가 높을수록 우선순위가 높음(선택자의 명시도 순서 id 개수 , 클래스 개수 등으로 파악,, specificity calculator에 검색)
* css가 내가 원하는대로 적용이 안될떄 유용, 개발자도구에서 보면 쉽게 파악가능
 |
 |
출처 : https://blog.openreplay.com/css-cascade-layers/
2. 시맨틱 태그 사용 시 좋은 점
일단 좋은 점은 뭔지 알고 나서 작성해야겠죠?
그래서 시맨틱 태그가 뭔데....? 또 구글에 한번 검색해보겠습니다.
시맨틱 태그는 웹페이지의 콘텐츠에 의미와 구조를 명확하게 부여하는 HTML 태그입니다.
의미있게 그룹핑해서 구분시켜주는 것 같습니다.. 느낌상 좋은 녀석 같습니다(?)
# 기본설명 - div와 유사하나 의미가 명확
- <div> 태그와 유사하나, 의미를 담고 있음
* <header> 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부
* <nav> 메뉴영역
* <main> 본격적 내용(한 페이지에 한번만 사용가능)
* <footer> 아래쪽 여러 정보 등
* <section> 일부분을 나타냄
* <figure>이미지와 이미지 설명
* <article> 하나의 독립적 내용을 담은 태그(eg: 블로그 포스팅글, 블로그 포스팅글 댓글)
# 좋은 점 - 여러모로 다 좋다
- 검색(로봇) 관점 -> 검색엔진최적화(SEO)에 유리함
- 배리어프리 관점 -> 웹 접근성(A11y)이 높음, 시각장애인이 사용하기 편리함, 장벽없는 인터넷을 만드는데 유리
- 개발자 관점 -> 다른 사람이 만들었더라도 한눈에 이해하기 쉬워 생산성을 높이는데 도움이 됨
* 결론, 잘 활용하면 +, 우선 div로 만들고 필요하면 시맨틱태그로 바꾸는게 좋음
이상 개발자 꿈나무 엠디노였습니다...
머지않아 크고 작은 숙제와 문제들로 찾아뵙겠습니다..
그럼 이만!
'▼ 코딩 공부하기' 카테고리의 다른 글
| 💻 JS This, 렉시컬 스코프 개념 전 알아보기 (feat. 왕초보 위클리 페이퍼 #3) (0) | 2025.12.11 |
|---|---|
| 💻 Git branch merge, Git flow Branch 전략 알아보기 (feat. 왕초보 위클리 페이퍼 #2) (0) | 2025.12.05 |
