728x90 반응형 CSS12 CSS 가상 선택자, 가상 요소 pseudo selector -> 현재 존재하지 않는 구조 -> 특정 요소의 상태를 미리 추정 가상 클래스 ( pseudo class ) -> 미리 정의해놓은 상황에 적용이 되도록, 보이지 않는 클래스 정의되어있는 가상 클래스 -> https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 문서 구조와 관련된 가상 클래스 -> first-child : 첫 번쨰 자식 요소, last-child : 마지막 자식 요소 링크 가상 클래스 -> link : 아직 방문하지 않은 링크, visited:방문한 링크 사용자 동작 관련 가상 클래스 -> focus: 입력 포커스를 갖는 요소에 적용 -> hover: 마우스 포인터가 위치해 있는 요소에 적용 -> active.. 2021. 1. 10. CSS 문서 구조를 이용한 선택자 자손 선택자 ex) div span {} -> 요소의 자손을 찾을 때 -> 공백으로 구분 자식 선택자 ex) div > span {} -> 요소의 자식 요소만 선택 -> > 기호로 구분 인접 형제 선택자 ex) div + span {} -> 인접한 형제 요소만 선택 ( 떨어져 있으면 적용이 되지 않음 ) -> 세 선택자를 조합하여 사용할 수 있음 2021. 1. 10. CSS 선택자 선택자 -> 요소 선택자 tag명 { } 로 사용 -> id 선택자 #id명 { }로 사용 -> class 선택자 .class명 { }로 사용 -> 속성 선택자 단순 속성 - tag[속성명] { } 로 사용 속성 값으로 사용 - tag[속성명="속성"] { } 로 사용 부분 속성 값 사용 - tag[속성명~^$*="속성"] -> '~' 속성 값이 공백으로 구분되고 "속성"이 포함된 -> '^' 속성 값이 "속성"으로 시작되는 요소 -> '$' 속성 값이 "속성"으로 끝나는 요소 -> '*' 속성 값이 "속성" 문자를 포함 2021. 1. 10. CSS 이해하기 & 문법 Cascading Style sheets HTML(마크업 언어)를 꾸며주는 언어 html을 디자인하는 언어 CSS 문법 선택자 속성 값 선언 선언부 규칙 h1 {color:yellow; font-size:2em;} h1 - 선택자 (selector) color - 속성 (property) yellow - 값 (value) 속성과 값을 묶어서 선언(declaration)이라고 부른다 각 선언은 세미콜론 ( ; )으로 구분 선언을 포함하는 중괄호 부분을 선언부(declaration block) 라고 부른다 이 전부를 규칙 (rule set)이라고 부른다 주석 -> /* 내용 */ CSS 적용방식 inline -> 하나의 html 태그 내에 style 속성으로 바로 적용 internal -> html head.. 2021. 1. 10. 이전 1 2 3 다음 728x90 반응형