Selector 3

CSS(7) form 관련 가상 선택자

:enabled / :disabled 활성화 / 비활성화 상태일 때 아이디 input:enabled { border: 1px solid royalblue; } :read-only / :read-write 사용자가 편집할수 없는 / 있는 상태일 때 :checked input type="checkbox, radio" 유형일때 선택된 상태를 나타냄 약관동의 /* input이 체크되면 input 바로 다음에 오는 형제 요소 lable에 줄이 쳐짐 */ input:checked+label{ text-decoration: line-through; } :required 필수입력값일 경우 ::placeholder 입력에 대한 추가 정보가 있을 경우 /* 이곳은 input입니다 의 글자색이 빨간색으로 변경 */ inpu..

HTML&CSS/CSS 2023.08.20

CSS(4) 선택자 우선순위

CSS 언어 충돌시 어떤 것을 우선하는지 규칙 이러한 규칙을 계단식(Cascade) 및 우선 순위(Specificity) 라고 함 1. 후자 우선의 원칙 2. 구체성(명시도)의 원칙 3. 중요성의 원칙 1. 후자 우선의 원칙 동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따름 p {color: red; font-size:20px;} p {color: blue;} /* 뒤에 나온 파란색이 됨 */ 2. 구체성의 원칙 (Specificity : 명시도) 어떤 선택자가 더 구체적인가? 구체적인 선택자 .green{color:green;} p {color: red; font-size:20px;} p {color: blue;} /* 구체적인 class 선택자에 따라 초록색 */ (가중치 높음) ..

HTML&CSS/CSS 2023.08.19

CSS(3) 선택자

전체 선택자 universal selector html을 포함한 HTML 문서 내의 모든 요소를 선택 *를 사용하여 선택 *{ margin: 0; } 타입 / 유형 / 태그 선택자 type selector 특정 태그를 선택 h1{ font-weight: bold; } p{ font-size: 24px; } 아이디 선택자 (#) id selector 주의) HTML 페이지 내의 id는 유일해야 함 HTML 안에서 한 번만 사용되기 때문에 재사용성은 떨어짐 아이디 속성은 JavaScript 또는 해시 링크와 함께 사용되는 경우가 많음 ... #hhddrr{ padding: 10px; } 클래스 선택자 ( . ) class selector 클래스 선택자는 한 페이지에 여러 개가 존재 가능 재사용성 높음 Hel..

HTML&CSS/CSS 2023.08.19