CSS 동적 레이아웃 적용하는 방법 CSS 동적 레이아웃을 적용하는 방법입니다. 미디어쿼리를 써서 여러 화면크기에 대응했다고 하더라도 레이아웃에 고정적인(픽셀) 값을 주면 안 좋은 결과가 나올 때가 많습니다. 가령 빈 공백이 생긴다거나 이미지가 지나치게 크게 보인다거나 하는 것처럼 말이죠. 화면의 넓이에는 '표준'이란것이 없습니다. 물론 1024, 1280, 1920 등 대표적인 것들이 있긴 하지만 이것이 사용자들의 다양한 디바이스 화면을 커버하지는 못합니다. 결국은 동적인 레이아웃(퍼센트, em)을 적용하는 것이 가장 좋은 방법입니다. 아래 CSS를 사용해 동적 레이아웃을 만들 수 있는 3가지 방법을 확인해 보세요. 1 동적인 레이아웃 값을 구하는 공식은 다음과 같습니다. 해당요소 / 전체내용 = 결과(%) 예를 들어 전체 폭이 1024.. 더보기 CSS 미디어 쿼리 이해와 CSS 구조화 하기 CSS 미디어 쿼리를 이해하고 이에 따라 CSS 파일을 어떻게 구조화 하는 것이 좋은지 알아보겠습니다. 모든 미디어 타입은 특징을 가지고 있습니다. 우리는 브라우저에 미디어의 특징을 물어볼 수가 있는데 CSS3 미디어 쿼리가 그 역할을 합니다. 미디어 타입에 대한 더 자세한 내용은 W3C 문서를 확인해 주세요. 1 CSS3 미디어 쿼리의 뜻을 알아보겠습니다. orientation: 화면 방향을 의미합니다. 'landscape'는 가로방향일 때 이 스타일을 적용합니다. color: 컬러 화면에 이 스타일을 적용합니다. monochrome: 미디어가 흑백일 때 이 스타일을 적용합니다. print: 프린트 시 이 스타일을 사용합니다. 2 CSS 를 구조화 하세요. CSS 내용을 위와 같이 나눕니다. 크게 공통.. 더보기 반응형 웹사이트를 만드는 법 평범한 웹을 반응형 웹사이트로 만드는 법입니다. 이것은 사용자의 브라우저 환경에 따라 화면이 유동적으로 바뀌게 하는 기술로, 웹디자이너 이튼 마르코트가 만든 말입니다. 원문이 궁금하신 분은 링크를 통해 확인해 주세요.(무려 2010년에 쓴 글입니다) 1 CSS3 미디어 쿼리를 사용합니다. 미디어 쿼리를 이용하면 브라우저창의 넓이, 화면의 비율, 방향 등 상태값에 따라 다른 CSS를 적용할 수 있습니다. 2 레이아웃을 유동적으로 만듭니다. 반응형 웹디자인은 크기를 지정할 때 픽셀 대신 퍼센트를 사용합니다. 3 이미지와 미디어 요소의 크기를 유동적으로 만듭니다. 화면 크기가 변할 때 그 안의 이미지와 미디어의 크기도 함께 변하도록 하기 위해 부모 요소에 해당 요소들이 종속되도록 둡니다. 더보기 이전 1 ··· 27 28 29 30 31 32 33 ··· 44 다음
