속성선택자 2

CSS,속성 선택자를 알아보자.

속성선택자 지정된 속성 또는 value 에 의해 요소를 결정하여 스타일링 적용. 사실 쓰는 것은 자제 하는 것이 좋다. 모든 태그들을 검색해서 진행하기 때문에 로딩속도가 느리다는 단점이 있다. [속성A] /* id 속성을 가진 요소. */ [id] { background-color: bisque; } /* input 태그 중 id 속성을 가진 요소. */ input[id] { font-weight: bold; } /* id 속성이 value 인 요소. */ [id=lg] { /* Emmet 기능 적용시와 동일하게 value 에 문자열 구분자 생략 가능 */ list-style: none; } /* value 가 디폴트로 설정된 값이 있다하더라도 명시적 지정이 되어 있지 않으면 미적용. */ [target..

Developer/HTML_CSS 2024.04.15

CSS,가상 클래스 (요소) 선택자, 그의 트리구성 , 속성 선택자까지 알아보자.

가상 클래스 선택자 선택자에 의해 지정된 요소가 특정 상태일때, 스타일링 적용. 가상이라 함은 HTML 코드가 실제 존재하지 않는 상태에서 지정함을 의미한다. :hover 지정된 요소에 마우스 포인터를 올리면 스타일링 적용. h1:hover { background-color: aqua; } form button:hover { color: red; } form:hover label { font-style: italic; font-weight: bold; } :focus 링크 , 입력상자 , 버튼 등 마우스나 TAB 키로 포커스가 맺혔을 때 스타일링 적용. 손이나 팔이 불편한 사람들을 위해 TAB 키로 포커스를 맞출 수 있는 기능이 제공이 되는데 , 이상태를 규정함으로 사용자들에게 편의를 제공하는 태그. a..

Developer/HTML_CSS 2024.04.15
728x90