- id 선택자 : 중복되서는 안 된다. 유일무이
- 클래스 선택자 : 중간 우선순위
- 태그 선택자 : 전체 디자인
우선순위 : id (구체적) > 클래스 > 태그 (포괄적)
- block level element : 화면 전체 태그 (div 태그)
- inline element : 자신의 content 크기 태그 (span 태그)
- 블록 레벨이여도 inline으로 가능
ex. display : inline;
- 태그 안 보이게 감추기
ex. display : none;
- 기본 값은 css 통해 변경 가능
- div : 무색 무취와 같은 태그 , division의 약자
디자인 목적 위해 어떤 의미도 없는 태그를 사용할 때의 디자인의 용도
- 최신 기술 : grid
두 개의 태그를 감싸는 부모가 필요
ex. display : grid;
grid - template ~ columns(열) : 150px 1fr;
row(행)
- grid 장점 : 텍스트 많아져도 자동으로 사이즈가 커짐
- caniuse.com 사이트 : 최신 css 기능 사용을 위해 현재 사용 가능하지 판단하기 위해 데이터에 의해 근거해야 함
현재 웹 브라우저들이 얼마나 그 기술을 채택하고 있는가를 통계냄
- 반응형 웹, 디자인 : 화면의 크기에 따라 웹페에지의 각 요소들이 반응해서 최적화 된 모양으로 바뀌게 하는 것
- 미디어 쿼리 : 반응형 디자인을 css로 통해 구현하는 핵심적인 개념
@media(max-width:800px){
div {
display: none;
}
}
- CSS를 배우면서 알게 된 것
- 속성 많이 알수록 더 풍부한 표현 가능
- 선택자, 속성을 더 정확히 표현 가능
결론은 속성과 선택자는 css를 지탱하는 뿌리 !