[Web][CSS]Media query 미디어 쿼리와 css선택자 우선 순위
1.미디어쿼리 media query
미디어 쿼리는 사용자의 단말기의 유형이나 특성 수치등에 따라 웹 사이트나 앱의 스타일을 수정하는 것이다.
특정 조건에 속할 때 다른 스타일을 적용하는 것이다.
그러니까 @을 사용해서 주로@medaia , @import을 사용해서 스타일을 바꾸거나
자바스립트에서 미디어 상태를 판별할 때
html요소중 특정매체만 사용할 때 사용한다.
and, not, only등의 논리 연산자를 함께 쓸수 있다.
가장 대표적인 예로 화면의 크기에 따라 설정을 바꿔보자
화면의 크기가 800px보다 크고 1000px보다 작을 때 h1의 색이 orange로바뀐다.
2. 코드리팩토링하기
중복되는 코드 정리하기
- 거의 모든 코드가 중복이라면 전체 *{}나 body{}로 설정하고 특정 코드만 클래스 설정해서 수정하기
- div클래스 지정해서 기존클래스에 추가하기
- div클래스 지정해서 기존클래스 상위로 한번 감싸기
- 중간 중간 검사하면서 값 수정하기
3.우선순위
- 요소 < 클래스 < 특정한 요소의 class< id < inline < !important
- 만일 클래스의 속성을 버리고 싶지않은데 수정하고 싶을 때는
=>계층 선택자(hierarchical selectors) 부모 자식{}
#id어쩌구 .클래스저쩌구 {} (id 어쩌구가 clsss저쩌구를 감싸는 상위) 어쩌구: 부모 /저쩌구: 자식
id어쩌구 안에 있는 저쩌구class만 설정
- 결합 선택자(combined selectors) : 어쩌구.저쩌구{} 같은 요소에서만 작용한다.
요소1.#id어쩌구or요소1.calss저쩌구(요소1 중에 id가 어쩌구 혹은 class가 저쩌구인 요소1의 속성만 설정)