Layout3 CSS-반응형 레이아웃 (미디어쿼리) 1. 반응형 웹 디자인 Responsive Web Design 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 한다. 보통 웹사이트가 축소되어 가로 스크롤 없이 콘텐츠를 볼 수 있으나 글자가 너무 작아지기 때문이다. 데스크탑용, 테블릿용, 모바일용 웹사이트를 별도 구축할 수도 있지만 One Source Multi Use의 관점에서 올바른 해결책은 아니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인(Responsive Web Design)이다. 화면 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것이다. 즉, 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것이다. 1-1. viewport meta tag vi.. 2020. 8. 27. CSS-레이아웃Ⅱ: float + position 어떤 레이아웃에는 float을 쓰고, 어떤 레이아웃에는 position을 써야한다는 법칙이 있는 것은 아닙니다. 속성을 정확히 알고 구현하면 그것이 정답입니다. - 밑에 예제는 임의적으로 id명과 class명을 넣었습니다. F12를 통해 확인해주세요. float 방식 - sidemenu는 float: left;하고, content는 float: right; - float의 해제(clear)가 필요함 header container position: relative; float: left; width: 100%; sidemenu float: left; content position: absolute; banner float: right; footer clear:both 2020. 8. 27. CSS-레이아웃Ⅰ: float layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다. 또한, 모바일 사용자가 데스크탑 사용자보다 많은 상황을 감안하여 화면의 크기에 따라 적절히 화면 구성을 변화시키는 반응형 웹 디자인(Responsive Web Design)이 모던 웹 사이트의 필수 사항이 되었다. CSS를 사용하여 layout을 구성할 때에 자주 사용되는 핵심 기술은 float이다. float을 이용해 기본 레이아웃 구성을 연습해보자. https://hrin-0820.tistory.com/36 CSS-요소의 정렬 : float float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. .. 2020. 8. 26. 이전 1 다음
