CSS(Cascading Style Sheets)란? 직역하면 '*캐스케이딩 스타일 시트' 또는 '종속형 시트'라고한다. https://en.wikipedia.org/wiki/List_of_stylesheet_languages- 마크업언어가 실제 표시되는 방법을 기술하는 스타일언어(#Style Sheet Language)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용 할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의 할 때의 자유도가 높다.
- Style Sheets: 홈페이지를 만드는 데 사용될 여러 가지 스타일들을 미리 정의해놓은 후, 원하는 곳에 이 스타일을 지정하면 손쉽게 홈페이지의 일관성을 유지할 수 있게해두었다. 즉, 스타일을 분리해서 관리하기 위해 만들어진 언어가 바로 CSS이다. 정리 : HTML문서 내에 정보콘텐츠와 스타일 가량 타이포그래피(Typography), 레이아웃, 이미지 등의 이런 시각적인 요소를 모두 포함한 '스타일언어'이다. (즉, HTML마크업 한 것을 예쁘게 꾸미게 도와준다) HTML요소가 표시되는 방식을 설명
*캐스케이딩란? '위에서 아래로 흐르는', '상속 또는 종속하는'의 의미를 갖고있다. 따라서 Cascading은 선택자의 적용된 많은 스타일 중에 어떤 스타일로 브라우저에 표현할지 결정해주는 원리를 의미하게 된다.
태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라 한다.
이는 일반적으로데이터를 기술하는 정도로만 사용되기에 프로그래밍 언어와는 구별된다.
더 알아보기
❗ 왜 Document와 Style을 분리해서 관리해야 할까?
우리가 CSS없이 HTML만으로 제작한다면 ?
HTML의 목적자체는 웹으로 정보콘텐츠를 공유하기 위한 것인데 그럼, 어떠한 HTML의 경우는 그 정보가 엄~청나게 많이 담겨있을텐데 거기에 일일이 하나하나 모든 요소의 스타일까지 적용해준다면 그럼, 문서가 뒤죽박죽 지저분해질것이다.
이렇게 완성된 문서의 경우는 이후 스타일을 변경하거나, 유지보수를 할 때 굉장히 어려워 질 수 있다. 따라서 이런 문제점을 해결하기 위하여 국제컨소시엄(W3C, World Wide Consortium)에서 웹 표준화를 추친하는 곳이다.
(ex. W3C에서 여러 교육기관, 마이크로소프트사 등의 기업들이 모여 표준화를 추진한다. 따라서 W3C에서 "HTML5에는 <...>, <...>가있어"라고 정의를 하면 세상의 현존하는 Chrome, Firefox, Safari, Edge 등의 모든 브라우저들이 표준에 맞게 브라우저를 구현해야된다. 이에 우리가 HTML에 정의된 태그를 사용해서 웹페이지를 만들면 모든 브라우저상에서 잘 표현될 것이라고 믿고 사용하는 것이다. 다만 지원되는지 안되는지 '브라우저 호환성'(Browser compatibility) 에서 보면된다. )
바로 이곳에서 만든 Style Seets전용 언어가 CSS이다.
W3C가 관리하는 대표적인 웹 표준
https://ko.wikipedia.org/wiki/W3C
CSS라는 스타일을 별도로 관리하는 언어를 만들어서 거기서 스타일을 관리를 하면 웹사이트의 스타일을 더 일관적으로 유지할 수 있고, 유지보수또한 쉬워진다. 이래서 CSS는 이러한 목적으로 탄생되었다!
❗ CSS Syntax 알아보기(선택자, 선언부(선언블록) 크게 2가지로 보자)
우선, CSS 스타일언어의정확한 명칭에 대해 알기!
1. 선택자 (selector) : 내가 HTML을 꾸미려면 '지목'을 해야된다.
CSS Selector :
문서 트리에서 CSS를 적용할 엘리먼트를 패턴 표준 (현재 가장 최신버전은 2018년도에 발표한 CSS Level4이다.) https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors
선택자 종류에 대해 알아보자! 크게 (1)엘리먼트 선택자(Elemental selectors),(2)속성 선택자(Attribute selectors) 2개가 있다.
html에서 컴포넌트 클래스 이름을 작성할 때 너무너무 복잡하고, 유지보수 하기가 힘들기 때문에 어떻게하면 클래스를 작성할때 잘 작성할 수 있을지에 대해서 이름을 작성하는 방법에 대해서 정의한 규칙이다.
이런 뱀 말고도 다양한 방법들이 존재하는데, 요즘 많은 사람들이 뱀을 이용하고있고 사용하고 있기때문에 뱀 규칙에 따라 한 번 만들어 보자! 나중에 프로젝트를 조금더 모듈화해서 만들고, 포스트 css같은 아이들을 이용하게 되면 이런 뱀은 필요가 없다.
하지만 이런 모듈화를 이용하지않고, 간단하게 프로젝트를 만든다면, 이런 뱀을 이용해서 만들면 조금 더 손쉽게 이름을 만들 수가 있는데 자, 본론으로 뱀은 무엇인가? 바로 B는 block E는 element M은 modifier 즉, block과 element와 modifier로 나누어서 이름을 작성하는것을 말한다.
만약 카드를 만든다고 한다면 block은 카드 자체가된다. (즉, 카드 하나가 우리가 만들고자 하는 컴포넌트이다.) 여기서 안에 들어있는 이미지나 image, title, button들은 다 element이다. (즉, 한가지, 더이상 분리될 수 없는 엘리멘트 자체인 것이다.) ex . block_ _element- -modifier
이제 어떻게 이름을 작성하는지 한 번 보자. card는 블럭 자체이므로 card 하나라고 적고, img, title은 블럭안에있는 엘레멘트이기 때문에 _ _(언더스코어) 2개를 이용해서 이미지 카드 안에있는 이미지 카드 안에있는 타이블, 카드안에있는 디스크립션 , 버튼 또한 이렇게 각각정의해서 사용할 수가있다.
그리고 여기서! 버튼이 과연 블럭안에 속해있는 컴포넌트인지 아닌지를 조금 고민할 필요가 있다. 만약 버튼이 카드 안에서 뿐만 아니라 다른 컴포넌트에도 공통적으로 쓰인다면 이 버튼은 카드안에 속해있을 필요가 없다. 그래서 card _ _라고 정의하는 것 보다 버튼은 버튼자체로 컴포넌트 자체이므로 블럭으로 정해서
ex. (왼) .button , (오) .button--blue
라고 작성하는 것이 좋다.
그럼 만약 card가 여러가지가 묶여있는 즉, cards라는 컨테이너 안에 들어 있다면 카드를 다시
.cards
.cards _ _ card
.cards _ _ card _ _ title
.cards _ _ card _ _ description
이런식으로 정해야 될까? 라고 좀 생각해 볼 필요가 있을 것 같다. 많은 사람들이 다른 방식으로 또 이렇게 토론 할 수도 있겠지만 아니라고 말해주고싶다.
(주관적인 생각) 이렇게 하이라키(hierarchy)대로 이름을 일일이 다 작성하는 것은 뱀은 아니다. 뱀은 컴포넌트 단위로, 블럭 레벨로 이렇게 이름을 작성하는 것이기 때문에 카드는 카드 자체로 하나의 컴포넌트이다. cards는 이런 카드를 묶어놓은 컨테이너뿐이다. 그래서
.cards
.card
.card _ _ title
.card _ _ description
이와같이 작성하는게 더 올바를 것 같다. 그래서 만든 이 card라는 블럭은 cards라는 컨테이너 안에 들어갈 수도있고, 또 다른 부분에서도 쉽게 쓰여질 수 있기 때문이다. 그래서 이런식으로 작성하는것이 조금 더 코드 양을 줄일 수도 있고, 앞에서 본 방식대로 작성하게되면 타이핑해야하는게 너무 많다. 그래서 깔끔하게 방식대로 작성하는걸 추천한다.
