1.1 CSS는 무엇인가?
- CSS: 웹 페이지의 스타일(디자인, 레이아웃 등)을 정의하기 위한 언어
- Cascading Style Sheets
1.2 CSS Syntax
- Selector와 Declaration
- Selector; 선택자, 스타일 지정하고 싶은 HTML 요소 가리킴
- Declaration; 선언, 세미콜론으로 구분하고 하나 이상의 선언 표현 -> 선언 블록 { }
- Property, Property-value
1.3 CSS 선택자(Selector)
- 전체 선택자(Universal Selector)
- *
- HTML 페이지 내부의 모든 태그에 같은 CSS 속성 적용
- 주로 margin이나 padding 기본값 초기화 할 때 사용
- 태그 선택자(Type Selector)
- HTML 요소 직접 지정하는 가장 간단한 형태의 선택자
- 태그 이름을 선택자로 사용
- 클래스 선택자(Class Selector)
- 선언된 선택자명과 동일한 이름의 태그의 class 속성에 할당된 속성 값과 비교해서 HTML 요소 선택
- 이름 앞에 . 붙임
- ID 선택자(ID Selector)
- 선택자 이름 앞에 # 붙임
- HTML 문서 내에 모든 요소에서 id 속성 값이 일치하는 요소를 찾고 선언된 디자인 적용
- 하나의 웹페이지에 유일한 값
- 하나의 웹페이지에서 하나의 요소에만 CSS를 적용할 때 사용
- 복합 선택자(Combinator Selector)
- 두 개 이상의 선택자 요소 같이 적용한 선택자
- 하위 선택자(Descendant Selector)
- 부모 선택자 하위에 있는 모든 자손 선택자들을 찾아서 스타일 적용
- 공백으로 분리해서 정의
- 자식 선택자(Child Selector)
- 부모 선택자 아래 직계 자식 선택자에만 스타일 적용 (자손까지는 적용 안됨)
- > 를 사용해서 정의
- 인접 형제 선택자(Adjacent Sibling Selector)
- 같은 레벨에 있는 자식 요소 중 나란히 붙어 있는 (인접한) 형제 요소의 조건 충족할 때 스타일 적용 (바로 옆 요소만 적용)
- + 사용해서 정의
- 일반 형제 선택자(General Sibling Selector)
- 조건을 충족하는 모든 동생 요소에 스타일 적용
- ~ 사용해서 정의
- 속성 선택자(Attribute Selector)
- 태그 안에 작성된 특정 속성의 값을 활용해서 스타일 적용하는 선택자
- 패턴
- E[attr]
- attr 속성이 포함된 요소(E) 선택
- E[attr="val"]
- attr 속성의 값이 정확하게 "val"과 일치하는 요소 선택
- E[attr~="val"]
- attr 속성의 값에 "val"이 포함되는 요소 선택 (공백으로 분리된 값 일치)
- E[attr^="val"]
- attr 속성의 값이 "val"으로 시작하는 요소 선택
- E[attr$="val"]
- attr 속성의 값이 "val"으로 끝나는 요소 선택
- E[attr*="val"]
- attr 속성의 값에 "val"이 포함되는 요소 선택
- E[attr|="val"]
- attr 속성의 값이 정확하게 "val" 이거나 "val"로 시작되는 요소 선택
- 가상 클래스 선택자(Pseudo-Class Selector)
- 특정 요소에 마우스가 포커스 되거나, 버튼 위에 마우스가 위치 되거나 하는 등 사용자의 이벤트에 대한 스타일 지정
- :link
- 방문한 적이 없는 링크
- :visited
- 방문한 적이 있는 링크
- :hover
- 마우스를 롤오버 했을 때
- :active
- 마우스를 클릭했을 때
- :focus
- 마우스가 포커스 되었을 때 (input 태그 등)
- :first
- 첫 번째 요소
- :last
- 마지막 요소
- :first-child
- 첫 번째 자식
- :last-child
- 마지막 자식
- :nth-child(2n + 1)
- 홀수 번째 자식
1.4 적용 방법
- Inline CSS
- 태그에 style 속성 사용해서 직접 적용
- Internal CSS
- HTML 페이지의 <head> 태그 안에 <style> 태그에 작성
- External CSS
- 스타일 작성을 확장자가 .css인 별도의 외부 파일로 작성하고,
HTML 페이지에서는 css 파일을 삽입해서 사용하는 방법
- Cascading 순서
- 인라인 스타일 - internal css, external css 중 HTML 페이지에 순서 상 나중에 작성된 스타일
1.5 CSS 주석 처리
- /* */
[Reference]
'Books > CSS Basic ✔️' 카테고리의 다른 글
| [웹 개발 입문 - CSS] 3장 - CSS Responsive (마지막) (0) | 2022.02.15 |
|---|---|
| [웹 개발 입문 - CSS] 2장 - CSS Property (0) | 2022.02.15 |
댓글