사실 7편보다 이걸 먼저 했어야 순서상 효율적이지 않았을까 싶다. 그래도 뭐 선택자 개념 배운 다음에 다시 속성 활용해서 실습하면 된다. 1편부터 쭉 봐왔다면 알겠지만 HTML은 내용을 담는 통이고, CSS는 그 내용이 보여지는 모습을 꾸민다. HTML에 태그를 이용해 각각 요소들을 만들어 구성을 짜면, CSS는 각각의 요소들을 어떤 방식으로 표시하라고 브라우저에게 명령한다.
비유적으로 표현하면, HTML은 레고다. 각각의 태그들은 새하얀 레고블럭이다. 그리고 레고블럭들을 이용해 원하는 모양을 만든다. CSS는 그 새하얀 레고블럭들을 칠하는 것이다. 정확히 말해 HTML과 CSS는 이러한 행동을 하라는 지시를 적은 명세서이다. 실제로 레고를 쌓고 블럭을 칠하는 건 브라우저다. 그럼 CSS에는 브라우저가 어떤 블럭을 어떤 색으로 칠할지 명확히 지정하는 내용이 들어있어야 한다.
이 '어떤 블럭'을 지정해주는 것이 CSS 선택자이다. 우선 CSS의 기본 구조를 보자. 일단 선택자를 보기 전에 CSS를 적용할 HTML 코드의 예시를 살펴보겠다. 앞에서 안 배웠는데 <ul>은 unordered list, 리스트를 생성하는 태그다. 집합적 개념의 리스트고, 각각의 항목은 <li> 태그를 통해 완성한다. 아래 표의 태그를 에디터에서 적고 브라우저로 열면 그 아래 그림처럼 나온다.
<ul> <li class="class1" id="leader1>a</li> <li class="class1">b</li> <li class="class1">c</li> <li class="class2" id="leader2">d</li> <li class="class2">e</li> <li class="class2">f</li> </ul> |
a~f 앞에 점이 찍힌 건 리스트의 기본값이다. <ul> 태그 안의 <li> 요소들은 기본적으로 저런 점이 찍혀서 나온다. 물론 나중에 CSS로 수정할 수 있다. <li>의 오프닝 태그와 클로징 태그 안에 있는 a~b의 컨텐츠들만 화면에 표시된다. 그리고 보이진 않지만 모두 class가 지정되어있고, a와 d는 별도의 아이디도 지정되어 있다. 그럼 지금부터 실습을 통해 기본 CSS 선택자를 직접 지정해보겠다.
<!DOCTYPE html> <html> <head> <title>Document</title> <style></style> </head> <body> <ul> <li class="class1" id="leader1>a</li> <li class="class1">b</li> <li class="class1">c</li> <li class="class2" id="leader2">d</li> <li class="class2">e</li> <li class="class2">f</li> </ul> </body> </html> |
먼저 에디터를 연다. 빈 파일을 새로 만들고 html 형식으로 저장한다. 그리고 위 표의 코드를 집어넣는다. 아직 설명 안 한 부분이 있는데 그냥 이대로 복사 붙여넣기 한다. 우선 지금은 CSS 선택자를 배우는 단계이다. 부연 설명을 하면, <html> 태그 안에 <head>와 <body> 태그가 있다. <head> 태그 안에는 <title>과 <style> 태그가 있고 <body> 태그 안에는 맨 처음 표에 있는 <ul> 태그와 그 안의 <li> 태그가 있는 구조다. 아래 그림을 보면 이해가 쉬울 것이다.
에디터에 위의 그림과 같이 적은 걸 확인했으면 이제 본격적으로 CSS 선택자에 무엇이 있는지를 알아보겠다. 다양한 선택자가 있지만 우선 가장 기본적이고 필수적인, 다른 심화 선택자의 기본이 되는 것들을 알아보겠다.
1. 태그 선택자
li { font-size: 30px; } |
가장 기본적인 선택자라 할 수 있다. 태그를 직접 선택하는 것. 우선 CSS 선택자의 기본 구조는 CSS의 구조는 기본적으로 아래 모양과 같다.
선택자 { 속성: 값; } |
선택자를 입력하고 {를 이용해 괄호를 연다. 그리고 속성 이름을 입력하고 콜론( : ) 다음에 값을 입력한다. 세미콜론( ; )으로 속성에 대한 값이 여기까지임을 알리고 괄호를 닫는다. 이건 C 언어에서 파생된 방식인데, 처음 하는 경우 세미콜론 입력하는 걸 종종 까먹으므로 많은 코딩을 통해 습관을 들이도록 한다. 물론 한 번에 여러 속성과 값을 입력할 수도 있다. 이 경우 코드 리딩을 쉽게 하기 위해 엔터를 활용한다.
선택자 { 속성: 값; 속성: 값; } |
다시 본론으로 돌아가면, 가장 기본적으로 태그 이름 그 자체가 선택자가 된다. 위의 양식에서 선택자 필드에 태그 이름을 입력하고 괄호 열고 속성과 값을 입력하고 괄호를 닫으면 된다.
2. Class 선택자
.class1 { color: red; } .class2 { color: blue; } |
굉장히 많이 사용되는 클래스 선택자다. 그냥 클래스 이름 앞에 마침표를 붙이면 된다. 맨 위의 html 코드를 보면 class="class1", class="class2"이라고 지정되어 있다. 클래스의 이름인 class1과 class2의 앞에 마침표( . )를 붙이면 클래스 선택자다. .class1, .class2의 모양이다. 내부에 있는 color 속성은 글자 색깔을 바꿔준다. 뒤에 값에는 hex 코드나 rgb로 입력할 수도 있지만 어떤 색깔은 문자로 지정되어 있기도 하다. 우선 쉽게 red와 blue를 입력해 값을 입력해준다.
3. id 선택자
#leader1 { border: 1px solid red; } #leader2 { border: 1px solid blue; } |
id 선택자는 클래스 선택자와 비슷하게 사용하면 된다. 마침표( . ) 대신 샵(#)을 아이디 이름 앞에 붙여준다. #leader1, #leader2 이런 식이다. border 속성은 테두리를 설정해준다. 값에는 테두리의 굵기, 모양(점선, 실선 등), 색깔을 입력해준다. 우선 여기서는 1px의 실선, 그리고 색깔은 각각 빨간색과 파란색으로 지정한다.
기본적인 세 가지 선택자를 알아보았다. CSS의 내용은 우선 html 코드의 <style> 태그와 </style> 태그 사이에 넣어준다. 따로 CSS 파일을 만들어 연결하는 것이 표준이지만, 우선 이 방식으로 한다. 그럼 에디터에 다음과 같이 입력되어 있어야 한다. 그리고 html 파일을 열거나 라이브 미리보기를 활용하면 그 아래 그림처럼 html 요소들의 서식이 바뀌어있음을 확인할 수 있다.
모든 <li> 태그 요소들은 폰트 사이즈가 30픽셀로 변경됐다. 그리고 class1은 빨간색, class2는 파란색으로 색깔이 바뀌었다. id가 leader1과 leader2로 지정된 리스트는 테두리가 생겼다. 이 정도면 기본 CSS의 형식은 다 안 거다. 이제 보다 디테일하게 선택하는 심화 선택자를 좀 배우고, CSS에 어떤 속성과 값들이 있는지만 알면 된다. 쭈욱 천천히 알아보자.
'DEVELOP > HTML&CSS' 카테고리의 다른 글
| [웹] HTML/CSS #12 :: 미디어쿼리 (0) | 2017.12.01 |
|---|---|
| [웹] HTML/CSS #11 :: 반응형 vs 적응형 (0) | 2017.11.23 |
| [웹] HTML/CSS #10 :: <div> 태그와 시맨틱 태그 (0) | 2017.11.09 |
| [웹] HTML/CSS #9 :: HTML5 기본 템플릿 (0) | 2017.11.08 |
| [웹] HTML/CSS #7 :: 실무에 자주 쓰이는 속성 (2) | 2017.11.06 |
| [웹] HTML/CSS #6 :: 속성이란? (0) | 2017.11.06 |
| [웹] HTML/CSS #5 :: HTML 기본 태그와 속성 (0) | 2017.10.31 |
| [웹] HTML/CSS #4 :: HTML 태그란? (0) | 2017.10.30 |
