-
[CODECADEMY] CSS SIZING ELEMENTS (em, rem, 비율에 따른 크기 조정, 이미지 사이즈 조절, 배경화면)CSS 2020. 6. 23. 16:03
1. em
픽셀 이외의 단위를 사용하여 상대적 크기 조정을 시작합니다.
당신이 상대적으로 크기의 콘텐츠를 만들 수있는 CSS에서 사용할 수있는 측정 한 단위는 em입니다
현재 em은 사용중인 기본 글꼴의 크기를 나타냅니다.
예를 들어, 브라우저의 기본 글꼴이 16 픽셀 (일반적으로 브라우저에서 텍스트의 기본 크기) 인 경우
1em은 16 픽셀입니다. 2 ems는 32 픽셀과 같습니다.
CSS에서 em을 사용하는 방법을 보여주는 두 가지 예를 살펴 보겠습니다.
.heading { font-size : 2em ; }위의 예에서 기본 글꼴이 지정되지 않았으므로
heading요소의 글꼴 크기는 브라우저의 기본 글꼴 크기를 기준으로 설정됩니다.
기본 글꼴 크기가 16 픽셀이라고 가정하면 heading요소 의 글꼴 크기는 32 픽셀입니다.
.splash-section { font-size: 18px; } .splash-section h1 { font-size: 1.5em; }위의 예는 브라우저의 기본 글꼴 크기에 의존하지 않고 ems를 사용하는 방법을 보여줍니다.
대신 기본 글꼴 크기 ( 18px)가 splash-section요소 내의 모든 텍스트에 대해 정의됩니다 .
두 번째 CSS 규칙은 h1내부 splash-section글꼴 splash-section(18 픽셀) 을 기준으로
내부의 모든 요소 의 글꼴 크기를 설정합니다 . h1요소 의 결과 글꼴 크기는 27 픽셀입니다.
2. rem
CSS에서 두 번째 상대 측정 단위는 rem입니다.
rem 은 root em 을 의미합니다 .
em과 비슷하게 작동하지만 크기가 font 인 부모 요소를 검사하는 대신 루트 요소를 검사합니다 .
루트 요소는 <html>태그입니다.
대부분의 브라우저는 글꼴 크기 <html>를 16 픽셀로 설정하므로 기본적으로 rem 측정 값은 해당 값과 비교됩니다.
루트 요소에 다른 글꼴 크기를 설정하기 위해 CSS 규칙을 추가 할 수 있습니다.
html { font-size: 20px; } h1 { font-size: 2rem; }위의 예에서 루트 요소의 글꼴 크기는 <html>20 픽셀로 설정되어 있습니다.
이후의 모든 rem 측정 값은 이제 해당 값과 비교되며 h1예제 의 요소 크기는 40 픽셀입니다.
rems를 사용하면 얻을 수있는 장점 중 하나는 모든 요소가 동일한 글꼴 크기 값과 비교되어
큰 글꼴이나 작은 글꼴이 나타나는지 쉽게 예측할 수 있다는 것입니다.
전체 웹 사이트에서 일관되게 요소 크기를 조정하려면 rem 측정이 작업에 가장 적합한 단위입니다.
근처의 다른 요소와 비교하여 요소 크기를 조정하려는 경우 em 단위가 작업에 더 적합합니다.
3. Percentages: Height & Width
텍스트가 아닌 HTML 요소를 페이지의 부모 요소를 기준으로 크기를 조정하려면 백분율 을 사용할 수 있습니다 .
백분율은 폭과 높이, 패딩, 경계 및 여백과 같은 상자 모델 값의 크기를 조정하는 데 자주 사용됩니다.
위치 속성 (위, 아래, 왼쪽, 오른쪽)을 설정하는 데에도 사용할 수 있습니다.
시작하려면 백분율을 사용하여 요소의 높이와 너비를 조정하십시오.
.main { height: 300px; width: 500px; } .main .subsection { height: 50%; width: 50%; }위의 예에서, .main그리고 .subsection각 div에 나타낸다.
parent div 인 .main 의 크기 는 높이 300 픽셀 및 너비 500 픽셀로 설정되었습니다.
백분율을 사용하는 경우 요소는 부모 요소 (컨테이너라고도 함)의 크기를 기준으로 크기가 조정됩니다.
따라서 .subsectiondiv 의 크기는 높이 150 픽셀, 폭 250 픽셀입니다.
부모 요소의 크기를 먼저 설정하지 않으면 자식 요소의 크기가 잘못 설정 될 수 있습니다.
참고 : 상자 모델에는 패딩, 테두리 및 여백이 포함되므로 요소를 100%로 설정 하면 내용이 상위 컨테이너에 overfloow 될 수 있습니다. 콘텐츠에 패딩, 테두리 또는 여백이없는 경우에만 사용해야합니다.
4. Percentages: Padding & Margin
백분율을 사용하여 요소의 패딩 및 여백을 설정할 수도 있습니다.
높이와 너비가 백분율을 사용하여 설정되면 하위 요소의 치수가
상위 요소의 치수를 기반으로 계산된다는 것을 알게되었습니다.
그러나 패딩 및 여백을 설정하는 데 백분율을 사용하는 경우 부모 요소 의 너비 만 기준으로 계산됩니다 .
예를 들어, 같은 속성 margin-left이 백분율을 사용하여 설정 되면 (예 : 50%),
요소는 부모 컨테이너의 오른쪽 절반으로 이동합니다 (자식 요소는 부모의 여백의 절반을 받는 자식 요소가 아닙니다).
수직 패딩 및 여백도 부모의 너비를 기준으로 계산됩니다. 왜? 다음 시나리오를 고려하십시오.
- 컨테이너 div가 정의되었지만 높이가 설정되지 않았습니다 (평평함을 의미 함).
- 그런 다음 컨테이너에 하위 요소가 추가됩니다. 자식 요소는 않는 일련의 높이를 가지고있다. 그러면 부모 컨테이너의 높이가 해당 높이로 늘어납니다.
- 자식 요소는 변경이 필요하며 높이는 수정됩니다. 그러면 부모 컨테이너의 높이가 새로운 높이로 늘어납니다. 이 사이클은 자식 요소의 높이가 변경 될 때마다 끝없이 발생합니다!
위 시나리오에서 설정되지 않은 높이 (부모)는 자식 요소의 변경으로 인해 높이가 지속적으로 변경됩니다.
이것이 수직 패딩과 여백이 높이가 아닌 부모의 너비를 기준으로하는 이유입니다.
참고 : 상대 크기 조정을 사용하는 경우 텍스트 크기와 관련된 페이지의 텍스트 및 크기를 조정하는 데 ems 및 rems를 사용해야합니다 (예 : 텍스트 주위에 패딩). 텍스트 크기를 기준으로 일관된 레이아웃을 만듭니다.
그렇지 않으면 백분율을 사용해야합니다.
5. Width: Minimum & Maximum
상대 측정은 화면 크기가 다른 여러 장치에서 일관된 레이아웃을 제공하지만
웹 사이트의 요소는 너무 작거나 커지면 무결성이 떨어질 수 있습니다.
다음과 같은 속성으로 요소의 넓이를 제한 할 수 있습니다.
min-width — 요소의 최소 너비를 보장합니다.
max-width — 요소의 최대 너비를 보장합니다.p { min-width: 300px; max-width: 600px; }
위의 예에서 브라우저 크기를 조정할 때 단락 요소의 너비는 300 픽셀 아래로 떨어지지 않으며너비는 600 픽셀을 초과하지 않습니다.
브라우저 창이 좁아 지거나 넓어지면 텍스트가 매우 압축되거나 흩어져서 읽기 어려워 질 수 있습니다.이 두 속성은 최소 및 최대 너비를 제한하여 내용을 읽을 수있게합니다.
참고 : 픽셀 단위는 요소의 크기를 엄격하게 제한하는 데 사용됩니다.
6. Height: Minimum & Maximum
요소 의 최소 및 최대 높이 를 제한 할 수도 있습니다 .
1. min-height — 요소 상자의 최소 높이를 보장합니다.
2. max-height — 요소 상자의 최대 높이를 보장합니다.
p { min-height: 150px; max-height: 300px; }위의 예에서 모든 단락의 높이는 150 픽셀 아래로 줄어들지 않으며 높이는 300 픽셀을 초과하지 않습니다.
해당 요소에 대해 max-height 속성을 너무 낮게 설정 하면 요소의 내용은 어떻게됩니까?
내용이 요소 외부로 넘쳐서 읽을 수없는 내용이 생성 될 수 있습니다.
7. 이미지, 비디오 크기 조정
많은 웹 사이트에는 이미지 및 비디오와 같은 다양한 미디어가 포함되어 있습니다.
웹 사이트에 이러한 미디어가 포함 된 경우 사용자가 올바르게 볼 수 있도록 비례 적으로 크기를 조정해야합니다.
.container { width: 50%; height: 200px; overflow: hidden; } .container img { max-width: 100%; height: auto; display: block; }
위의 예 .container에서 컨테이너 div를 나타냅니다.너비 50%(이 예에서는 브라우저 너비의 절반)와 높이는 200 픽셀로 설정됩니다.
컨테이너보다 큰 크기의 컨텐츠 overflow를 볼 수 없도록 hidden으로 설정 합니다 .
두 번째 CSS 규칙은 이미지를 컨테이너 너비에 맞게 조정합니다.이 height속성은 auto로 설정되어 이미지의 높이가 너비에 비례하여 자동으로 조정 됩니다 .
마지막 줄은 이미지를 기본 상태 인라인 블록이 아닌 블록 수준 요소로 표시합니다.
이렇게하면 이미지가 텍스트와 같은 페이지의 다른 내용과 정렬되지 않아
이미지에 의도하지 않은 여백이 생길 수 있습니다.
위의 전체 예제를 기억해 두는 것이 좋습니다.이미지와 비디오의 비율을 비례 적으로 조정하는 데 사용되는 매우 일반적인 디자인 패턴을 나타냅니다 .
참고 : 위의 예는 이미지 (또는 비디오)의 너비를 컨테이너의 너비로 조정합니다.이미지가 컨테이너보다 큰 경우 이미지의 세로 부분이 오버플로되어 표시되지 않습니다.
이 동작을 교환하려면 max-height에 100%와 width에 auto(기본적으로 값을 교환) 설정할 수 있습니다.
이것은 확장 할 수 높이 대신 컨테이너의 높이와 이미지를.
이미지가 컨테이너보다 큰 경우 이미지의 가로 부분이 오버플로되어 표시되지 않습니다.
8. 배경 사진 크기 조절 (Scaling Background Images)
CSS 속성을 사용하여 HTML 요소의 배경 이미지를 반응적으로 조정할 수 있습니다.
body { background-image: url('#'); background-repeat: no-repeat; background-position: center; background-size: cover; }위의 예에서 첫 번째 CSS 선언은 배경 이미지를 설정합니다 ( #이 예에서는 이미지 URL의 자리 표시 자임).
두 번째 선언은 CSS 컴파일러에게 이미지를 반복하지 않도록 지시합니다 (기본적으로 이미지는 반복됨).
세 번째 선언은 이미지를 요소 내에 배치합니다.
그러나 최종 선언은 위 예제의 cover입니다. 배경 이미지의 크기를 조정하는 것입니다.
이미지는 이미지의 비율을 적용하여 요소의 전체 배경을 덮습니다.
이미지의 크기가 컨테이너의 크기를 초과하면 이미지의 일부만 표시됩니다
'CSS' 카테고리의 다른 글