1. CSS란?
기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해서 만들어진 것이 스타일시트이고 스타일시트의 표준안이 바로 CSS입니다. 간단히 스타일시트라고도 합니다.
CSS(Cascading Style Sheet)는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소입니다.
HTML이 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면 CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당합니다.
CSS는 웹 문서의 내용과 상관없이 디자인만 바꾸거나 디자인은 그대로 두고 웹 문서의 내용 변경이 용이합니다.
또한 다양한 기기에 맞게 탄력적으로 바뀌는 콘텐츠(반응형 디자인)이고 동일한 문서 구조를 가지고 있는 서로 다른 CSS 테만 적용이 가능합니다.
이러한 이유 때문에 CSS를 사용해야만 한다고 할 수 있습니다.
이러한 CSS의 특징 덕분에 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열 위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지, 보수도 간편하게 할 수 있습니다.
2. CSS의 기본 문법
CSS는 선택자와 선언부로 구성됩니다. 선택자는 스타일을 지정할 HTML요소(태그, 아이디)를 가리킵니다.
선언부에는 CSS 속성 이름과 값이 포함됩니다.
속성이 여러 개일 경우, 한 줄로 나열해도 상관없지만 여러 줄에 걸쳐 작성하는 것이 좋습니다.
3. CSS 적용 방법
HTML 문서에 CSS를 적용하는 방법에는 총 3가지 방법이 있습니다.
(1) 내부 스타일시트
html 파일에 스타일을 기술하는 방법으로 <head></head> 태그 사이에 <style></style>태그 부분에 작성합니다.
html과 css가 한 파일에 있기 때문에 작업이 쉽고 간편하지만 css의 재활용이 안되는 문제가 있어서 특별한 경우가 아니면 외부 스타일시트가 권장됩니다.
<head>
<style>
body {
background-color: red;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
...
</body>(2) 외부 스타일시트
css를 작성하는 가장 기본적인 방법입니다.
별도의 파일에서 css문서를 작성하고 해당 css를 필요로 하는 html문서에서 불러와 사용하는 형식입니다.
이때 css는 동일한 서버에 있어도 되며 url을 통하여 다른 서버의 css를 불러오는 것도 가능합니다.
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>(3) 인라인 스타일
html태그에 필요한 디자인 속성을 직접 작성하는 형식입니다.
그때 그때 필요한 디자인을 바로 적용할 수 있다는 편리함이 있으나 일관된 디자인 체계를 유지하는 데는 방해가 되기 때문에 꼭 필요한 경우가 아니라면 사용하지 않도록 합니다.
<h1 style="color:blue; margin-left:30px;">This is a heading</h1>4. 캐스케이딩과 우선순위
(1) 캐스케이딩의 의미
css에서 Cascading은 사전적 의미로 '폭포처럼 떨어져 내리는'과 같은 의미를 가지고 있습니다.
css에서는 디자인 속성이 html문서의 구조, 즉, DOM(Document Object Model) Tree 구조에서 상위 요소에서 정의한 디자인 속성이 하위 요소로 전달되는(상속 개념) 의미에서 유래되었다고 할 수 있습니다.
<!-- body 태그 안에 있는 모든 태그 요소들은 빨간색 글자로 표시됨 -->
<body style="font-color:red">
<h1>Hello</h1>
</body>(2) 우선 순위
동일한 디자인 속성이 외부 스타일시트, 내부 스타일시트, 인라인 스타일시트에 적용되어있는 경우 우선 순위는 가장 나중에 정의되는 스타일에 있습니다.
따라서 인라인 스타일시트가 가장 높은 우선 순위로 적용되고 외부 스타일시트와 내부 스타일시트는 문서상 정의된 순서에 따라 우선순위가 결정되는 형식입니다.
웹브라우저 자체도 html 구성요소에 대한 내부적인 css를 가지고 있다고 볼 수 있습니다.
브라우저에 따라서 사용자 정의 css를 사용할 수 있는 것도 그 때문입니다.
일반적인 우선순위(낮은순 → 높은순)는 다음과 같습니다.
브라우저 디자인 정의 → 외부 스타일시트 → 내부 스타일시트 → 인라인 스타일시트
5. CSS의 선택자
css 선택자는 스타일을 적용할 대상으로 html문서의 태그, id, class를 사용합니다.
(1) *
별표는 페이지에 있는 전체 요소를 대상으로 합니다. 많은 개발자가 margin과 padding값을 0으로 세팅하려고 이 선택자를 사용합니다. 간단한 테스트 용도로서는 괞찮습니다. 그러나, 이 별표를 실전에서는 사용하지 않는게 더 좋습니다. 왜냐하면 브라우저에 과부하가 걸리고, 사용하기에 적절하지 않기 때문입니다.
* {
margin: 0;
padding: 0;
}(2) #x
선택자 앞에 해시(#) 기호를 붙여 id를 대상으로 삼습니다. 가장 흔하고 쉽게 사용되지만 id 선택자를 사용할 때는 조심스러워야 합니다. 왜냐하면 id 선택자는 유연성이 없고 재활용할 수 없기 때문입니다. 가능한 처음에 태그 명이나 새로운 html요소 중 하나, 아니면 가상 클래스라도 적는 것이 좋습니다.
#container {
width: 960px;
margin: auto;
}#container * {
border: 1px solid black;
}이 코드는 #container div의 자식 요소 전체를 대상으로 합니다.
(3) .x
선택자 앞에 점(.)을 붙여 class를 대상으로 삼는 것입니다.
id와 class의 차이점은 class는 id와 달리 여러 개의 요소를 대상으로 정할 수 있다는 것입니다.
스타일을 한 그룹의 요소에 적용할 때는 class를 사용하는 것이 좋습니다.
찾을 가망성이 거의 없는 요소에 id를 사용하고, 그 유일한 요소에만 스타일을 적용하는 것이 좋습니다.
.error {
color: red;
}(4) x y
다음으로 가장 많이 언급되는 선택자는 descendant입니다.
선택자를 이용해 더 구체적으로 작업해야 할 때, 이 선택자를 사용합니다.
예를 들어, 전체 앵커 태그를 대상으로 하기보다는 순서를 매기지 않는 목록(unordered list)에 있는 앵커만 대상으로 한다면, 하위 선택자를 사용하면 더 구체적으로 선택할 수 있게 되는 것입니다.
li a {
text-decoration: none;
}(5) x
만약 id 또는 class가 아닌 type에 따라서 한 페이지에 있는 모든 요소를 대상으로 삼고 싶다면, 간단히 type 선택자를 이용하면 됩니다.
순서가 정해지지 않은 목록 전부를 대상으로 해야한다면 ul{}을 쓰면 됩니다.
a { color: red; }
ul { margin-left: 0; }(6) x:visited 와 x:link
클릭하기 전 상태의 앵커 태그 전체를 대상으로 하려고 :link 가상 클래스를 사용하는 것입니다.
:visited 가상 클래스로 하기도 합니다.
이는 클릭했었거나 방문했던 페이지에 있는 앵커 태그에만 특정한 스타일을 적용할 수 있습니다.
a:link { color: red; }
a:visted { color: purple; }(7) x + y
인접 선택자로 부르는 선택자 입니다.
앞의 요소 바로 뒤에 있는 요소만 선택합니다.
아래 코드에서 각 ul뒤에 오는 첫 번째 단락의 텍스트만 빨간색이 됩니다.
ul + p {
color: red;
}(8) x > y
일반 x y 와 x > y 의 차이점은 후자가 직계 자식만을 선택한다는 것입니다.
예를 들면,
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>#container > ul선택자는 id가 container인 div 직계 자손인 ul만 대상으로 삼습니다.
예를 들어 첫 번째 li의 자식인 ul은 대상이 되지 않습니다.
이러한 이유로 자식 선택자를 이용하여 성능을 향상시킬 수 있습니다. 사실은, 자바스크립트를 기반으로 하는 css 선택자 엔진으로 작업할 때 추천합니다.
(9) x:not(선택자)
negation가상 클래스는 특히 유용합니다.
예를 들어 제가 모든 div를 선택하고 싶은 그 중에서 id가 container인 것만 빼고 싶다고 한다면 아래 코드가 그 작업을 완벽히 수행합니다.
div:not(#container) {
color: blue;
}또는, 제가 단락 태그만 제외하고 요소 전체를 선택하고 싶다고 한다면 아래와 같이 하면 됩니다.
하지만 이 방법은 권장하지 않는 방법입니다.
*:not(p) {
color: green;
}(10) x::가상요소
첫 번째 주이나 첫 글자와 같이 요소 일부분에 스타일을 적용하는데 가상요소'::'를 사용할 수 있습니다.
효과를 보려면 이 요소를 반드시 블록 레벨 요소에 적용해야 합니다.
p::first-line {
font-weight: bold;
font-size: 1.2em;
}::first-line 가상 요소는 요소의 첫 번째 줄에만 스타일을 적용합니다.
(11) x:nth-child(숫자)
nth-child는 변숫값을 정수로 받습니다.
그러나 0부터 시작하지는 않습니다.
두 번째 항목을 대상으로 하고 싶다면 li:nth-child(2)라고 작성하면 됩니다.
자식 요소의 변수 집합을 선택하는 데에도 이 방식을 활용할 수 있습니다. 가령, 항목의 4번째마다 선택하고 싶다면 li:nth-child(4n)로 작성하면 됩니다.
