width:100% 설정

Question

안녕하세요~

질문있어요.

 

1, width: 100% 설정의 의미가 정확히 무엇인지

2,width: 100% 를 꼭 설정 해줘야하는 부분?(어디에 사용해야하는지)

3, width: 100% 설정을 하면 min-width 와 max-width도 반드시 같이 설정해 줘야하는건지

4, min-width 와 max-width도 꼭 설정해줘야하는 곳이 있는지

   min-width는 최소 가로크기

   max-width는 최대 가로크기 라는것은 아는데

   정확히 어느곳에 적용시켜야하는지 잘 모르겠어요.

 

이 부분의

개념이 정확히 잡히지 않아

아무곳에나 width 100% 설정을 하게되서 질문드립니다.

Answer 1

width: 100%는 부모 요소에게 100% 비례(꽉차게)하는 가로폭을 설정하겠다는 뜻입니다. 명시적인 부모가 없으면 body가 부모가 되겠지요. 이와 반대되는 개념은 고정폭이라 할 수 있는데 width: 1000px과 같은 경우가 그렇습니다. 항상 1000픽셀의 가로 크기를 갖게 됩니다.

이러한 처리에 의해 발생하는 대표적인 결과는 body와 그 자식 요소에게 가변폭을 설정하는 경우 웹브라우저의 가로 폭을 줄이면 가변폭 크기를 갖는 요소의 가로 크기도 함께 줄어 내용물들이 다음줄로 밀려 내려간다는 것입니다. 그에 비해 고정폭은 웹브라우저의 가로 크기가 줄면 고정폭 이하의 크기일 경우 가로 스크롤바가 생성됩니다.

바로 이러한 이유때문에 width를 100%로 꼭 설정해야 하는 경우가 발생할 수도 있습니다.

이때 min-width, max-width와 함께 사용하면 width: 100%는 min-width와 max-width 사이의 값 내에서 항상 100%로 꽉차게 가로 크기를 가지게 됩니다.

예를 들어서 다음 아래와 같은 코드가 있다고 할 경우에

body {
   width: 100%; min-width: 800px; max-width: 1000px;
}

최소 가로 크기인 800픽셀과 최대 가로 크기인 1000픽셀 사이에서 항상 100%의 가변폭을 갖게 됩니다.

이러한 처리가 필요한 이유는 요즘의 모니터들은 와이드형이 많아 대체로 가로 크기가 큽니다. 만약에 웹브라우저의 가로 크기에 비례하는 가변폭의 웹사이트를 작업하는 경우에 웹브라우저의 크기가 최대시 모니터의 넓은 가로폭에 콘텐츠가 펼쳐져 꽉차게 출력이 됩니다. 이렇게 되면 가독성이 떨어지고 집중할 수 없는 상태가 될 수 있습니다. 그래서 상기 코드에서 최대 크기를 1000픽셀로 고정을 했다고 보면 됩니다. 1000픽셀 보다 더 커지지 않게 합니다.

또한 웹브라우저가 줄어들 때 가변폭인 경우에 다음줄로 밀려 내려가 출력이 되므로 디자인 결과가 좋지 않을 때가 있을 수 있습니다. 그래서 min-width를 설정해서 더 이상 작아지는 것을 막아줍니다.

최소, 최대 크기 설정없이 항상 원하는 고정폭을 잡고자 한다면 min-width, max-width를 설정할 필요는 없습니다. 그냥 원하는 가로 크기를 픽셀 단위로 width 값을 잡아주기만 하면 됩니다.