이자다의 기록

아래의 코드가 html 파일에 작성됐다고 가정한다. 딸기 수박 오렌지 망고 사과 1. first-child ABC:first-child 형태로 작성한다. 선택자 ABC가 형제 요소 중 첫째라면 선택한다. .fruits span:first-child 라고 작성하면 span 요소 중 첫째인 '딸기'를 선택한다. .fruits 클래스를 가진 선택자와 그 하위 선택자인 span의 조건을 충족하는 요소 중 '딸기'가 조건에 부합한다. .fruits div:first-child 라고 작성하면 아무것도 선택하지 못한다. fruits 클래스를 가진 div태그의 형제들 중 하위 선택자div는 첫째가 아니고, 때문에 첫째를 선택하는 first-child는 작동하지 않는다. 이때 처음 공부하면 오해할 수 있는게, .frui..

CSS 선택자는 앞에서부터 읽어나가는 게 아니라 뒤부터 읽어나가는 게 좀 더 직관적이고 알아먹기 편하다. input:focus, a:active 처럼 짧다면 문제가 없지만 .fruits span:first-child 같이 하위 선택자도 선택하게 된다면 선택자를 오해할 수 있다. 위의 선택자는 .fruits 선택자의 하위 선택자 span을 만족하는 요소가 형제 요소 중 첫째라면 선택하고, 아니라면 선택하지 않는 선택자이지만 앞에서부터 읽어 나간다면 .fruits 선택자의 하위 선택자 span 요소 중 첫째를 선택하는, span 요소 중에 형제 요소 중 첫째인 선택자가 없더라도 span 요소의 첫째를 선택하는 선택자라고 오해할 수 있다. 뒤에서부터 읽는다면 형제 요소들 중 첫번째 요소를 고르는데 조건이 .f..

CSS의 가상 클래스(의사 클래스)는 선택자에 추가하는 키워드이다. 1. hover a:hover { color: red; } 처럼 사용. a는 선택자(태그, 클래스 선택자 등 여부 상관 없음) 태그 옆에 :hover 를 붙여서 사용. 선택자 a 요소에 마우스 커서가 올라가 있는 동안 활성화. 2. active a:active { color: red; } 선택자 a 요소에 마우스를 클릭하고 있는 동안에 활성화. 3. focus 포커스가 될 수 있는 요소는 몇가지로 정해져 있다. 대표적으로 input 요소가 그렇고 그 외에도 사용자에게 정보를 입력받는 'html 대화형 콘텐츠'가 해당한다. INPUT, A, BUTTON, LABEL, SELECT 등 여러 요소가 있다. 그리고 html 대화형 콘텐츠 요소가..

1. 일치 선택자(Basic Combinator) 제시한 선택자 두 개를 동시에 만족하는 요소를 선택함. span.orange { color: red; } 이렇게 작성하면 제시된 선택자는 span 태그와 orange 클래스이고 이 두개를 만족하는 요소를 선택하게 된다. 오렌지 과 같이 작성된 요소를 선택한다. 따로 사용하는 기호가 없기에 .orangespan 처럼 작성하면 orangespan이라는 클래스를 찾게 된다. 태그 선택자와 클래스 선택자를 같이 찾고 싶다면 클래스 선택자를 앞으로 보내야한다. 2. 자식 선택자(Child Combinator) ABC > XYZ 라고 작성한다면 선택자 ABC의 자식 요소 XYZ를 선택한다. 좀 더 특정한 요소를 선택할 수 있는 선택자. ul > .orange { c..

1. * 전체 선택자(Universal Selector). 모든 요소를 선택한다. * { color: red; } 이렇게 작성하면 연결된 html의 모든 태그를 선택해 내용을 적용한다. 2. 태그 이름 태그 선택자(Type Selector). 태그 이름을 작성해 선택한다. 태그 이름으로 선택하는 선택자. li { color: red; } 이렇게 작성하면 태그 이름이 인 요소들을 선택한다. 태그 선택자는 태그의 종류가 모든 요소를 구분할만큼 고유한 것들이 아니기 때문에 좀 더 세세하게 구별 가능한 클래스 선택자를 사용한다. 3. .클래스 이름 클래스 선택자(Class Selector). '.abc' 형태로 작성한다. 마침표( . ) + 클래스 이름 html class 속성의 값이 abc인 요소를 선택한다...

1. 내장 방식 태그 내부의 내용으로 스타일을 작성하는 방식 2. 인라인 방식 이렇게 요소의 style속성에 직접 스타일을 작성하는 방식 3. 링크 방식 로 외부CSS 문서를 가져와서 html 파일에 연결하는 방식. 처럼 작성한다. 한 html 파일에 여러 link로 연결 가능해서 병렬 방식이라고 볼 수 있다. 4. @import 방식 'CSS 문서 안에서' CSS의 @import 규칙으로 또 다른 CSS 문서를 가져와서 연결하는 방식이다. 링크 방식처럼 html 파일에 연결하는 방식이 아니라, html 파일에 연결된 CSS 파일에 @import를 작성해 다른 CSS 파일을 연결하는 방식이다. html