위클리 페이퍼 #1

1. CSS의 Cascading에 대해 설명해 주세요

 

CSS의 Cascading이란 규칙을 순서에 따라서 계단식으로 합치는 것을 뜻합니다. 요소에 하나 이상의 스타일이 영향을 줄 수 있기 때문에, 어떤 스타일을 적용할 지에 대한 우선순위를 결정하는 것입니다. 우선순위를 결정할 때 다음과 같은 사항을 고려합니다.

 

1. importance (중요도)
   • !important로 특정 속성과 가치를 가장 구체적으로 만들어 cascade의 일반적인 규칙을 무시합니다.
2. Specificity (명시도, 우선순위)
   • 대상을 얼마나 명확하고 구체적으로 지정했는지를 ‘ID - Class - Type’ 가중치로 판단합니다.
3. Source order (소스순서)
   • 동일한 가중치를 갖는 규칙이 두 개 이상인 경우, CSS 에서 마지막에 오는 규칙이 우선합니다.

 

* Specificity를 증가시키는 원리 (가중치)

<style>
    span{color:red;} /*0-0-1*/
    .text{color:blue} /*0-1-0*/
    .content span{color:pink} /*0-1-1*/
    .content .text{color:orange} /*0-2-0*/
    #content .text{color:black} /*1-1-0*/
</style>

<div id="content" class="content">
    <span class="text">Hi</span>
</div>

 

전부 span태그의 텍스트의 color를 바꾸려고 하지만 가중치가 제일 높은 #content .text{color:black} 이 적용된다. 이 가중치를 계산할때는 전역선택자(*), 조합자(+, >, ~, " ", ||), 부정의사클래스(:not())는 영향을 주지 않는다.

---

2. 시맨틱 태그를 사용하면 좋은 점을 설명해 주세요

 

시맨틱 태그란 포함된 내용의 의미를 정의하고 목적을 갖는 태그를 말합니다. 따라서 시맨틱 태그는 웹 콘텐츠에 명확하고 논리적인 구조를 제공하게 되고 사용하게 되면 다음과 같은 이점이 있습니다.

 

1. 검색엔진 SEO 최적화
   • 검색엔진은 시맨틱 태그로 구성된 콘텐츠를 페이지의 검색 순위에 영향을 미치는 중요한 키워드로 고려합니다.
2. 시각장애인을 위한 스크린리더가 페이지를 탐색할 때 도움을 준다.
   • 웹페이지의 구조를 쉽게 파악하고 정확한 정보 전달을 도와줍니다.
3. 코드의 가독성 향상 및 유지보수에 용이하다.
   • header, footer, nav, aside 등의 의미 있는 태그를 사용하면 가독성과 유지보수에 편리해집니다.
4. 개발자에게 태그안에 채워질 데이터의 유형을 알려줄 수 있다.
   • 명확한 데이터 유형을 바탕으로 데이터를 효율적으로 관리할 수 있습니다.