나의 개발일지

상속이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다 * 각 속성마다 상속이 되는 것과 상속이 되지 않는 것이 있다 상속이 되는 속성 : color, font-family, font-size, font-weight, text-align, cursor 등 상속이 되지 않는 속성 : background-color, background-image, background-repeat, border, display 등 * 공용키워드 모든 css 속성에 사용 가능한 키워드가 있다. 전역값이라 표현하기도 한다 키워드 의미 inherit 상위 요소로부터 해당 속성의 값을 받아 사용한다 initial (브라우저에 지정되어 있는) 해당 속성의 기본값을 요소에 적용한다 unset 상속 속성에 대해서는 in..

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

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