친절한효자손 취미생활

[CSS기초] 전체선택자 및 하위,자식 선택자 살펴보기



CSS스타일시트를 열심히 배우고 있는 중이지만....

배울수록 모르는 것 투성이...ㅠ_ㅠ


그치만, 포기하지 않고, 어떻게든 알아내려고 하다보면

이제 완벽하게 나의 것으로 만들 수 있게 되겠지요^^


지금까지 배운 HTML+CSS 기본 스타일시트 태그들을 바탕으로,

개인홈페이지를 하나 만들어 봤는데요~

나중에 자세히 포스팅 한번 해볼께요^^


그리고, 태그소스도 별도로 올려놓을테니,

혹시 참고하실 분들은 참고하시면 좋을 것 같아요.






이번 포스팅은, CSS 스타일시트 중에서,

전체 선택자, 하위 선택자, 자식 선택자에 대한 실습시간 이에요.


전체선택자라 함은, 말그대로, <BODY> 안에 들어갈 모든 스타일들을 전체적으로 적용하게 된다 라는 말이고,

하위선택자는, 특정 하위부분만을 지정해서 그부분에만 스타일을 적용하게 된다 라는 뜻이지요^^


예시로 볼께요.





전체 선택자는 이렇게 HTML의 모든 바디에 적용이 되게하는 태그구요,

앞에 * 를 붙이고, {} 이안에 스타일 적용할 태그들을 넣게 되지요.





하위 선택자는, 말그대로  전체가 아닌 일부분에 대한 속성을 부여할때 넣게 되구요,

보통은 상위요소 안쪽에 하위요소에 적용시에 많이 쓰이죠.





이건 자식 선택자인데, 하위랑 다른건 딱~ 하나!

> 기호가 들어가는 것 차이구요, 그 차이점은 이렇게 위의 스크린샷에 보시면 되겠어요.


사실....자식 선택자는 많이 쓰는 태그가 아니지요~!





자, CSS 스타일 시트를 한번 적용을 해 보자면,

이렇게 한번 적어볼께요.





거기에다가, 노트패드나 메모장으로 이렇게 태그를 작성해 주셔요.

제가 첨부파일에 일부러 텍스트파일을 넣어두지 않는 이유는,


잘 몰라도, 우선은 똑같이 베껴서 써보는것이라도 해 보시는게

큰 도움이 되기 때문이에요^^





자, 이렇게 출력이 되면 정상적으로 처리가 된 것이에요^^

우선은, 아~ 이렇구나 정도로 개념을 이해해 주시면 될 것 같아요.

몽땅 적용하려면, *{} 이렇게~

특정태그에만 적용하려면 클래스값이나, ID값 뒤에다가 속성을 부여하시면 되요.



자~ 그러면, 전체선택자 및 하위 및 자식선택자에 대한 기본적 태그를 알아봤어요.

솔직히;;;저도 큰 차이를 잘 모르지만, 자주쓰는태그인건 확실하다는건 금방 알게되더군요^^


전체랑 하위 개념만 이해하시고, 자식은 잘 몰라도 될 것 같아요~!







공유하기

facebook twitter kakaoTalk kakaostory naver band