반응형 선택자4 📌 CSS 가상 선택자와 기타 요소 정리! 사용자 동작에 반응하는 가상 클래스 :link - 방문하지 않은 링크에 스타일 적용 기본적으로 a 태그에서는 파란 글자와 밑줄 적용 이를 바꿀 수 있음 :visited - 방문한 링크에 스타일 적용 기본적으로 a 태그에서는 보라 글자와 밑줄 적용 이를 바꿀 수 있음 :hover - 웹 요소에 마우스 커서를 올려 놓을 때의 스타일 적용 롤오버 효과(rollover), 스포일러 :active - 웹 요소를 활성화했을 때의 스타일 적용 누르고 있을 때의 스타일을 지정(링크 클릭) :focus - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용 아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 갖다 놓거나 tap을 눌러 초점을 이동했을 때의 스타일을 지정 ⭐ 정의 순서 무조건 link visited hove.. 2022. 9. 21. 📌 CSS 속성 선택자 정리! 특정한 속성을 사용한 요소에 스타일을 적용 태그[속성] 특정한 속성을 사용한 요소에 스타일을 적용 특정 값을 갖는 속성에 스타일 적용 [속성=값] 정확한 값만을 허용 여러 값 중 특정 값이 "포함"된 속성에 스타일 적용 [속성~=값] 띄어쓰기로 구분된 특정 단어가 있는 경우 예) [class~="button"] 의 경우에는 "flat button" 은 선택됨 "flat-button" 이나 "buttons" 는 포함 안 됨 특정 값이 포함된 속성에 스타일 적용하기 [속성 |=값] 하이픈 포함 단어별. 띄어쓰기나 하이픈으로 나뉜 단어를 체크. 🐍 보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용 예) [class|="button"] 의 경우에는 "flat button" "flat-.. 2022. 9. 21. 📌 CSS 연결 선택자 정리! 하위 선택자 : 모든 하위요소에 스타일 적용 상위요소 하위요소 지정한 모든 하위 요소에 스타일 적용하기. 자손 선택자 자식 뿐만이 아니라 손자, 손자의 손자까지 모두 적용된다 자식 선택자 : 직계 자식 요소에만 스타일 적용 상위요소>하위요소 직계 자식 요소에게만 적용 인접 형제 선택자 : 가장 가까운 형제 요소에 스타일 적용 요소 1+요소 2 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소 가장 첫 번째 동생 요소에만 스타일이 적용 형제 선택자 : 모든 형제 요소에 스타일 적용 요소 1~요소 2 모든 형제 요소에 적용됨 예시 📥입력 다음은 제 자기소개입니다! 할 줄 아는 언어 파이썬 자바스크립트 SQL 운영중인 블로그 주제 디스코드 프로그래밍 학습과 교육 퍼즐 게임 📤출력 위와 같은 예시가.. 2022. 9. 21. 📌 CSS의 기본적인 주요 선택자! CSS 선택자는 스타일을 적용시킬 대상을 선택한다. 선택자는 섞어서 이용할 수 있다. 전체 선택자 : * * { margin : 0 0 0 0; padding : 0 0 0 0; } 문서의 여백이나 글꼴 크기 등 기본 스타일링을 초기화 할 때 🐍 주로 바깥 여백 마진(margin), 안쪽 여백 패딩(padding) 초기화시 사용 태그 선택자 : 태그명 h1 { font-weight: 300; font-size: 2.125em; color: #fff; } 특정 태그에만 적용시킴 class 선택자 : .class명 .class-name { font-weight: 300; font-size: 2.125em; color: #fff; } html 태그에서 방식으로 속성으로 설정 이 후 CSS에서 .클래스-이름 으.. 2022. 9. 21. 이전 1 다음 반응형
