□ CSS
○ html 문서의 스타일을 꾸밀때 사용하는 스타일 시트 언어. 유지보수의 편의성과 재사용성을 위해 사용함.
-- 정보표현 : HTML
디자인 : CSS
-- css의 기본구조
선택자 | 선언
h1 {
color:red;
}
선택자란 무엇을 디자인할 것인가? 를 말함
-- 다양한 종류들
• font-family: '나눔고딕', '맑은고딕';
우선순위에 따른 글씨체 지정. 나눔고딕체가 없다면 맑은 고딕체로 바꾸라는 뜻
(h1 태그 css 실습)
○ 선택자 종류
-- 전체선택자, 태그선택자, 아이디선택자, 클래스선택자, 계층선택자
• 전체선택자
* 로 표시되며 웹문서 내 모든 요소 선택
*{
color: green;
}
• 태그선택자
태그 이름으로 표시함
li{
color: red;
}
• 클래스선택자
.클래스이름
.클래스이름{
color: black;
}
• 아이디선택자 -->> body 태그에 하나만 존재, 중복 불가능(로고, 상단메뉴, 하단정보 등에 사용)
#아이디이름
#아이디이름{
color: blue;
}
-- 계층선택자 : 특정위치의 요소를 계층적구조로 요소 선택
자손선택자 --> 띄어쓰기로 표현
자식선택자 --> >로 표현 (손아래 선택자만 선택가능)
후행선택자-->> ~로 표현 (모든 형제를 중복선택가능)
근접후행 선택자-->> +로 표현 (바로 옆 형제만 선택가능)
손자를 선택하고 싶을때
할아버지 손자 {} // 아버지 > 손자(=아들) {}
이런식으로 자손선택자와 자식선택자를 선택하는 방법이 다름
첫째와 둘째는 근접후행(근접형제)이니까
첫째+둘째 {}
첫째와 셋째는 후행(떨어진 형제)니까
첫째~셋째{}로 표현
-- 그룹선택자 : 다양한 요소들을 콤마로 구분하여 요소 선택
(ps)
사실 근전후행 선택자의 경우
중복 선택이 가능한 후행선택자와 다르게 바로 옆의 형제선택자만 선택이 가능하여
그룹선택자로 대체할 수 있는게 아닌가? 하는 의문이 생겼다.
확인해본 결과 근접후행 선택자의 경우
예를 들어 hover 선택자를 사용한다 가정했을때
이를 그룹 선택자로 묶을 경우 마우스를 올리는 반응선택자와 조건식이 동시에 진행된다.
따라서 순차적인 진행 ( 마우스를 올렸을때 -->> 조건식이 실행됨)을 사용하는 경우
근접후행선택자를 사용하는 케이스가 많다고 한다.
