728x90

css 5

[CSS] 결합자

* 자식 결합자 * - 자식 결합자(Child Combinator)는 어떠한 부모 선택자에 대한 자식을 선택하기 위해 사용하는 결합자이다. - 다음과 같이 작성한다. ("는 없는 것으로 한다.) "어떠한 부모 선택자" > "자식 선택자" { "속성" : "속성 값"; "속성" : "속성 값"; "속성" : "속성 값"; } * 자손 결합자 * - 자손 결합자(Descendant Combinator)는 어떠한 부모 선택자에 대한 자손을 선택하기 위해 사용하는 결합자이다. - 다음과 같이 작성한다. ("는 없는 것으로 한다.) "어떠한 부모 선택자" "자손 선택자" { "속성" : "속성 값"; "속성" : "속성 값"; "속성" : "속성 값"; } * 일반 형제 결합자 * - 일반 형제 결합자(Gener..

HTML | CSS 2023.01.31

[CSS] 선택자 모음

* ID 선택자 * - ID 선택자(ID Selector)는 CSS 속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 아이디의 이름을 활용하되, 그 이름 앞에 샾(#)을 붙인다. - 다음과 같이 작성한다. ("는 없는 것으로 한다.) "#아이디 이름" { "속성" : "속성 값"; "속성" : "속성 값"; "속성" : "속성 값"; } - CSS 스타일을 주기 위해 ID를 부여하는 것은 추 후에 ID가 겹칠 가능성을 제공함으로 사용을 자제한다. * 클래스 선택자 * - 클래스 선택자(Class Selector)는 CSS 속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 클래스의 이름을 활용하되, 그 이름 앞에 마침표(.)를 붙인다. - 다음과..

HTML | CSS 2023.01.31

[CSS] 속성 모음

* z-index 속성 * - 요소를 화면에 표시할 순서를 정한다. - 값은 0(기본값)이상의 자연수로 표시한다. - 값이 클수록 다른 요소에 의해 가려지지 않고 화면에 표시된다. - 용법 ... { z-index: [0~?]; } - 값이 같다면 보다 뒤에 만들어진 요소가 위로 올라오게 된다. - position 속성 값이 static 이라면 무시된다. * width 및 height 속성 * - width는 가로크기를, height는 세로크기를 지정하기 위해 사용한다. - 단, display가 inline인 요소(span, a 등)는 그 display 값을 다른 것으로 변경하기 전에는 width 및 height 속성이 적용되지 않는다. * transition-duration 속성 * - 어떠한 요소에 ..

HTML | CSS 2023.01.31

[CSS] 의사클래스 모음

* Not 의사 클래스 * - Not 의사 클래스(Pseudo Class)는 다른 의사 클래스를 부정하기 위해 사용한다. - 다음과 같이 작성한다. ("는 없는 것으로 한다.) "선택자":not(:"다른 의사 클래스") { "속성" : "속성 값"; "속성" : "속성 값"; "속성" : "속성 값"; } - 가령, 마지막 요소가 아닌 모든 요소는 다음과 같이 선택한다. *:not(:last-child) { . . . } * Hover 의사 클래스 * - Hover 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소에 마우스가 올라가 있는 상태(Mouse Hover)일 때에 대한 선택자이다. - 다음과 같이 작성한다. ("는 없는 것으로 한다.) "선택자":hover { "속성" :..

HTML | CSS 2023.01.31
728x90