CSS 02. 기타 선택자 (2)
2022. 12. 9. 17:33
Front/CSS
3. 동위( 같은레벨) 선택자 동위같계에 있는 뒤에 위치한 특정요소를 선택할 때 사용 - a 요소 바로 뒤에 있는 b요소 "하나" 만을 선택 a+b{스타일 속성 : 값}; -a 요소 뒤에있는 "모든" b요소 선택 a~b{ 스타일 속성 : 값}; div1 div2 div3 div4 ul 안녕 HTML 삽입 미리보기할 수 없는 소스 4. 반응 선택자 사용자의 움직임에 따라 선택되는 선택자 - 해당요소에 클릭이 되는 순간 스타일 부여 선택자 : active { 스타일속성 : 값; } - 해당 요소에 마우스가 올라가는 순간 스타일 부여 선택자: hover { 스타일속성 : 값; } active테스트 hover테스트 클릭 HTML 삽입 미리보기할 수 없는 소스 5. 상태 선택자 요소의 상태에 따라서 선택되는 선택..
CSS 02. 기타 선택자 (1)
2022. 12. 9. 17:11
Front/CSS
1. 속성 선택자 : 선택하고자 하는 요소 내에 작성되어있는 속성을 이용해서 선택하는 방법 선택자 뒤에 [] 를 이용해서 속성과 속성값을 제시하면서 선택 선택자[속성=속성값]{ : 속성과 속성값 일치 선택자[속성~=속성값]{ : 속성값을 포함(한단어) 선택자[속성|=속성값]{ : 속성값의 시작(- 기준 한 단어) 선택자[속성^=속성값]{ : 속성값의 시작(단어 X) 선택자[속성$=속성값]{ : 속성값 끝 선택자[속성*=속성값]{ : 속성값을 포함 스타일 속성 : 값; } HTML 삽입 미리보기할 수 없는 소스 1) = : 속성과 속성값이 일치 할때 div 요소들 중 name속성값이 name1과 '일치'하는 요소 HTML 삽입 미리보기할 수 없는 소스 2) ~= : 속성값이 속성값에 포함되어있을때 (한단어..
CSS 01. 기본선택자
2022. 12. 9. 16:36
Front/CSS
CSS (Cascading Style Sheets) : HTML로 작성된 웹 문서를 꾸미기 위한 기법 1. 선택자(Selector) 란? 특정 html요소를 선택하고자 할때 사용하는 기능 , 해당 요소를 선택해서 원하는 "스타일"과 "기능"을 적용시킬 수 있음 1) 모든(전체) 선택자 : * 현재 문서상 모든 요소를 선택하고자 할때 사용 2) 태그 선택자 : 태그명 현재 문서상 해당 태그들을 다 선택하고자 할 때 사용 ( 다중선택가능) 3) 아이디 선택자: #아이디명 현재 문서상 특정 html요소 "하나"만을 선택하고자 할 때 사용 단, 해당 요소에 id속성을 이용해서 고유한 아이디값 부여해야함 아이디 선택자1 아이디 선택자2 아이디 선택자3 아이디 선택자4 HTML 삽입 미리보기할 수 없는 소스 4) ..