CSS를 사용하거나 자바스크립트 등을 활용하려면 html에서 원하는 요소를 선택할 수 있어야 합니다.
그래서 이번에는 원하는 요소를 선택할 수 있는 "셀렉터"에 대해 알아볼게요.
많이 사용되는 셀렉터는 딱 머리에 기억하고 있어야 일을 하는데에 있어 편하답니다.
머릿속에 다 기억해두면 좋겠지만 내 머리를 믿지 못하니까~
보면 바로 기억이 날 수 있도록 남겨봅니다.
태그명 셀렉터 : 태그 이름 그대로 쓰면 됩니다. 셀렉터는 아래와 같이 콤마로 구분합니다.
h2, li { color:pink; }
클래스 셀렉터 : 앞에 .을 붙이면 됩니다. 동일한 class속성을 사용하는 요소(태그)에 모두 적용됩니다.
.main : 이 클래스는 어느 태그에 종속적이지 않으므로 아래 main 클래스가 있는 두 태그에 해당됩니다.
p.main : p태그에 sub클래스가 있는 태그만 해당됩니다.
<body class="main">
....
<p class="main"> 나는 감사하게 생각합니다</p>
<p class="sub"> 나에게 일어나는 많은 일들을...</p>
<div id="news">오늘 오후에 재미있는 일이 있을거라고 합니다</div>
</body>
아이디 셀렉터 : 예전에 현재의 셀렉터가 없을 때는 id는 본래 html에서 유일해야 자바스크립트에서 제어가 가능했던 것으로 알고 있습니다. 현재는 위 class셀렉터에서처럼 동일한 ID가 있어도 태그명#ID 처럼 셀렉트가 가능합니다.
#news { color:pink; }
자식 셀력터 : "부모 > 자식" 으로 표현합니다. 부모는 자식보다 한 단계? 한 세대 앞이니까 > 로 표현하다고 생각했지요 ^^
div > p > strong { color: pink }
-> div태그 바로 아래 있는 자식 p태그, 그 p태그 바로 밑에 있는 strong 태그에 해당됩니다.
자손 셀렉터 : "부모 자손" 으로 표현합니다. (부모와 자손 사이에 공백)
부모와 손주(자식포함) 관계는 공백으로 표현하는데요.
부모와 손주, 손주의 자식, 자식의 또 자식 으로 손주는 끝없이 펼쳐지지요.
그 무한한 의미를 표현한 것이 공백이 아닐까 싶어요. 이렇게 의미를 부여해야 나중에 생각이 나지요. ㅋ
div strong { color: pink }
-> div태그 바로 아래 있는 strong이 아니더라도 그 하위 어딘가에 자손으로만 포함되어 있으면 선택됩니다.
전체 셀렉터 : 와일드카드문자(*)로 표현합니다. 모든 html태그에 적용됩니다.
* { color:pink; }
-> 모든 폰트의 색상이 핑크가 됩니다. 핑크핑크하겠죠~
속성 셀렉터 : 어느 태그 중에서도 원하는 속성을 가진 태그를 선택하고 싶을 때가 있을거에요.
input[type=text] { color : pink; }
가상클래스 셀렉터 : 태그나 클래스등으로 실제 존재하지는 않지만,
가상으로 어떤 상황이 발생하였을때나 특정한 상태에 적용되게 할 수 있는 유용한 셀렉터입니다.
마우스 :hover(마우스를 올릴 때 적용) , :active(마우스를 누르고 있을 때 적용)
폼요소 :focus(폼요소가 키보드.마우스 클릭등으로 포커스를 받을 때 적용)
링크 :link(1번도 방문하지 않았던 링크에 적용), :visited(방문한 링크에 적용, 색관련 프로퍼티만 적용 가능)
색상 관련 대표 프로퍼티
color : 태그의 text글자색상 , 왠지 font-color라고 할것 같죠 ㅋ
background-color : 태그의 배경색상
border-color : 태그의 테두리 색상
블럭 :first-letter(블럭형 태그의 첫 글자에 적용, 인라인 태그에는 적용 안됨), :first-line(블럭형 태그의 첫 라인에 적용)
구조 :nth-child(even) [짝수번째 모든 자식태그에 적용. 보통 테이블에서 사용됨] :nth-child(1)[첫번째 자식태그에 적용]
ex)
a:visited { color : pink; } -> a링크를 방문한 후부터 링크의 텍스트 색상이 핑크로 보여지게 합니다.
li:hover { background : green } -> 메뉴에 보통 li를 많이 사용하는데요.
li태그에 마우스를 올리면 배경색으로 green색상으로 바꿔주었다가
마우스를 다시 내래면 원래색상으로 돌아갑니다. 스크립트가 아닌 css만으로 완전 편하겠죠~?
h2:firstletter { color : pink; } -> h2태그의 첫번째 문자만 핑크색으로 바꿔줍니다.
주의사항) : ":"콜론 앞뒤로 공백을 주면 적용이 안됩니다.
html은 태그 내에 많은 태그들을 또 포함하기 때문에 정확하게 선택하기 위해서는 셀렉터를 조합해야 합니다. 그래야 범위가 좁혀지겠죠~
#menu>ul li a:hover { color : pink; }
-> menu라는 id 자식중에 ul태그, 그 ul태그중에서 하위에 포함(자손)하는 모든 li태그에 대해서 마우스를 올리면 핑크색상이 되지요.
input[type=text]:hover { background-color : mintcream; } -> input태그중에서 type속성이 존재하고,그 type속성이 text인 요소에 마우스를 올리면 배경색상은 민트크림색상으로 변경됩니다.
input[type=text]:focus { font-size : 120px } -> input태그중에서 type속성이 존재하고,그 type속성이 text인 요소가 focus를 받는동안 즉 마우스 클릭이 되어있는 경우 폰트 사이즈가 120%로 크게 보여집니다.
'IT 개발' 카테고리의 다른 글
| html 기초) html 요소의 시각 근본이라 할수 있는 CSS3 박스모델 (0) | 2022.07.17 |
|---|
댓글