반응형 웹2 반응형 웹 사이트 만들기 어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 백분율과 같은 가변 값으로 지정하면 된다. 가변 그리드 레이아웃(fluid [grid] layout) : 사이트의 레이아웃을 백분율로 지정하는 것 가변 그리드 레이아웃 만들기 ① 전체를 감싸는 요소 확인하기 가변 그리드는 웹 컨텐츠 전체를 감싸는 요소의 너비(ex. 960px)를 기준으로 각 요소의 너비를 계산한다. 전체를 감싸는 요소(wrapper나 container)가 화면에 가득 차게 표시하고 싶으면 너비를 100%, 화면 양 옆에 여백을 살짝 두고 싶으면 너비를 96%로 지정하겠다. ② 각 요소의 너비 값 계산하기 요소의 너비를 전체를 감싸는 요소를 기준으로 백분율로 정한다. cf. %.. 2022. 7. 6. [프론트엔드][CSS] TIL Day-14.2 Media Queries 미디어 쿼리 미디어 쿼리(media queries)는 접속하는 장치 즉, 미디어에 따라 사이트의 형태가 바뀌도록 같은 스타일시트 내에서 서로 다른 미디어에 다른 스타일을 적용하도록 지정하게 하는 것을 가리킨다. 이를 위해 CSS2에서 도입된 미디어 타입을 이용하면 @media 규칙을 통해 다양한 미디어 유형에 맞춰 서로 다른 스타일을 지정할 수 있었다. CSS2의 미디어 타입을 확장한 CSS3의 미디어 쿼리는 단지 미디어 타입을 지정하는 것 뿐만 아니라 뷰포트의 크기(폭, 높이), 장치의 크기, 화면의 가로/세로 방향, 해상도 등 미디어 타입의 특성을 구분할 수 있는 다양한 기능을 이용할 수 있게 되었다. 그럼으로써, CSS3의 미디어 쿼리는 반응형 웹을 구현하는 중요한 기능으로 사용되게 되었다. 미디어 쿼리의 문법.. 2022. 4. 15. 이전 1 다음
