웹 브라우저가 백분율 값을 사용하여 디스플레이를 결정하는 방법 알아보기
반응 형 웹 디자인 을하는 많은 학생들은 너비 값에 백분율을 사용하는 데 어려움을 겪습니다. 특히, 브라우저가 그 백분율을 계산하는 방법과 혼동이 있습니다. 다음은 반응 형 웹 사이트에서 너비 계산을 위해 비율이 어떻게 작동하는지에 대한 자세한 설명입니다.
너비 값에 픽셀 사용
픽셀을 너비 값으로 사용하면 결과가 매우 간단합니다. CSS를 사용하여 문서 머리글의 요소 너비 값을 100 픽셀 너비로 설정하면 해당 요소는 웹 사이트 콘텐츠 또는 바닥 글이나 다른 영역의 너비와 너비를 100 픽셀 너비로 설정 한 것과 같은 크기가됩니다. 페이지. 픽셀은 절대 값이므로 문서에서 어디에 요소가 나타나더라도 100 픽셀은 100 픽셀입니다. 불행히도 픽셀 값은 이해하기 쉽지만 반응 형 웹 사이트에서는 제대로 작동하지 않습니다.
Ethan Marcotte는 "반응 형 웹 디자인"이라는 용어를 사용하여이 접근 방식을 3 가지 핵심 원칙으로 설명했습니다.
- 유체 그리드
- 유체 매체
- 미디어 쿼리
처음 두 지점 인 유체 그리드와 유체 미디어는 픽셀 대신 백분율을 사용하여 값의 크기를 조정합니다.
너비 값에 백분율 사용
백분율을 사용하여 요소의 너비를 설정하면 요소가 표시되는 실제 크기는 문서의 위치에 따라 달라집니다. 백분율은 상대 값입니다. 즉, 표시된 크기는 문서의 다른 요소와 관련이 있습니다.
예를 들어, 이미지 너비를 50 %로 설정하면 이미지가 보통 크기의 절반으로 표시된다는 의미 는 아닙니다 . 이것은 일반적인 오해입니다.
이미지의 너비가 기본적으로 600 픽셀 인 경우 CSS 값을 사용하여 50 %로 표시한다고해서 웹 브라우저에서 300 픽셀 너비가되는 것은 아닙니다. 이 백분율 값은 이미지 자체의 기본 크기가 아닌 해당 이미지가 포함 된 요소를 기반으로 계산됩니다. 컨테이너 (디비전 또는 기타 HTML 요소 일 수 있음)의 너비가 1000 픽셀이면 해당 값이 컨테이너 너비의 50 %이므로 이미지는 500 픽셀로 표시됩니다. 포함하는 요소의 너비가 400 픽셀이면 해당 값이 컨테이너의 50 %이므로 이미지는 200 픽셀로만 표시됩니다. 문제의 이미지는 50 %의 크기를 가지며,이 이미지의 크기는 해당 요소를 포함하는 요소에 완전히 의존합니다.
반응 형 디자인은 유동적임을 기억하십시오. 화면 크기 / 장치 가 변경되면 레이아웃과 크기가 변경됩니다. 물리적, 비 웹 용어로 생각하면 포장 재료로 채우고있는 골판지 상자와 같습니다. 그 상자가 그 재료로 반으로 채워 져야한다고 말하면, 필요한 포장의 양은 상자의 크기에 따라 다릅니다. 웹 디자인에서 비율 너비에 대해서도 마찬가지입니다.
다른 백분율에 근거한 백분율
이미지 / 컨테이너 예제에서, 포함 요소의 픽셀 값을 사용하여 반응 형 이미지가 어떻게 표시되는지 보여줍니다. 실제로 포함하는 요소는 백분율로 설정되고 해당 컨테이너 내부의 이미지 또는 기타 요소는 백분율의 백분율을 기준으로 값을 가져옵니다.
실제로이를 보여주는 또 다른 예가 있습니다.
전체 사이트가 "컨테이너"(일반적인 웹 디자인 연습) 클래스의 부서 내에 포함되어있는 웹 사이트가 있다고 가정 해보십시오. 그 부서 내부에는 3 개의 수직 부분으로 표시되도록 결국 스타일을 지정할 3 개의 다른 부분이 있습니다. 그 HTML은 다음과 같이 보일 것입니다 :
이제는 CSS를 사용하여 해당 "컨테이너"부분의 크기를 90 %로 설정할 수 있습니다. 이 예에서 컨테이너 분할에는 본문 이외의 다른 요소가 없으며 특정 값으로 설정하지 않았습니다. 기본적으로 본문은 브라우저 창의 100 %로 렌더링됩니다. 따라서 "컨테이너"부분의 백분율은 브라우저 창의 크기를 기반으로합니다. 브라우저 창 크기가 변경되면이 "컨테이너"의 크기도 변경됩니다. 브라우저 창 크기가 2000 픽셀이면이 부분은 1800 픽셀로 표시됩니다. 이 값은 브라우저의 크기 인 2000 (2000 x .90 = 1800)의 90 %로 계산됩니다.
"컨테이너"에서 발견 된 각 "col"디비전이 30 % 크기로 설정되면이 예제에서 각각 540 픽셀의 너비가됩니다. 이 값은 컨테이너가 렌더링하는 1800 픽셀의 30 % (1800 x .30 = 540)로 계산됩니다. 해당 컨테이너의 비율을 변경하면이 내부 구역은 요소를 포함하는 요소에 종속되므로 렌더링되는 크기가 변경됩니다.
브라우저 창이 2000 픽셀 너비로 유지된다고 가정 해 봅시다. 컨테이너의 백분율 값을 90 % 대신 80 %로 변경합니다. 즉, 이제 1600 픽셀 너비로 렌더링됩니다 (2000 x .80 = 1600). 3 개의 "col"부분의 크기에 대해 CSS를 변경하지 않고 30 % 만 남겨 두었더라도 크기가 조정 된 컨텍스트 인 변경된 요소가 변경되어 이제 다르게 렌더링됩니다. 이 3 개의 구획은 각각 480 픽셀의 너비로 렌더링됩니다. 1600의 30 % 또는 컨테이너의 크기 (1600 x .30 = 480)입니다.
이 "col"디비전 중 하나에 이미지가 있고 해당 이미지가 백분율을 사용하여 크기가 지정되면이 크기 조정의 컨텍스트는 "col"자체가됩니다. "col"부분의 크기가 변경되면 내부의 이미지도 변경됩니다. 따라서 브라우저 또는 "컨테이너"의 크기가 변경되면 세 개의 "col"부분에 영향을 미치게되어 "col"내부 이미지의 크기가 변경됩니다. 위에서 볼 수 있듯이 이들은 모두 백분율 구동 크기 조정 값이 제공됩니다.
너비에 백분율 값을 사용하는 경우 웹 페이지의 요소가 어떻게 렌더링되는지 고려할 때 해당 요소가 페이지의 마크 업에있는 컨텍스트를 이해해야합니다.
요약하자면
반응 형 웹 사이트 의 레이아웃을 생성하는 데는 백분율이 중요한 역할을합니다. 이미지를 반응에 맞게 크기를 조정하거나 비율 너비를 사용하여 크기가 서로 다른 진정한 유체 격자를 만들 때 원하는 모양을 얻으려면 이러한 계산을 이해해야합니다.