웹 개발 강의

웹 개발 강의 6편 - 선택자

나동빈

5강에서 쓴 규칙은 하나였고, body 에 적용되어 전체로 흘러내렸습니다.

6강 강의 영상

오늘은 원하는 것만 골라내는 법을 배웁니다. 4강에서 구역에 이름을 붙인 이유가
여기서 드러납니다.

선택자 네 가지

선택자고르는 것예
h1그 태그를 가진 모든 요소h1 { font-size: 40px; }
#contact그 id 를 가진 요소 하나#contact { padding: 16px; }
.note그 class 를 가진 요소 전부.note { color: grey; }
#contact h2#contact 안에 있는 h2 만#contact h2 { margin: 0; }

앞에 아무것도 없으면 태그, 샵이면 id, 점이면 class 입니다.

둘 사이의 공백은 안쪽이라는 뜻입니다. 반점은 둘 다라는 뜻이고 공백은
안쪽입니다. 이 둘만 구분해두시면 나머지는 쉽습니다.

태그 이름으로 고르기

style.css 의 /* headings */ 주석 아래에 넣습니다.

h1 {
  font-size: 40px;
  margin-bottom: 4px;
}

h2 {
  margin-top: 36px;
  border-bottom: 2px solid #C98B1B;
  padding-bottom: 6px;
}

페이지에 h1 은 하나뿐이라 그 규칙은 요소 하나를 건드립니다. h2 는 세 개이고,
셋 다 같이 바뀝니다.

border-bottom 은 제목 아래에 선을 그립니다. 굵기, 모양, 색을 그 순서대로
공백으로 띄어 적습니다.

규칙은 한 번만 썼는데 선이 세 개 그어집니다. 선택자가 존재하는 이유가 바로
이것입니다. 내일 제목을 하나 더 추가해도 똑같이 적용됩니다.

id 로 고르고, 공백으로 좁히기

/* blocks */ 주석 아래에 넣습니다.

#contact {
  background: #FAF7F0;
  border-radius: 10px;
  padding: 16px 20px;
}

#contact h2 {
  margin-top: 0;
  border-bottom: none;
}

첫 규칙은 4강에서 이름 붙인 contact 구역을 고릅니다.

두 번째가 오늘의 핵심입니다. h2 를 고르는데, 그 구역 안에 있는 것만 고릅니다.
둘 사이의 공백이 그 일을 전부 하고 있습니다.

결과를 보시면 Contact 제목에만 선이 없고 나머지 두 개에는 그대로 있습니다.
규칙을 깨지 않고 예외를 만드는 방법입니다.

class 로 고르기

class 는 두 단계입니다. 먼저 HTML 의 태그에 붙입니다.

<p class="note">Everything here is hand written. No build step.</p>

그다음 /* text */ 주석 아래에 점으로 시작하는 규칙을 씁니다.

.note {
  color: #6B7078;
  font-size: 15px;
}

사람들이 빠뜨리는 것이 바로 그 점입니다. 점이 없으면 note 라는 태그를 찾게
되는데, 그런 태그는 없습니다.

같은 class 를 다른 문단에 붙이면 거기도 똑같이 적용됩니다. id 와의 차이를
한 문장으로 말하면 그것입니다.

확인하기

python -m http.server 5500
처음 실행하면 윈도우에서 방화벽 경고창이 뜰 수 있습니다. 개인 네트워크만 체크된 상태로 액세스 허용을 눌러주시면 됩니다. 이 서버는 본인 컴퓨터에서만 쓰는 것이라 공용 네트워크는 체크하지 않으셔도 됩니다.

브라우저에서 localhost:5500 으로 들어가시면 됩니다.

이름이 커졌고 제목마다 금색 선이 생겼습니다. Contact 덩어리는 크림색 배경 위에
카드처럼 올라앉았고, 그 제목에만 선이 없습니다. 회색 메모 줄도 한 줄 들어갔습니다.

규칙 여섯 개로 페이지가 드디어 페이지처럼 읽힙니다.

자주 발생하는 오류

첫째, class 선택자에 점을 빠뜨리는 경우입니다. 존재하지 않는 태그를 찾게 됩니다.

둘째, 공백 자리에 반점을 쓰는 경우입니다. 반점은 둘 다, 공백은 안쪽이라는
뜻입니다. 전혀 다른 규칙이 됩니다.

셋째, class 가 여러 번 나오는 걸 걱정하는 경우인데, 원래 그런 것입니다.
유일해야 하는 것은 id 뿐입니다.

연습 문제

  1. ul 선택자로 목록에 규칙을 하나 써보세요.
  2. class=&quot;note&quot; 를 다른 문단에도 붙여보고 둘 다 바뀌는지 확인해보세요.
  3. #contact p 규칙을 써서 그 구역의 문단만 색을 바꿔보세요.

다음 편

7강에서는 박스 모델을 다룹니다. 모든 요소가 왜 사각형인지 알게 됩니다.

영상으로 보시려면 링바이트에 같은 내용이 올라가 있습니다.
강의 노트도 함께 보실 수 있습니다.

#html#css#javascript#웹개발#강의#무료