속이 먹먹해서 올리는 CSS기본 개념

안녕하세요 게으르고 지식이 편중된 개발자입니다.

그래도 많은 분들이 웹 해서 기분은 좋....기는 한데.

헣.

사설은 다 집어 치우고 강의시작해요.

CSS는 기본적으로 selecter라고 부르는 선택자와 그 뒤의 CSS커맨드로 연결이 되어있습니다.

예를 들어

#오유 .오징어{다리:10개;}

앞의 '#오유 .오징어' 가 셀렉터가 되며 뒤의 '{다리:10개;}' 라는 항목이 셀렉터에 해당하는 오브젝트의 '다리'라는 속성을 '10개'로 설정하라는 의미입니다.

위의 조건을 다시 html태그만으로 동일하게 구성하자면

...

<div>

</div>

같은 모습이 됩니다. 이 하나의 코드로도 왜 css를 쓰는게 편리한지 보이는군요.

다시 설명으로 돌아가서

셀렉터란 HTML구조에서 오브젝트를 추적하는데 주요한 수단이 되는데 기본적으로 많이 쓰이는 설정이라면

아무것도 안 적는 태그네임, #은 ID를 표현하고 .은 class태그에 정의된 이름을 따라갑니다. 하지만 name에는 대응하는 태그가 없어서

속성을 찾아주는 셀렉터인 []을 사용하여 input[name='user_id'] 같은 형식으로 사용하게 됩니다.

또한 공백1칸은 부모 셀렉터의 모든 하위 노드를 참조한다는 의미가 됩니다. 직계 자식 뿐만이 아니라, 손자, 증손자 그 아래로의 모든 태그들에 영향을 끼쳐버린다는 말이죠.

body div{display:none} 하면 body태그 아래의 모든 div태그들의 모습이 사라집니다.

셀렉터에 대해 기본을 안 것 같다면 이제 인터넷에서 'CSS셀렉터' 로 검색을 해서 나오는 문서들을 한번 보세요

오우 이렇게나 많은 셀렉터가!

또한 : 로 설정할 수 있는 항목들은 의사 클래스 셀렉터라 하는데....

이름을 알고 있으면 금방 찾아지기는 하는데

대표적인 두가지의 예를 들면

:hover{} 마우스가 위로 올라갈 때 객체의 설정을 변경합니다.

:visited{} 방문한 링크일 경우 색상을 변경합니다.

이런식의 설정이 가능하죠. 뭐 이것도 상세한건 검색하세요.

다 소개하면 격렬한 귀찮통에 의해 죽을 수도 있습니다.

그리고 의사클래스는 자신만 제어 가능하고, 자신이 특정 이벤트를 받을때 뭔가 명령을 수행하는건 JS써야합니다.

CSS가 영향을 끼칠 수 있는건 오로지 셀렉터에 명시된 자신 뿐입니다.

다음에 여유되면 DOM이나 JS쪽도 한번 다뤄볼게요.

글이 난잡해서 쓰고나니 부끄럽네요.