지난 글에서 웹 페이지의 골격을 결정하는 HTML에 대해 다뤘다면, 오늘은 웹 페이지를 이쁘게 꾸며주는 CSS에 대해 다뤄보도록 하겠다.
CSS는 웹 페이지를 꾸며주는 언어다. 사실 프로그래밍 언어라 하기도 애매하다. HTML과 CSS는 어떤 논리나 기능이 없이 문서를 보여주는 역할만 하기 때문에, 프로그래밍 언어로 잘 취급 받지 않는다.
그럼에도 나에겐 python보다 CSS가 더 어려웠다 ㅋㅋㅋ. 그리고 다양한 프로그래밍 언어가 있지만, 웹 개발을 한다면 HTML 과 CSS 는 반드시 사용해야 한다는 점에서 무시할 수 없다고 생각한다.
CSS 문법
CSS를 사용하는 문법은 크게 ‘선택자’와 ‘선언’으로 이루어진다.
앞의 h1이 선택자다. 선택자는 스타일링을 적용할 특정 HTML 요소를 선택하는 것이다. 그리고 중괄호 안에 있는 부분이 선언이다. 선언은 해당 요소를 어떻게 꾸밀 것인지를 정의한다.
선언은 속성(property)과 값(value)으로 또 나눠진다. 속성은 어떤 스타일링을 적용할 것인지를 정의하고(위에서 color), 값은 말 그대로 속성이 적용될 특정한 값을 말한다.
CSS 적용 방법
html 문서에서 CSS를 적용하는 방법은 3가지가 있다.
1. 인라인(inline) 스타일
인라인 스타일은 직접 html 태그 안에 CSS를 적용하는 방법이다. 가장 직관적인 적용 방법이기도 하다.
문제는 이렇게 태그 하나 하나에 적용하게 되면 너무 번거롭고, 코드도 지저분해진다는 것이다. 그래서 현업에서는 특수한 경우가 아니면 인라인 스타일은 사용하지 않는다고 한다.
2. 내부(internal) 스타일
내부 스타일은 html의 <head>태그 사이에 style 태그를 사용해서 CSS를 적용하는 방법이다.
규모가 작은 경우에 사용한다. 이를테면 교육들을 때 말이다.
3. 외부(external) 스타일
외부 스타일은 별도의 CSS파일을 만든 후에, head태그에 link 태그를 써서 불러오는 방법이다. 규모가 커지게 되면 이렇게 별도의 파일을 만들어서 관리해야 하는 것 같다.
CSS 선택자
자 그러면, 이제 CSS가 적용될 HTML요소를 선택하는 선택자의 종류에 대해서 알아보겠다.
기본 선택자
[1] 전체( * ) 선택자
html에서 모든 요소를 선택하는 선택자다.
[2] 요소(tag) 선택자
태그 이름을 사용하여 해당하는 모든 태그에 CSS를 적용하는 선택자다.
[3] 클래스( . ) 선택자
주어진 클래스의 모든 요소에 CSS를 적용하는 선택자다.
[4] 아이디( # ) 선택자
특정 아이디를 가진 하나의 요소에 적용되는 선택자다.
결합자 (Combinators)
선택자를 결합해서 사용할 수도 있다.
[1] 자손 결합자
자손 결합자는, 그냥 공백을 두고 선택자를 써주면 된다. 한 요소의 모든 자손 요소(위에서의 p)에 대해 CSS가 적용되도록 한다.
위 코드에서는 위쪽의 p태그와 아래에 있는 p태그 모두 빨강색 글씨가 적용된다.
[2] 자식 결합자
한편, 자식 결합자는 ‘>’를 쓰는데, 이때는 직계 자식만 선택된다. 밑에 p태그는 중간에 section태그 아래에 있기 때문에 빨간 색이 적용이 안된다.
명시도
하나의 태그에 대해 여러 개의 선택자가 동시에 선택을 하고 있다면, 어떤 선택자가 적용이 될까? 이때는 명시도의 우선 순위를 따르게 된다.
1) !important : 속성 값에 넣는 건데, 이걸 넣으면 그냥 1빠다.
2) Inline 스타일
3) 선택자 : id 선택자 > class 선택자 > 요소 선택자
4) 소스 코드 선언 순서 (가중치 같다면, 마지막일수록 우선됨)
하지만, 이렇게 명시도 우선 순위가 있어도, 웬만하면 ‘class’만 사용한다고 한다. 하나 하나 가중치 계산해서 쓰는 게, 유지보수가 어렵기 때문이다.
No Responses