CSS 우선순위와 미디어쿼리 적용 원칙

CSS 우선순위(Specificity) 기본 원칙CSS는 캐스케이딩(Cascading) 원칙을 따른다.cascade는 "a process whereby something, typically information or knowledge, is successively passed on""무언가(일반적으로 정보나 지식)가 연속적으로 전달되는 과정이"라는 의미를 가지고 있다.그런 단어의 의미처럼 캐스케이딩은 "상속과 우선순위를 포함하는 CSS의 스타일 적용 체계"라고 할 수 있다. 실제 CSS의 우선순위는 다음과 같다.!important인라인 스타일ID 선택자 (#)클래스(.)/속성([])/가상(:) 선택자요소(태그) 선택자전체 선택자(*)미디어쿼리 적용 규칙그런데 우리가 CSS를 적용하다보면 반응형 디자인을 ..

미디어 쿼리(Media Queries)란?앞서 플렉스 박스나 그리드는 레이아웃을 설계하 속성이라고 설명했다. 그렇다면 그런 레이아웃을 꾸며줄 기능 또한 필요한데 그것이 바로 미디어 쿼리이다. 우리는 웹페이지를 볼때 반드시 스마트폰으로만 보는 것이 아니라 PC로도 보고 태블릿으로도 보고 심지어는 TV에 연결해서 대화면에서 보기도 한다.사람으로 치자면 키가 큰 사람, 마른 사람, 뚱뚱한 사람처럼 다양한 체형이 있는 것이다. 미디어 쿼리는 그런 다양한 체형에 적응할 수 있는 고무줄이 달린 옷이라고도 할 수 있을 것이다.미디어 쿼리의 주요 기능 반응형 웹 디자인 구현 : 다양한 화면 크기와 해상도를 가진 기기(데스크톱, 태블릿, 스마트폰 등)에서 웹 페이지가 최적의 모습으로 보이도록 스타일을 조정한다.미디어 유..