-
이 웹페이지를 봅시다
-
여기 위에 heading이 있고요
-
토끼에 대한 글이 있는 문단이 있고요
-
여긴 여러 개의 문단이 있네요
-
제가 좋아하는 토끼 노래의
가사가 들어있죠
-
저번 시간에 id를 이용해서 첫번째
문단에 스타일을 적용했어요
-
하지만 이젠 여러 문단이 있으니까
-
이 문단 모두를 노란
배경색으로 만들고 싶어요
-
지금까지 배운 것으로는
어떻게 할 수 있을까요?
-
처음 우리가 배운 것은
-
특정 타입의 모든 태그를
선택하는 거였죠
-
'p'같은 태그를 가진 것들 말이에요
-
하지만 그렇게 하면 모든 문단을 칠하게 돼요
가사 문단 이외에도 말이죠
-
우리는 뭔가 조금 더 구체적으로 기술하는 것이 필요해요
-
그래서 우린 id를 이용해
태그를 선택하는 것을 배웠어요
-
'rabbit-song'같은 id를 가진
문단을 고르는 것 말이죠
-
하지만 그걸로는 첫번째 문단만
고를 수 있었어요
-
우리는 다른 문단을 고를 때
그 id를 사용하면 안 돼요
-
왜냐하면 같은 id를 여러 태그에
사용하면 안 되니까요
-
만약 다른 문단들도 선택하고 싶다면
-
각각에게 새로운 ID를 줘야 할거에요
-
'song-lyrics2', 'song-lyrics3' 처럼요
-
왜냐하면 모든 ID는 유일해야 하니까요
-
그리고 우리는 각각에 대한 규칙을
추가해야 하겠죠
-
이렇게 할 수도 있지만
일이 너무 많아지잖아요!
-
노래에 새로운 절을 더할 때마다
-
HTML에 새로운 ID를 더해야 하는 걸
잊으면 안 될거에요
-
CSS규칙도 추가해야 하고요
-
만약에 몇 백개의 절을 추가한다면
정말 피곤한 일이 될 거에요
-
여기 좋은 소식이 있어요
-
더 나은 방법이 있죠
그걸 '클래스'라고 불러요
-
클래스는 기본적으로
-
특정 요소를 그룹에 배정시키는 방법이에요
-
그리고 그룹에는 얼마든지 많은
요소들을 넣을 수 있어요
-
클래스를 추가하려면 id에서 했던 것처럼
클래스 속성을 추가해야해요
-
이 id는 지울게요
다른 걸로 바꿀꺼니까요
-
이제 커서를 태그의 처음에 두고요
-
공백을 추가하고 쓰세요
'class = "'
-
이제 클래스 이름을 정해야죠
-
괜찮고 값을 잘 나타내는 걸로요
-
이렇게 부를게요
"song-lyrics"
-
여기 썼어요
-
이 클래스에는 어떤 요소들이 포함될까요?
-
모든 가사 문단들이죠
-
페이지 아래로 내려가서
-
각 문단 클래스에 속성을 추가해주세요
-
"song-lyrics"
-
좋아요. 이제 CSS규칙을
추가할 준비가 되었네요
-
태그로 돌아가서
-
전에 썼던 id에 대한 걸 지울게요
-
이걸 바꿀거니까요
-
그리고 클래스 선택자를 만들어요
-
클래스 선택자를 시작할 때는
마침표(.)를 사용해요
-
그리고 클래스 이름을 뒤에 적고요
.song-lyrics
-
항상 그랬듯이 중괄호, 속성,
콜론 그리고 값을 쓰세요
-
짜잔!
-
이제 모든 가사들은 노란색
배경을 가지게 되었네요
-
만약 여기 s를 대문자로
바꾸면 어떻게 될까요?
-
적용되지 않네요
-
왜냐하면 클래스 이름은
대소문자를 구별하기 때문이죠
-
소문자인지 대문자인지는 문제가 됩니다
-
마치 ID처럼 말이죠
-
만약에 마침표 대신
#를 쓰면 어떻게 될까요?
-
적용되지 않아요
-
왜냐하면 브라우저가 "song-lyrics"가
ID라고 생각하고
-
song-lyrics라는 id를 찾지 못하면
-
찾기를 포기해버려요
-
만약 클래스 이름에 공백문자가
들어가면 어떻게 될까요?
-
마찬가지로 적용되지 않아요
-
왜냐하면 클래스 이름엔 공백이
들어가면 안되기 때문이죠
-
나중에 알게 되겠지만
-
공백은 CSS세상에서 아주
특정한 것을 의미해요
-
이건 다시 원래대로 고칠게요
-
다시 한번 말하자면
-
클래스를 추가하고 싶다면
-
클래스 이름을 정하고
-
HTML의 클래스 속성에 그것을 추가해요
-
style규칙을 적는데
-
마침표로 시작하는 클래스 이름을 쓰세요
-
이제 CSS에 클래스를
적용할 수 있게 되었네요!
