6강 · 선택자

한눈에

지난 시간에는 규칙 하나를 썼고, 그것이 전체에 적용됐습니다. 오늘은 원하는 것만 정확히 골라내는 법을 배웁니다.

오늘 다룰 내용은 세 가지입니다. 먼저 태그 이름으로 고르기입니다. 이미 한 번 해보셨습니다. 그다음 id 와 class 로 고르는 방법입니다. 마지막으로 선택자 두 개를 겹쳐서 범위를 좁히는 방법입니다. 선택자 네 가지면 앞으로 쓰실 것의 대부분이 됩니다. 이름만 적으면 그 태그를 가진 모든 요소를 고릅니다. 샵을 붙이면 그 id 를 가진 요소 하나를 고릅니다. 점을 붙이면 그 class 를 가진 요소 전부를 고릅니다. 둘 사이에 공백을 두면 안쪽이라는 뜻이 됩니다. 마지막 것은 한 번 더 말씀드릴 만합니다. 공백은 범위를 넓히는 것이 아니라 좁힙니다. 반점은 넓히는 쪽인데, 오늘은 반점을 쓰지 않습니다. 이 둘만 구분해두시면 나머지는 쉽습니다. 폴더를 다시 열어보겠습니다. 파일 세 개가 있고, 오늘은 거의 전부 스타일시트에서 일어납니다. 페이지에는 위쪽에 한 줄만 추가되고 그게 전부입니다. 스타일시트는 8줄에서 35줄 정도로 늘어납니다. 가장 단순한 선택자는 태그 이름 하나입니다. 페이지에 h1 은 하나뿐이라, 그 규칙은 요소 하나를 건드립니다. h2 는 세 개이고, 셋 다 같이 바뀝니다. border-bottom 은 제목 아래에 선을 그립니다. 굵기, 모양, 색을 그 순서대로 공백으로 띄어 적습니다.

파일에 남겨둔 headings 주석 아래에 들어갑니다. 규칙은 각자 독립적이고, 위에서 아래로 읽힙니다. 사이에 빈 줄을 두어 파일을 읽기 편하게 만듭니다. 브라우저는 신경 쓰지 않지만 우리에게는 필요합니다. 저장하고 제목 세 개가 한꺼번에 바뀌는 것을 보겠습니다.

style.css

서버는 같은 방법으로 띄웁니다. 6강째인데 여전히 같은 한 줄입니다. 일부러 그렇게 했습니다. 다섯 가지 대신 하나만 기억하시면 됩니다.

터미널

이름이 커졌고, 제목 주변에 여백이 생겼습니다. 제목마다 아래에 금색 선이 그어졌습니다. 선이 세 개인데 규칙은 한 번만 썼습니다. 선택자가 존재하는 이유가 바로 이것입니다. 내일 제목을 하나 더 추가해도 똑같이 적용됩니다. 지금 이런 화면이 보이고 계셔야 합니다. 위쪽의 이름이 커졌고 밑줄 그어진 제목이 세 개 있습니다. 하나만 바뀌었으면 선택자 철자를 확인해주시면 됩니다. 새벽 두 시에 보면 h2 와 h3 는 비슷하게 생겼습니다. 이 모든 것의 바탕에 있는 생각입니다. 선택자는 페이지에 던지는 질문입니다. 어떤 요소가 h2 인가. 어느 것이 이 id 를 달고 있는가. 4강에서 이름을 붙인 이유가 여기에 있습니다. 이제 id 와, 그것을 강력하게 만드는 부분입니다. 첫 규칙은 4강에서 이름 붙인 contact 구역을 고릅니다. 두 번째는 h2 를 고르는데, 그 구역 안에 있는 것만 고릅니다. 둘 사이의 공백이 그 일을 전부 하고 있습니다. 나머지 h2 두 개는 조금 전에 쓴 규칙을 그대로 유지합니다.

부드러운 크림색 배경과 둥근 모서리, 그리고 안쪽 여백입니다. padding 은 상자 가장자리와 글 사이의 공간입니다. 숫자가 두 개면 위아래 먼저, 그다음 좌우입니다. 두 번째 규칙은 그 제목 아래 선만 없앱니다. 저장하면 contact 덩어리가 카드처럼 보이게 됩니다.

style.css

contact 구역이 자기 배경 위에 올라앉았습니다. 아래로 내리시거나 위쪽 Contact 링크를 누르시면 됩니다. 그 제목에는 선이 없고, 나머지 두 개에는 그대로 있습니다. 공백이 들어간 선택자 하나가 한 일이고, 다른 것은 안 바뀌었습니다. 규칙을 깨지 않고 예외를 만드는 방법입니다. 그러면 언제 무엇을 쓰면 될까요. 페이지에 딱 하나만 있는 것이면 id 를 씁니다. 머리글, 연락처 덩어리, 링크로 가는 양식 같은 것들입니다. 여러 개이거나 나중에 여러 개가 될 수 있으면 class 를 씁니다. class 는 한 단계가 아니라 두 단계입니다. 먼저 HTML 의 태그에 class 를 붙입니다. 그다음 점과 같은 이름으로 시작하는 규칙을 씁니다. 사람들이 빠뜨리는 것이 바로 그 점입니다. 점이 없으면 존재하지 않는 태그를 찾게 됩니다.

먼저 HTML 에, 두 번째 문단 아래에 한 줄을 넣습니다. class 는 다른 속성과 똑같이 여는 태그 안에 들어갑니다. 그다음 스타일시트 맨 아래에 규칙을 씁니다. 본문보다 연한 회색과 조금 작은 크기입니다. 두 파일을 저장하고 페이지 전체를 보겠습니다.

index.html

style.css

새로 넣은 줄이 회색에 조금 작게 나왔습니다. 그 class 를 단 것이 더 없어서 다른 곳은 그대로입니다. 같은 class 를 다른 문단에 붙이면 거기도 똑같이 적용됩니다. id 와의 차이를 한 문장으로 말하면 그것입니다. 규칙이 여섯 개가 되었고, 페이지가 드디어 페이지처럼 읽힙니다. 6강이 끝난 시점의 페이지입니다. 읽기 좋은 기둥과 크기가 잡힌 제목, 아래쪽의 카드입니다. CSS 35줄이 전부입니다. 프레임워크도, 빌드 단계도, 설치할 패키지도 없습니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, class 선택자에 점을 빠뜨리는 경우입니다. 그러면 그 이름의 태그를 찾게 되는데, 그런 태그는 없습니다. 둘째, 공백 자리에 반점을 쓰는 경우입니다. 반점은 둘 다, 공백은 안쪽이라는 뜻입니다. 셋째, class 가 세 번 나오는 걸 걱정하는 경우인데, 원래 그런 것입니다. 마치기 전에 서버를 멈춰두겠습니다. 스타일시트가 35줄이고 규칙 여섯 개가 들어 있습니다. 위에서부터 읽어보시면 각 규칙이 무슨 일을 하는지 말하실 수 있습니다. 폴더는 그대로 두세요. 다음 시간에는 이 상자들을 뜯어봅니다. 오늘 기억하실 것 세 가지입니다. 앞에 아무것도 없으면 태그, 샵이면 id, 점이면 class 입니다. 선택자 둘 사이의 공백은 안쪽으로 범위를 좁힙니다. 그때그때 이름을 붙여두세요. 오늘의 class 가 내일의 규칙이 됩니다. 다음 시간에는 박스 모델과, 모든 요소가 왜 사각형인지를 다룹니다.

글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.