안녕하세요. 드디어 CSS를 배울 차례가 왔습니다. CSS에 대한 설명은 HTML 첫 시간에 했습니다!
CSS는 HTML로 표현한 구조에 디자인을 더해주는 역할을 합니다. 따라서 HTML과 연결해주는 작업이 필요합니다. 크게 세 가지 방법이 있습니다. 하나는 Inline 방법이고요. 두 번째는 style 태그를 이용하는 법, 마지막은 link 태그를 이용하는 방법입니다.
지금까지는 Inline 방법으로 표현하였습니다. style 속성을 사용해서 태그에 개별적으로 CSS를 적용해주었죠.
<div style="width: 80%; background: red; color: yellow">css 적용</div>이게 인라인 방식입니다. width(너비)는 80%로, 배경은 red 색으로, 글자색은 yellow로 하라는 거죠. CSS는 이름: 값 이렇게 한 쌍으로 이루어져 있습니다. 이들 간에는 ;(세미콜론)으로 구별해주고요.
하지만 프로그래머들은 이렇게 다른 종류의 언어가 하나로 모여있는 것을 싫어합니다. 분리해주는 것을 좋아하죠. 왜냐하면 분리할수록 관리하기가 편하거든요.
그래서 style 태그를 사용합니다. head에 넣어주면 됩니다.
<head>
<title>CSS 기본<title>
<style>
div {
width: 80%;
background: red;
color: yellow;
}
</style>
</head>문제는 코드를 분리한만큼 이 CSS가 어떤 태그에 적용되어야하는 지를 따로 적어주어야 합니다. 그래서 나온 게 선택자입니다.
4번째 줄에 div라고 나와있습니다. div 태그를 의미하는 것이죠. 저렇게 하면 모든 div 태그에 CSS가 적용됩니다. 하지만 일부 태그나 하나의 태그에만 적용하고 싶을 때는 다른 방법을 사용해야 합니다. 이 때 사용하는 게 class와 id 속성입니다.
<div>1</div>
<div class="a">2</div>
<div id="b" class="a">3</div>
<div class="a">4</div>
<div>5</div>id는 태그별로 고유 값을 가져야하고(중복 불가), class는 여러 개의 태그에 같은 class를 가져도 됩니다. CSS 주석은 // 또는 /* */ 입니다.
// CSS의 주석은 슬래쉬 두 번입니다.
/*
여러 줄 주석처리는
이렇게 합니다.
*/
.a {
background: red;
}
#b {
color: blue;
}특정 id를 가진 태그을 선택할 때는 #을 id 앞에 붙여주고, class를 선택할 때는 .(점)을 앞에 붙여줍니다. 특정 태그의 자식이나 후손을 선택할 수 있습니다. 자식은 어떤 태그 바로 아래에 있는 태그를 의미하고, 후손은 자신의 아래에 있는 태그 모두를 의미합니다.
<div>
<h1>
<p>
<span title="selector">
<em>selector</em>
</span>
<span class="zero" title="zero">zero</span>
<b>bold</b>
</p>
</div>div의 자식 태그는 h1, p이고 후손 태그는 h1, p, span, b, em입니다. p의 자식 태그는 span, b고 후손 태그는 em입니다. 이제 이해가 가시나요?
div > p {
width: 50%;
}
div span {
background: blue;
}자식 태그를 선택할 때는 >를 넣어줍니다. div의 자식인 p에 CSS를 적용하라는 의미죠. 후손 태그는 그냥 띄어쓰기 한 번을 해줍니다.
참고로 위와 같이 태그가 여러 개 섞여있으면 브라우저는 뒤에서부터 찾습니다. div > p이면 p부터 찾고, 그 후 부모 태그가 div인 것으로 범위를 좁혀 나갑니다. div span의 경우에는 span부터 찾고, 조상 태그에 div가 있는 것을 찾습니다.
특정한 속성을 가진 태그를 선택할 수도 있습니다. [] 안에 속성명만 적으면 해당 속성이 있는 모든 태그를 선택하고, 뒤에 속성값까지 적으면 속성값도 일치하는 태그를 선택합니다.
[title] {
color: green;
}
[title='selector'] {
color: blue;
}여러 선택자를 합쳐서 사용할 수도 있습니다. 그냥 이어서 쓰면 됩니다. 띄어쓰기를 하면 안 된다는 것을 주의하세요. 띄어쓰기는 후손 태그를 선택하는 거니까요. 아래의 예시에서는 title 속성이 있고, 클래스가 zero이고 span 태그인 것을 선택합니다.
span.zero[title] {
color: red;
}여러 태그를 동시에 선택해 css를 적용하려면 콤마로 구분하면 됩니다. 아래의 예시에서는 div 태그와 span 태그가 동시에 선택됩니다.
div, span {
color: black;
}마지막으로 분리를 좋아하는 프로그래머들은 아예 CSS 코드를 다른 파일로 분리하기에 이르렀습니다. 그것이 바로 link 태그입니다. 확장자가 css인 파일을 따로 만들고 link 태그의 href 안에 경로를 넣어 head 안에 넣어주면 됩니다.
basic.css
div {
width: 80%;
background: red;
color: white;
}basic.html
<head>
<title>CSS 기본</title>
<link rel="stylesheet" href="basic.css" />
</head>다음 시간에는 태그의 기본 박스 모델에 대해 알아보겠습니다.
익명