CSS( : Cascading Style Sheets )
>> rel="stylesheet"
풀스택이 되려면 css는 절대 간과해서는 안된다.
css기본기는 정말 중요하고 절대 간단하지 않은 분야이다.
HTML에 CSS를 적용하는 법 3가지.
1. html파일 내에서 style태그 이용.
2. html 각 태그 내에 개별적으로 style속성 활용.
3. css파일을 따로 만들어 link태그로 연결 (주로 head에).
css 문법은 (1,3의 경우)
선택자 {
속성(property): 속성 값(value);
}
의 나열로 구성된다.
즉, 특정 HTML 요소를 선택자로 지정한 후, 해당 요소에 속성집합을 적용하는 방식이다.
선택자 덩어리를 ,대신 줄바꿈으로 구분하고 괄호 내 속성끼리는 ;로 구분한다. 즉, 각 속성은 ;로 끝난다.
(json형식 아닌 그냥 독립적인 스타일 정의 언어이다.)
style 속성을 사용하는 2의 경우 선택자는 필요 없으니 그냥 괄호 내의 속성과 값만 ;로 구분하여 바로 작성한다.
선택자에 활용되는 건 기본적으로 . / # / 태그명 이 있다.
해당 요소에 id나 class가 부여되어 있다면 각각 #id명과 .클리스명을 통해 호출할 수 있고 그게 아니라면 태그명 자체를 써도 된다.
모든 요소에 적용하고자 한다면 *도 활용할 수 있다.
중요한 점은 선택자{속성집합}이 나열되어 있는데, 그중 어떤 html요소를 여러 선택자가 지칭하고 있다면
세세한(id > class > 태그명) 지칭일수록, 파일 뒤에서 지칭했을 수록
우선순위가 적용되어 해당 속성을 적용하게 된다.
선택자 심화
- 복합 클래스
요소에 여러 클래스가 할당된 경우, 각각의 클래스 선택자가 해당 요소를 지칭한다.
예: <div class="name1 name2"> -> .name1, .name2 모두 해당. - 속성 선택자
특정 속성을 가진 요소를 선택할 수 있다
[속성명] /* 해당 속성을 가진 모든 요소 */
속성을 class로 가정하고 속성 선택자 내에 사용가능한 연산자들을 추가로 살펴보면,
[class = "c1"] >> .c1과 같은 의미
[class *= "c1"] >> 클래스명에 c1을 포함하는 태그들
[class ^= "c1"] >> 클래스명이 c1으로 시작하는 태그들
[class $= "c1"] >> 클래스명이 c1으로 끝나는 태그들
이 있다. (sql의 like나 언어에서 정규식같은 개념에도 비슷한거 있음) - 결합 선택자
B를 지칭하는 건 맞지만 요소 간의 관계(자손/형제)의미를 첨가할 수 있다.- A B: A 안의 모든 B
- A > B: A 바로 아래의 B
- A ~ B: A 다음의 B (형제 요소)
- A + B: A 바로 다음의 B (형제 요소)
- 의사 클래스 & 의사 요소
선택자 뒤에 세트처럼 붙힐 수 있는 키워드들- :의사클래스: 지칭 요소가 해당 상태가 되었을 때 속성을 적용.
(상태키워드: hover, focus, nth-child() 등) - ::의사요소: 지칭 요소의 특정 부분에만 속성을 적용.
(부분키워드: before, after, first-letter, first-line, before, after 등)
- :의사클래스: 지칭 요소가 해당 상태가 되었을 때 속성을 적용.
nth-child()는 의사 클래스로써 형제관계로 나열된 요소 중 해당 순번의 태그를 지칭하도록 숫자나 n을 활용한 인자를 동적으로 받는다.
:nth-child(2) /* 두 번째 요소 */
:nth-child(2n) /* 짝수 번째 요소 */
:nth-child(2n+1) /* 홀수 번째 요소 */