나의 개발일지

의사클래스(가상클래스)는 선택자에 추가하는 키워드로 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다 선택자:의사클래스 { 속성명: 속성값; } 의사클래스 의미 hover 마우스 포인터가 요소에 올라가 있을 때 속성값이 변경된다 active 사용자가 요소를 활성화했다 (ex. 마우스 클릭) focus 요소가 포커스를 받고 있다 disabled 비활성 상태의 요소이다 nth-child() 형제 사이에서의 순서에 따라 요소를 선택한 hover / active focus / disabled disabled nth-child() 1번 2번 3번 4번 5번 만약 여기서 3번 박스의 색깔만 바꾸고 싶다면? () : 괄호 안에 숫자를 써서 바꿔준다 (n) : 양의 정수가 들어가서 모든 박스의 색깔이 ..

의사요소 : 의사요소(pseudo-elements)는 선택자에 추가하는 키워드 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다 선택자::의사요소 { 속성명: 속성값; } 의사요소 의미 after 요소의 앞에 의사 요소를 생성 및 추가 before 요소의 뒤에 의사 요소를 생성 및 추가 first-line 블록 레벨 요소의 첫 번째 선에 스타일을 적용 marker 목록 기호의 스타일을 적용 placeholder 입력 요소의 플레이스홀더(자리표시자)스타일을 적용 first-line / first-letter 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 marker 강아지 고양이 다람쥐 햄..

선택자의 종류 · 기본 선택자 · 그룹 선택자 · 특성 선택자 · 결합 선택자 · 의사 클래스 · 의사 요소 특성선택자 특성선택자(속성선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다 [class *="it"] {color: white;} → 클래스 값에 "it"이 포함되는 요소 선택하기 [class ^="it"] {color: white;} → 클래스 값에 "it"으로 시작하는 요소 선택하기 [class $="it"] {color: white;} → 클래스 값에 "it"으로 끝나는 요소 선택하기 코드 세팅 선택자 연습 태그 두번째 문단 세번째 문단 네번째 문단 다섯번째 문단 스판태그 class를 가지고 있는 태그, id를 가지고 있는 태그 속성 변경하기 선택자 연습 태그 두번째 문단 ..

background 배경은 콘텐츠의 배경을 정의한다 단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있다 하위 속성 역할 background-color 배경 색을 정의한다 background-image 배경 이미지를 정의한다 background-position 배경 이미지의 초기 위치를 정의한다 background-size 배경 이미지의 크기를 정의한다 background-repeat 배경 이미지의 반복 방법을 정의한다 배경색 바꾸기 background-color happy 배경 이미지 바꾸기 및 사이즈 설정 background-image / background-size happy 배경이미지를 꽉 채우고 싶다면? background-size: cover; cover 속성은 이미지의..