코드잇 1주차 위클리 페이퍼
벌써 코드잇 풀스택 2기 1주차가 끝났다. 자세한 후기는 WIL에 적어보겠다.
매주 진행하는 위클리 페이퍼를 작성해볼 예정이다. 매주 꾸준히 포스팅 할 수 있는 좋은 기회이다.
열심히 해보자!
이번주 주제는 2가지 이다.
- CSS의 Cascading에 대해 설명해 주세요.
- 시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.
금주는 기본적인 풀스택 코스를 시작하기 전, 가장 기초적인 기반을 쌓을 수 있는 시간을 가졌다.
강사님께서 이 두가지는 면접에서 꼭 물어보는 것이라고 하셨다.
CSS의 Cascading이란?
Cascade의 사전적인 의미는 '폭포수'이다.
처음 폭포수를 들었을 땐 쉽게 와닿진 않았다.
물은 위에서 아래로 떨어지는 규칙이 있다. 따라서 CSS에서의 Cascading의 의미하는 바는 스타일이 적용되는 일련의 규칙 같은 것이다.
쉽게 말해, 스타일 적용시, '우선 순위'라고 볼 수 있겠다.
'우선 순위'라는 규칙이 필요한 이유는 무엇일까?
CSS를 사용하다보면 스타일이 겹치는 일이 빈번하기 때문에 일련의 규칙이 필요한 것이다.
그럼 바로 이 규칙을 살펴보자!
다음과 같은 두 가지 규칙으로 정해진다.
1. Importance(중요도) - CSS가 어디에 선언되었는가?
순서는 다음과 같다고 한다.
<head>의 <style> > <head>의 <style>내의 import > <link>로 연결된 CSS파일 > <link>로 연결된 CSS파일 내의 import > 브라우저의 기본 CSS
다 외울 필요는 없지만 CSS에서 스타일이 적용되는 우선순위의 로직을 체화시키는 과정은 필요해보인다.
의도적으로 중요도를 1순위로 올리는 것은 !important를 사용하면 되는데, 남용하면 안좋다고 한다.
2. Specificity(명시도) - 대상을 얼마나 명확하게 지정하였는가?
인라인 > id > class > 태그
id 와 class 가 cascading 관점에서 차이가 있다느 것도 처음 알았다.
3. Order(코드 순서) - 늦게 선언한 것이 우선 적용
그리고, 부모 상속이 있다.
바깥에 있는 태그의 스타일을 자식도 따라가는 것이라고 한다.
+) 어떠한 순서 점수를 계산하는 알고리즘이 있는데 이해하는 데 실패했다.. 이런 것도 있다 정도로 알아주자.
시맨틱 태그(Semantic Tag)를 사용하면 좋은 점
시맨틱 태그란? CSS 태그 중, 측정한 목적을 갖는 태그.
예를 들면, <header>, <nav>, <article>, <aside>, <details> 등이 있다.
자세한 건 궁금할 때 찾아보도록 하자.
그래서 시맨틱 태그 사용하면 뭐가 좋은데??
이해하기 쉬운 것부터 나열해보자.
1. SEO 향상
컴퓨터 친화적인 측면. SEO가 좋아지면 나의 글이 컴퓨터 크롤링 하는 봇이 내 글을 더 잘 크롤링 할 수 있게되고, 결론적으로 내 글이 상위 노출이 되기 쉽게 된다. 나는 에드센스 블로그를 운영하는 데, 이 부분이 매우 흥미롭고 와닿았던 부분이이었다.
2. 가독성 향상
인간 친화적인 측면. 너무 당연한 건데, 당연히 인간이 읽기, 보기 편하다는 것이다.
3. 접근성 향상
사람들이 내 글을 볼때, 특정 콘텐츠가 담긴 태그는 사람들이 더 접근하기가 쉽다는 것이다. 많이 사용해봐야 알 것 같다.
예시로, 목차 같은 것이 있다면, 사람들이 나의 글을 볼때 바로바로 원하는 부분에 접근을 하는 것에 비유할 수 있겠다.
마치며..
처음 해보면서 느낀점 두가지
1. 솔직히 난 궁금한 점이 있을때마다 Chat GPT를 사용했었다. 습관적으로 Chat GPT를 사용하다보니, 구글링을 제대로 해보는 실력을 기를 기회가 없었다. 구글링을 직접하며 이해하는 능력은 개발자에게 앞으로도 필수적인 능력이라고 생각한다. Chat GPT가 더 발전할 수 록 더더욱 그렇다. 차별점이 될 것이다.
2. 한국어 검색시, 다양한 테크 블로그 글이 나오는데, 이 정도면 카피한 거 아니야? 생각이 들 정도로 글의 내용이 비슷했다.
역시 영어로 검색할때, 더 정확한 정보를 얻을 수 있는 것 같다.
'소프트웨어 > 코드잇 스프린트' 카테고리의 다른 글
| [✏️week5 위클리 페이퍼] 렉시컬 스코프(Lexical Scope)의 개념, 특성 (0) | 2024.08.26 |
|---|---|
| [✏️week3 위클리 페이퍼] var, let, const / this / Lexical Scope 개념 총 정리 (0) | 2024.08.12 |
| [✏️week2 위클리 페이퍼] 브라우저 작동 원리 (0) | 2024.08.12 |
