반응형

전체 글 721

CSS 선택자_복합

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

CSS 선택자_기본

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

CSS 선언 방식 4가지

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

반응형