CSS 미디어쿼리 질문드려요

Question

안녕하세요 생활코딩 통해서 그리드와 미디어쿼리를 공부하고 있는데 이해가 안가는 부분이 있어서 질문 드립니다.그리드 영역에 미디어 쿼리를 이용해서, 스크린 크기가 800px보다 크면 디스플레이가 블록레벨로바뀌는 예제를 실습중인데요 중간에 선택자가 #grid .link인 코드에서 #grid를 제거하고 .link 만 선택자로놔두면, 미디어쿼리가 적용되지 않습니다.어떤 이유에서 안되는 것인지 궁금합니다. 굳이 #grid를 앞에 붙이지 않아도 그리드 영역은 제대로 작동합니다. #grid { display: grid; grid-template-columns: 130px 1fr; } #grid .link { text-decoration: none; color: black; } @media(min-width:800) { #grid { display: block; } } #grid .item { padding-left: 10px; }

HTML
CSS
JavaScript

CSS

The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer program in 1990 while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN in 1991, first to other research institutions starting in January 1991 and to the general public on the Internet in August 1991.

장플 · Answer

조건을 잘못 쓰신것 같은데, &#64;media(min-width:800) { #grid { display: block; } } #grid .item { padding-left: 10px; } 위코드에서 빨간색 중괄호로 미디어쿼리 영역은 끝났습니다.그 밑에 코드는 미디어쿼리 영역이 아니라는 것이죠.밑에 코드까지 미디어 쿼리의 영역으로 잡으려면 중괄호 영역을 넓혀야 겠지요. &#64;media(min-width:800) { #grid { display: block; } #grid .item { padding-left: 10px; } }

CSS 미디어쿼리 질문드려요

1개의 답변

Q&A 목록