CSS Selecting by id

이 웹페이지는 CSS를 사용하고 있어요

태그와 문단에 스타일을
주기 위해서 말이죠

모든 태그는 초록색이고
모든 문단은 보라색이죠

만약에 첫번째 태그만
선택하고 싶다면요?

또는 두번째 문단에만
스타일을 주고 싶다면요?

우리는 어떤 방법이 필요해요

브라우저에게 우리가 선택한 요소를
알려줘야 하니까요

지금처럼 모든 요소에게
스타일을 주지 않게 말이죠

한 가지 방법은
'ID로 선택하기' 에요

우리 페이지에 고유한 ID 태그를 줄 수 있어요

그리고 CSS에게 이렇게 얘기하죠

잘 들어, 난 이 ID를 가진 요소에게만
스타일을 주고 싶어

다른 요소들에게는 주지 말고

이렇게 하기 위한 첫번째 단계는
HTML페이지를 수정하는 거에요

우리가 선택하고 싶은 태그에
ID 속성을 추가하는거죠

여기 두번째 문단으로 시작해보죠

ID 속성을 추가하려면
커서를 여기다 놓고

''태그의 첫번째 부분에요

'p' 바로 뒤에 공백을 추가하고
'id = "'를 쓰세요

이제 이 ID속성에 값을 추가하면 돼요

어떤 ID를 줘볼까요?

값을 잘 나타내야하고 유일해야겠죠

이 페이지에 중복된 ID가
있으면 절대 안 돼요

이건 토끼 노래니까
ID를 'rabbits-song'이라고 할게요

ID에는 공백이 있으면 안 돼요
이렇게 여러 단어가 있다면

'-'나 '_'를 사용해야 해요

전 '-'가 정말 좋아요

이제 이 문단을 구별할 수 있게 되었어요

이걸 수정하는 CSS규칙을 추가할 수 있어요

두번째 단계를 위해 태그로
올라가 볼게요

마지막 규칙 다음에 새 줄을 추가할게요

자 기억해봐요
CSS 규칙의 첫번째 부분은 선택자에요

브라우저에게 뭘 선택할 지 알려주는 거죠

예전 규칙들을 보면 우린
''나 ''같은 선택자를 사용했네요

이 페이지의 모든 ''나 ''를
선택하기 위해서요

이제 특정한 ID를 가진 요소를 선택하는
선택자를 만들거에요

#로 시작하는 선택자로 시작해야해요

브라우저에게 #다음에 오는건 ID라고
말해주는 부분이죠

이제 ID를 쓰면 돼요
'rabbits-song'

다른 부분은 저번과 같아요

중괄호를 열고 닫고요

배경색 같은 속성을 추가하고

그리고 짠!
되는군요!

이 노래 문단만 노란 배경을 가지게 되었어요

첫번째 문단은 바뀌지 않았고요

첫번째 에 대해서도 해볼게요

첫번째 단계 기억나세요?

맞아요
HTML을 수정해야하죠

이 'id'속성을 추가해야 하니까요

여기 태그 시작부분에 커서를 두고

공백을 넣고 'id ='를 쓰세요

그리고 유일하고 값을
잘 표현하는 ID를 쓰세요

"rabbits-info-heading'이라고 하죠

좋아요. 두번째 단계.
다시 style부분으로 돌아가서

새로운 줄을 추가하고
#를 쓰고요

그리고 ID를 쓰고요
'rabbits-info-heading'

여기 중괄호 안에 속성을 적어요

{ background-color: purple; }

앗, 적용되지 않았군요
뭐가 문제일까요?

제가 철자를 제대로 적었나요?

rabbits-info-Heading,
rabbits-info-heading...

거의 같아 보이는거 같은데 말이죠

한 자 한 자 비교해 볼 수도 있어요

뭐가 문제인지 알기 위해서 말이에요

그렇지만 저는 그냥
다시 HTML로 가서

ID를 복사-붙여넣기 할 거에요
정확하게 하기 위해서요

그리고.. 되는군요!

이제 도 배경이 생겼어요
뭐가 문제였는지 알아챘어요?

그렇죠. 바로 여기 h가 문제였어요
h를 H라고 쓰면

브라우저는 다르다고 생각해요

HTML과 같아지려면
소문자 h를 써야했네요

왜냐하면 id는 대소문자를
구분하기 때문이에요

그래서 어디든 사용할 때
같게 써야해요

제 생각엔 ID를 쓸 때 항상 소문자로
쓰는게 최선인거 같아요

그래서 언제 어떤 식으로 썼는지
생각할 필요가 없게요

좋아요. 이제 마지막 당부할 것은요

ID는 유일해야 한다는 거에요!

만약 페이지에서 두 개의 태그가 같은
ID를 사용한다면

브라우저는 두 개 모두 스타일을 줄 수도 있고
하나만 줄 수도 있어요

그게 그렇게 되면 안 되겠죠

괜찮고 유일하고
값을 잘 나타내는 ID를 쓰세요