홈페이지 레이아웃이 범위를 벗어날 때 (min,max,overflow)

모바일과 태블릿, PC 3가지를 염두에 두고 작업하는 홈페이지의 특성상 각 기기별로 레이아웃을 맞추어 주어야 할때가 있는데, 이는 %로 수치를 지정해 각 영역크기를 지정해주는 것을 비롯. 컨텐츠에 대한 영역을 자동으로 잡아주는 명령문을 포함해야 좀 더 가독성과 접근성이 높아지는 효과가 있습니다. 반응형으로 컨텐츠를 제작할 때, 항상 헤깔리는 min,max 명령문입니다.

 

---

 

overflow 

컨테이너를 잡은 박스에 컨텐츠가 벗어나게 될 경우 설정해주는 기능으로 너무 큰 컨텐츠를 제어할 때 사용합니다. overflow는 기본값으로 x와 y 축을 경계로 디테일하게 제어하는 방법도 사용할 수 있습니다.

 

[기본 값] 

• overflow : 상하좌우 기본값 적용 
• overflow-x: 왼쪽 / 오른쪽을 어떻게 처리할지를 지정합니다. 
• overflow-y: 위쪽 / 아래쪽 가장자리로 할 일을 지정합니다.

overflow: visible|hidden|scroll|auto;

 

[속성 값] 

• visible: 속성의 바깥으로 나오는 기본 값 
• hidden: 속성의 안쪽으로 처리되지만 나머지는 잘림 
• scroll: 속성에 스크롤을 만듬 
• auto: 속성이 넘어가면 자동으로 스크롤을 만들어줌. ​ 

※ overflow는 auto 속성을 가장 많이 사용해 웹이 환경을 자동으로 인식해 적용하게 끔 하거나, hidden속성을 이용해, 슬라이드를 숨기는 기능을 가장 많이 사용합니다.

반응형

---

 

max-width / height 

width를 마치 %값으로 제어하게 해주는 기능으로, width에 max라는 기능을 달면 브라우저의 크기가 줄어들수록 고유의 값을 인식해 스크롤 밖으로 내보내지 않고, 형태를 유지시켜 주는 것을 말합니다. ​

 1) 넓이와 높이를 %값으로 제어하거나, 2) max기능을 붙여 작동해도 똑같이 기능을 맞춰 움직입니다. 

레이아웃의 정확한 수치값을 계산해야 한다면, max-width: 수치값; 으로 표현하곤 합니다.

/* max-width값을 500px로 브라우저 크기가 작아져도 컨텐츠가 블럭처럼 쌓이면서 고정시켜줍니다 */
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

 

---

 

min-width / height 

컨테이너가 가져야 할 최소값의 설정을 유지시켜주는 명령문으로 반응형으로 사용할 때는 "작성자가 본래 이 정도의 크기로 무조건 보여줘야 한다" 는 취지의 컨텐츠가 있을 때만 사용하게 됩니다. 크기에 맞추어 컨테이너가 자동적용 되지않고 해당 영역만큼 스크롤이 생기면서 고유의 컨텐츠를 보여줍니다. ​

/* 최소너비를 500px로 지정합니다. */
span.ex1 {
  min-width: 500px;
}

 

---

 

min-width와 max-width의 복합 서술 

반응형으로 홈페이지를 제작하게 될 때, 자주 쓰이는 min과 max의 복합 서술 형태는 예를 들어, 메인 컨테이너가 1920px이라고 가정하게 되면,

min-width:647px;
max-width:1280px;

위와 같이 설정할 경우, 브라우저를 줄이면 1280px까지는 

max명령문에 의해 컨테이너와 컨텐츠가 벗어나지 않고 크기와 같이 자동으로 맞춰지는 형태를 보여주다가, min명령문에 의해 647px이 되는 순간 컨테이너와 컨텐츠가 그 자리에 정지해 더 이상 반응형으로 움직이지않고 스크롤로 이동해야 볼 수 있는 형태가 된다는 뜻입니다. 즉 절대값을 부여하게 되는 셈이죠. ​ 

이와 같은 복합형 min,max의 서술형식은 컨텐츠의 내용이 "이 정도까지면 됐어, 더 이상 컨텐츠를 줄여버리면 그 크기에선 아무 의미가 없어" 라는 웹디자이너가 퍼블리셔에게 제공한 본래의 의도에 맞게 끔 설정하는 작업입니다. ​ 

또는 미디어쿼리로 이뤄지는 css작업에서도 디스플레이가 바뀌는 경계시점을 min,max로 설정하는경우를 들 수 있습니다. 간단히 말해 max는 변동값 , min은 고정값이라고 생각하시면 편할것 같네요.

 

본문 출처: https://www.w3schools.com