KitWorks Team Study

1. “좀 지난” + “최신” CSS
작성자 : 박준기

2. CSS3(CASCADING STYLE SHEETS 3)
CSS4 CANNOT EXIST
• CSS 2.1에서 확장된 개념으로 CSS 2.1 이후에 공개(published) 된 것들을 말한다.
• 선형적 구조의 버전 아래에서는 유지보수와 발전 속도가 느려짐.
• 표준 사양을 정의하는 집단(CSSWG)에서 CSS 2.1을 수립하는 과정 중 단일로 정의하는 버전 체계는 좋지 않다고 판단.
• CSS 2.1 이후로 CSS는 개별적으로 모듈들 관리하는 시스템 체계를 사용하기로 결정.
• CSS 2.1에 버전 3에 해당하는 모듈들을 일부 포함하게 되었을 뿐만 아니라 더 이상 버전을 갱신하지 않아도 충분한 모듈들이 있음.
CSS의 사양은 현재(Level 2.1)에 고정되며, 각 각의 모듈들은 언제든
추가되거나 독자적으로 발전할 수 있는 형태가 되었습니다.

3. CSS3 시리즈
CSS Level 1
• CSS1은 CSS의 바탕이 되는 사양으로 1996년에 그래픽 시스템을 차용해서 만들어졌습니다.
• Cascading Style Sheet 개념이 처음 도입된 사양으로 HTML 문서에 스타일을 첨부할 수 있는 간단한 스타일 시트 개념입니다.
• CSS1에서는 텍스트 서식, 폰트 설정, 마진 설정 같은 CSS가 가진 핵심 기능이 포함되어 있습니다.
*1996년은 W3C가 구축되어 있던 시기
CSS Level 2
• CSS2는 1998년에 정의된 권고안으로 요소의 위치(Position)를 공식으로 포함합니다.
• 또한 화면의 레이아웃을 조정할 수 있도록 미디어별 스타일 시트와 국제적인 접근성을 지원합니다.
• MS의 영향력이 많이 작용해 IE6 stricts 모드를 대부분 호환하게 정의되어 있기도 합니다.
• CSS2에는 몇 가지 문제와 이슈가 있어 2006년에 CSS2.1이라는 수정된 버전을 발표했으며 기존의 CSS2를 대체했습니다.
CSS Level 3
• CSS1, CSS2와 달리 모든 사양을 포함한 단일 형태의 CSS3는 정의되지 않았습니다.
• 앞서 이야기드린 것처럼 CSS 2.1 이후로 각 각의 모듈로 명세가 정의되기 때문입니다.
• 현재 W3C에서는 로드맵을 제공하고 있으며, CSS 각 모듈의 명세 정의 및 관련 사항은 사이트에서 확인이 가능합니다.
*로드맵 : https://www.w3.org/TR/css3-roadmap/
*명세 정의 및 관련 사항 : https://www.w3.org/Style/CSS/current-work
표준 사양을 정의하는데 이전과 달리 MS의 영향력은 줄어들었고 애플, 파이어폭스 같은 신흥 세력이 등장해새로운 커뮤니티
WHATWG를 이끌며 웹 표준을 주도하고 있습니다. HTML5 기준으로 W3C의 권고안은 큰 영향력을 행사하지 못하고 있으며, 실제로도
W3C 권고안은 구현이 되지 않은 채 쌓여가고 있습니다
NOW

4. 좀 지난 CSS(to 2021)
브라우저가 해당 CSS를 지원하는지 여부를 알 수 있습니다.
웹 브라우저가 CSS grid를 지원하면 div를 grid container로 만들고, 지원하지 않으면 div를 flex container로 만들겠다는 의미
@supports
flex

5. 좀 지난 CSS(to 2021)
웹 사이트의 스크롤을 정의할 수 있다.
웹 사이트의 스크롤을 정할 수 있음 scroll-snap-type을 부모에게, scroll-snap-align을 자식에게 전달.
단 2줄의 코트 추가로 구현 가능
@CSS Scroll Snap
*예제 : https://codepen.io/serranoarevalo/pen/xxdYBxZ

6. 좀 지난 CSS(to 2021)
적은 코드만으로 많은 태그를 선택할 수 있음
만약 태그가 header거나, nav거나, form일 경우, button이 선택되고, background-color가 변한다'는 의미
is Pseudo Selector

7. 좀 지난 CSS(to 2021)
flex container 사이에 간격 주고 싶을 때 사용
flex container 사이에 간격 주고 싶을 때 margin 대신 사용 가능 row-gap과 column-gap을 줄 수 있음.
Flex Box Gap
row column

8. 좀 지난 CSS(to 2021)
flex container 사이에 간격 주고 싶을 때 사용
flex container 사이에 간격 주고 싶을 때 margin 대신 사용 가능 row-gap과 column-gap을 줄 수 있음.
Flex Box Gap
row column

9. 좀 지난 CSS(to 2021)
사이즈가 아닌 비율로 정의
웹 페이지에서 영상 혹은 이미지를 보여줄 때 정해진 비율을 유지하고 싶을 때 사용.
aspect ratio(종횡비)

10. 좀 지난 CSS(to 2021)
사용자의 스크롤을 따라다니는 요소
정해진 height가 있는 container 안에 position: sticky를 가지고 있는 요소를 넣어주면 됨
position: sticky
*예제 : https://codepen.io/serranoarevalo/pen/YzVeMyJ

11. 2022 채신 CSS
Cascading Style Sheets working group
다양한 것에 반응 할 수 있는 진짜 반응형 웹에 반응 할 수 있는 언어들을 업데이트.

12. 2022 채신 CSS
@layer 를 사용하면 layer 단위로 우선순위를 지정해주는 것이 가능하다.
순서는 선언한 순서대로 가장 먼저 선언한 layer가 가장 낮은 우선순위, 그리고 뒤로 갈수록 높아진다. import한 CSS에다가 통째로 layer를 지정해주는 것도 가능.
Cascade Layers
MDN문서 : https://ko.m.wikipedia.org/wiki/%ED%8C%8C%EC%9D%BC:W3C%C2%AE_Icon.svg

13. 2022 채신 CSS
@container를 이용하면 컴포넌트 단위로 반응형을 구현하는 것이 가능하다.
하나의 컴포넌트만으로도 container query를 이용해서 반응형으로 구현할 수 있다.
Container Queries
MDN문서 : https://ko.m.wikipedia.org/wiki/%ED%8C%8C%EC%9D%BC:W3C%C2%AE_Icon.svg

14. 2022 채신 CSS
@scope를 사용하면 이제 선택자를 사용해서 간단하게 CSS에
scope를 적용할 수 있다.
media와 .content 사이에 있는 img 태그들에만 스타일을 지정할 수 있다.
Scope
sass에서 사용하던 Nesting이 이제 CSS로 넘어온다.
Nesting

15. 끝