::public/HTML & CSS(SCSS)40 CSS - 속성 선택자 ATTR [attr] / 속성 attr 을 포함한 요소 선택. ATTR=VALUE [attr=value] / 속성 attr 을 포함하며 속성값이 value 인 요소 선택. ATTR^=VALUE [attr^=value] / 속성 attr 을 포함하며 속성값이 value로 시작하는 요소 선택. ATTR$=VALUE [attr$=value] / 속성 attr 을 포함하며 속성값이 value로 끝나는 요소 선택. 2021. 4. 1. CSS - 가상요소 선택자 BEFORE E::before / E 요소 내부의 앞에 내용(content)을 삽입. *반드시 "content" 를 기입해야 함. AFTER E::after / E 요소 내부의 뒤에 내용(Contents)을 삽입. *반드시 "content" 를 기입해야 함. 2021. 4. 1. CSS - 가상클래스 선택자 HOVER E:hover / E 에 마우스(포인터)가 올라가 있는 동안에만 E 선택. ACTIVE E:active / E 를 마우스로 클릭하는 동안에만 E 선택. FOCUS E:focus / E 가 포커스 된 동안에만 E 선택.(대화형 컨텐츠만 가능) - FIRST CHILD E:first-child / E 가 형제 요소 중 첫번째 요소라면 선택. LAST CHILD E:last-child / E 가 형제 요소 중 마지막 요소라면 선택. /* fruits 후손들 중에 첫번째 li를 찾는다 */ .fruits li:first-child { color: red; } /* fruits 후손들 중에 마지막 li를 찾는다 */ .fruits li:last-child { color: red; } cs 사과 딸기 오.. 2021. 3. 31. CSS - 복합 선택자 [복합 선택자] 일치 선택자(Basic Combinator) ; EF / E 와 F 를 동시에 만족하는 요소 선택. /* span 중에 orange 클래스를 가진 요소를 찾는다 */ span.orange { color: red; } Colored by Color Scripter cs 사과 딸기 오렌지 당근 토마토 오렌지 Colored by Color Scripter cs 자식 선택자(Child Combinator) ; E(>)F / E 의 자식 요소 F 를 선택. /* ul 의 자식 요소 중에 orange 클래스를 가진 요소를 찾는다 */ ul > .orange { color: red; } Colored by Color Scripter cs 사과 딸기 오렌지 당근 토마토 오렌지 Colored by Col.. 2021. 3. 31. CSS - 기본 선택자 [기본 선택자] 전체 선택자(Universal Selector) ; (*) / (요소 내부의) 모든 요소를 선택. 태그 선택자(Type Selector) ; (E) / 태그 이름이 Element인 요소를 선택. 클래스 선택자(Class Selector) ; (.) / HTML class 속성의 값이 Element인 요소를 선택. 아이디 선택자(ID Selector) ; (#) / HTML id 속성의 값이 Element인 요소를 선택. /* 전체 선택자(Universal Selector) */ * { color: red; } /* 태그 선택자(Type Selector) */ li { color: red; } /* 클래스 선택자(Class Selector) */ .orange { color: red; } .. 2021. 3. 31. CSS - 기본 문법, 선언 방식 [기본 문법] 선택자 { 속성: 값; 속성: 값; } div { width: 100px; height: 100px; background: red; } cs [선언 방식] 인라인(in-line) 방식 ; HTML요소(태그)의 style 속성에 직접 작성하는 방식. Inline cs 내장(embedded) 방식 ; HTML 안에 작성하는 방식. div { width: 100px; color: red; } Embedded cs 링크(link) 방식 ; HTML 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식. Link Colored by Color Scripter cs @import 방식 ; CSS @import 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식. 동기화 형태로 로딩됨(직렬). I.. 2021. 3. 30. 이전 1 2 3 4 5 6 7 다음
