왜 css인가?

웹 문서에 텍스트만 있다면 어떤 느낌일 것 같은가? 물론 기존 html로 기초적인 스타일링은 할 수 있지만 지금은 2018년, 4차 산업 혁명 시대 아니겠는가? css는 우리가 보는 view라는 웹 문서를 꾸미는 언어라고 보면 된다.
css의 가장 큰 장점은 웹 문서를 건드리지 않고 단순히 디자인만 바꿀 수 있다.라는 정말 큰 장점이 있다.

또한 웹 문서는 브라우저 기반이기 때문에 브라우저에 따라, 사용하는 기종에 따라 그 모습이 바뀐다.

• 스타일 형식은?

ex)
p{text-align: center;}

p태그의 글자를 가운데로 옮기는 css 문법이다. 여기서 p는 selector(선택자), text-align은 Property(스타일 속성) center는 Property Value(속성 값) 이라고 한다.

• 주석

주석은 참 중요하지 않아보이지만 굉장히 중요하다. 물론 주석없이 바로바로 해석되는 게 정말 가독성이 좋은 코드라고 할 수 있지만, 모두가 그럴 순 없기에 이 코드가 어떻게 사용되었다.라는 걸 설명해 주는 것이 좋다. css의 주석은 / / 사이에 텍스트를 작성한다.

• 내부 스타일과 외부 스타일

css는 html문서 안에서 작성할 수도 있다. 이를 내부 스타일 시트라고 하는데 보통 head태그 안에 title밑, style ~ /style 태그 사이에 작성한다. 반면 외부 스타일 시트는 css 파일을 따로 작성하여 html 문서에서 link태그를 사용하여 연결한다.

<link href="파일 경로" rel="stylesheet" type="text/css">

보통 외부에 css 파일을 만들어 사용하는 것이 좋은데 필요한 경우에 따라 만들어 놓은 css를 가져다 사용할 수 있기 때문이다.

또한 html 태그안에 인라인 스타일로 작성할 수도 있다.

<p style="color:blue">

이런식으로 말이다.

Selector

스타일 속성을 작용하는 요소가 바로 선택자이다. 태그 하나에 지정할 수도, 여러개에 지정할 수도 있다.

• 전체 선택자

모든 요소에 적용할 때 사용하는 것이 전체 선택자 이다. 전체 선택자는 *를 사용한다.

• 태그 선택자

해당 요소에 스타일을 적용할 때 사용한다. 해당 태그가 사용된 모든 요소에 적용된다.

• 클래스 선택자

해당 태그에 클래스를 지정하여 그 클래스가 지정된 요소에만 스타일이 적용되게 할 때 사용한다. 사용할 때에는 ‘.’을 사용한다. 특히 클래스는 중복이 가능하기 때문에 태그를 적요하고 싶은 태그만 골라 클래스를 적용하여 스타일을 적용할 수 있다. 다른 경우도 있다. 예를 들어 h2.bluetext라고 사용한다면 h2에 있는 bluetext 클래스에만 스타일이 적용된다. 참고로 부분적으로 적용하고 싶을 때에는 span 태그를 사용하면 된다.

• id 선택자

클래스와 마찬가지로 특정 부분에 스타일을 적용하고 싶을 때 사용하지만, id는 중복이 허용되지 않는다. 또 다른점은 id는 #을 사용한다는 것이다.

• 그룹 선택자

따로따로 선언할 필요 없이 같은 스타일을 적용할 때에는 쉼표로 구분해주면 된다.

Cascading

캐스캐이딩의 의미는 선택자에 적용된 많은 스타일 중 어떤 스타일을 나타낼지를 결정한다는 의미이다. 스타일 간의 충돌을 막기 위해 무엇이 우선시 되어야 할 지 정하는 것이다. 그를 위해선

1. 스타일 우선순위
2. 스타일 상속

이 두가지 원칙에 대해서 알아야 한다.

• 스타일 우선순위란?

캐스캐이딩에 있어서 정말 중요한 개념이라고 할 수 있다. ‘어떤 스타일을 먼저 적용할까’를 결정하기 때문이다.
첫 번째로 중요도를 살펴봐야 한다.

• 중요도

1. 사용자 스타일 시트가 최우선이다.
2. !important (다른 어떤 것보다 최우선 되는 스타일)
3. 기본 브라우저 스타일 시트

• 명시도

명시도는 스타일의 적용 범위에 따라 우선순위를 정함을 말한다. 가장 중요한 것부터 말하자면

1. 인라인 스타일
2. id 스타일
3. 클래스 스타일
4. 태그 스타일

의 순서로 중요도가 적용된다.

• 소스 순서

앞에 설명했던 중요도와 명시도가 같다면 먼저 온 스타일을 나중에 온 스타일이 겹친다. 위 예제에서 !important가 없다면 글자는 파란색이 될 것이다.

상속

스타일은 상속된다. 웹 문서에 사용되는 태그들은 서로 포함관계에 있다. 그 중에서는 부모요소 자식요소의 관계도 포함되어 있다.
자식 요소에 따로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성이 전달된다. 이를 스타일 상속이라고 한다.

부모 요소의 배경 이미지, 배경 색 등은 상속되지 않는다. 즉 부모 요소의 모든 스타일 요소가 상속되는 것은 아니다.

CSS Module

여러가지 css 규약이나 상태등을 볼 수 있다.

• prefix

css 모듈에는 규약이 많고 아직 미완성 상태이기 떄문에 모든 브라우저에서 똑같이 적용되지 않는 경우도 있다. 또한 버전에 따라서도 지원이 되고 안되고의 차이가 있기 때문에 브라우저 접두사를 붙여서 사용한다. 이를 prefix라고 한다.

-webkit- (사파리, 크롬), -moz-(모질라, 파이어폭스), -o-(오페라), -ms-(IE)

-webkit-column-count:3;

앞에 접두사를 붙이고 속성을 사용하면 된다.

근데 귀찮다.(매우매우) 그래서 유용한 사이트를 소개하자면

에서 Only 2kb gzipped에서 js 파일을 받아 폴더에 넣어 script태그로 연결해주면 된다.