CSS 기초 : 스타일을 지정하는 선택자 사용 방법
이 부분은 정말 중요합니다. 여러분들께서 홈페이지를 만드시려 한다거나, 저처럼 티스토리 스킨을 제작해보려 하신다면 꼭 알고 있어야 하는 부분입니다. 꼭 스킨을 만들지 않더라도, 현재 사용하는 스킨이 편집 수정이 가능한 것이라면 원하시는대로 입맛대로 스타일을 바꾸거나 추가해서 사용할수도 있을 것입니다. 그러기 위해서는 꼭 오늘 이 글에서 다루는 부분을 이해하고 넘어가야 합니다.
타입(태그) 선택자 / 아이디 선택자
여기에서는 내부스타일 방식으로 진행합니다. 현재 본문 영역에는 p태그와 div 요소로 텍스트 두 문장을 작성했습니다. 그리고 head의 스타일 요소 안쪽에 이들에게 각각 글씨 색상을 변경하도록 스타일 지정을 했습니다.
p {color: blue;}
여기에서 p가 바로 선택자가 됩니다. 결국 이 html 내에서의 모든 p 태그에 대해서 글씨를 모두 파란색으로 출력하라는 뜻을 담고 있습니다.
#ctxt {color: red;}
앞에 샵(#)이 붙는 경우는 id로 값을 부여했을 경우 입니다. 즉, 위의 예시에서는 div에 id 값을 ctxt로 부여했기 때문에, 스타일에서 #ctx 로 적어준 것입니다. 그리고 색상을 빨강으로 변경하라고 지정해 주었습니다. 참고로 div에 id값을 따로 줄 때에는 해당 id의 이름에 대한 div만 변경이 됩니다. 이 본문에 다른 div 요소가 있었다 하더라도 전체적으로 영향을 받지 않습니다. 그래서 변경하고자 하는 요소에 대해서만 id 혹은 class 값을 따로 부여합니다.
위의 마크업에 대한 결과물 입니다. 이렇게 스타일로 지정해준 색상대로 정상적으로 출력되는것을 확인할 수 있습니다.
이번엔 본문에 p태그를 사용해서 한 문장을 더 넣었습니다. 그리고 해당 p 태그에는 "p01" 이라고 하는 class 값을 부여했습니다. 이 상태로 출력을 해보겠습니다.
class 값을 부여했어도 스타일은 기존의 p태그에 대한 스타일로 출력됩니다. 왜냐하면 p01에 대한 스타일을 따로 만들어주지는 않았기 때문입니다.
그래서 특정 문장에 대해서 변경하고자 한다면 이렇게 클래스 값에 대하여 스타일을 따로 지정해 주시면 됩니다. 이번 색상은 16진수를 이용했습니다.
지정한 데이터의 값에 맞는 색상이 정상 출력됨을 확인할 수 있습니다. 즉, 하나의 태그에 대해서 일괄적으로 변경하려면 별도의 id 혹은 class 가 필요 없이 해당 태그를 직접 써넣어 적용시키면 되는 것이며, 일부 태그 중에서도 극히 일부분에 대해서만 스타일을 따로 지정하고 싶으시면 id 혹은 class 값을 부여해서 스타일을 만들어 주시면 됩니다.
전체 선택자 / 자식 선택자
여기에서는 못 보던 스타일 요소가 나왔습니다. 어떤 의미인지 한번 알아보겠습니다.
* → 전체 요소에 대해 일괄 적용함
●>■ → 동그라미 안쪽의 요소 중에서 네모에 속하는 요소들에 대해서만 스타일 적용함
별표는 모든 태그에 일괄 적용됨을 뜻합니다. html 문서를 구성하는 모든 요소에 적용시키고자 할 때 사용됩니다. 가령 폰트 크기라던지, 폰트 스타일을 변경할 때 요긴하게 쓰일 수 있습니다. 그 다음은 조금 햇갈릴 수 있습니다. 위의 마크업으로 예를 들자면 <ul> 안쪽에 <li> 태그가 있고, 또 이 안쪽에 <p>태그가 있습니다. li는 ul의 자식요소, 반대로 ul은 li의 부모요소라고 합니다. p는 li의 자식요소, li는 p의 부모요소라고 합니다. 족보를 생각해 보시면 됩니다. 1촌관계는 모두 부모자식 관계지요? 그 원리라고 생각하시면 됩니다. 즉! > 에 대한 개념은 부모에 대한 자식에게 스타일을 적용시키고자 할 때 쓰이는 태그 입니다. 위의 코딩대로 웹으로 출력하면 이렇게 나오게 됩니다.
li 바로 안쪽에 있는 p태그의 글씨 색상이 변경되었음을 알 수 있습니다. 바로 자식 선택자에 대한 스타일 때문입니다.
그러면, 새로운 자식 선택자를 이렇게 만들어주면 적용이 될까요? id 값이나 class 값으로 지정한 스타일이 아니기 때문에 이론상이라면 저 텍스트도 색상이 바뀌어야 합니다.
그렇습니다. 이렇게 변경이 되는게 정상이죠.
인접 선택자
●+■ {}
이번에는 인접 선택자 입니다. + 기호를 사용해서 지정하며, 자식 선택자와 비슷합니다. 바로 다음에 오는 해당 태그에 대해서 스타일을 지정하게 됩니다. 위의 예시에서는 h1 요소 다음에 오는 p태그에 대해서 글씨 색상을 파란색으로 변경하라는 뜻이 됩니다. 그러면 본문에서 살펴보면 저기 빨간색 박스 친 부분이 바로 변경이 될 요소가 됩니다. 동그라미 요소 바로 다음에 오는 네모 요소에 지정한 스타일을 적용시키라는 의미 입니다. 결과를 한번 살펴보겠습니다.
그렇습니다. 이렇게 정상적으로 잘 변경되었습니다.
인접 선택자니까 그러면 위에 놓아도 변경되지 않을까 싶습니다. 바로 실험게시! h1 요소 앞쪽에 p태그로 문장을 넣어봤습니다. 잘 될까요?
안 됩니다. 따라서 인접 선택자는 자식 선택자와 비슷한 맥락이라고 보시면 될 것 같습니다. 나중에 바로 오는 요소에 대해서만 적용이 됩니다.
이번에는 아까 테마 구성이라고 하는 문구 바로 위에 작성했습니다. 어떻게 될까요?
그러면 가장 인접하는 p태그가 방금 추가한 저 문장이므로 해당 텍스트만 적용되고 기존에 적용되던 텍스트는 뒤로 한칸 밀렸기에 인접하지 않는 p태그로 인식되어 스타일이 적용되지 않게 됩니다.
응용하기
이렇게 웹문서를 구성해 봤습니다. 현재 스타일이 적용된건 없습니다. 어떻게 출력이 될까요?
네. 이렇게 보여집니다. 이제 스타일을 만들어 보겠습니다.
필요한 부분에 id값을 부여했고, class 값도 넣었습니다. 그리고 각 요소별로 골고루 스타일을 적용했습니다. 각 스타일에 대한 설명은 주석으로 코멘트를 달았으니 한번 읽어보세요.
마크업이 제대로 되었다면 이렇게 정상적으로 스타일이 적용이 되었음을 확인하실 수 있으실 것입니다.
오늘은 정말 중요한 CSS 스타일 적용 기초 상식에 대해 배웠습니다. 기본이 탄탄해야 앞으로 응용으로 나올 모든 것들을 쉽게 이해할 수 있습니다. 생각보다 원리는 어렵지 않습니다. 잘 이해가 안 되면 몇 번이고 다시 되뇌고, 자료를 찾아가며 공부해 보세요. 자기것으로 만드는게 가장 중요합니다. 끝.
"친절한효자손 취미생활" 을 검색!
