반응형 CSS13 CSS 가상 선택자2(:first-child, :last-child, :nth-child(2n+1)) ● 가상 선택자 ★ 의사 클래스 선택자(pseudo-class) - 요소의 특수한 상태를 정의하는데 사용 - 예를 들어, 링크 요소에 마우스가 올라갔을 때, 내려올 때 등. ☆ :first-child : 첫번째 ☆ :last-child : 마지막 ☆ :nth-child(2n+1) : even: 짝수번째, odd: 홀수번째 요소선택 2n: 2의 배수, 3n: 3의 배수로 요소 선택 ★ peseudo_class_selector.html★ 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 2023. 5. 16. CSS 가상 선택자1(:link, :visited, :hover, :active, :focus) ● Selector(선택자) ★ 의사 클래스 선택자(pseudo-class) - 요소의 특수한 상태를 정의하는데 사용 - 예를 들어, 링크 요소에 마우스가 올라갔을 때, 내려올 때 등. ※ 종류 ☆ :link - 링크가 연결된 요소의 스타일 설정. ☆ :visited - 방문한 페이지와 연결된 링크 요소의 스타일 설정. ☆ :hover - 요소의 영역 위에 마우스가 들어가면(위치하면) 보이는 스타일 설정. ☆ :active - 요소를 클릭할 때의 스타일 설정. ☆ :focus - 입력 요소(input 태그 등)가 포커스를 가질 때의 스타일 설정. ★ pseudo_class_selector.html ★ 다음카카오 마우스를 올리세요. 이게 보이나요? 포커스를 가지면 변합니다. 2023. 5. 16. CSS 기본 선택자('*', '태그', '.', '#', '[속성]') ● Selector(선택자) ★ 기본 선택자 ☆ * : 전체 선택자. 모든 요소를 선택. 모든 요소에 적용 .(html, body 포함) ☆ 태그(타입) : 지정 태그 요소를 선택. ☆ . : 클래스 선택자. 지정한 클래스 요소를 선택. ☆ # : id 선택자. 지정한 id 요소를 선택.(id 속성) ☆ [속성] : 속성 선택자. 지정한 속성 또는 '속성=값'으로 요소를 선택. ★ universal_selector.html ★ 전체 선택자 영어로 Universal Selector. 모두 같은 색상, 같은 크기 문서의 모든 요소를 선택하여 스타일을 적용 ★ type_selector.html ★ Type Selector(h1) Type Selector(h2) Type Selector(h3) Type Sele.. 2023. 5. 4. CSS 적용(인라인, 내부, 외부 스타일시트) - CSS-day-01 ● CSS3 ★ CSS는 HTML 문서의 스타일을 지정하는데 사용하는 언어입니다. ★ Cascading Style Sheets ★ 문법(구문) Selector {Property:Value; Property:Value; ... } ★ Selector(선택자, 선택기) : html 문서의 요소 선택. ★ Property : 요소에 적용할 스타일 속성. ★ Value : 해당 속성의 값. ★ CSS 작성 위치 ☆ 태그의 style 속성에 작성.(인라인 스타일) ☆ ㅉ저 인라인 스타일 시트 적용 내부 스타일 시트 적용 외부 스타일 시트 적용 ☆ external.css ☆ @charset "UTF-8"; /* 브라우저 전체 영역 사용 */ * { padding: 0; margin: 0; } p3 { col.. 2023. 5. 4. 이전 1 2 다음 반응형
