넓이를 화면 사이즈에 맞게!

일반적으로 #container로 표시될 영역을 정하고, #content 또는 #sidebar 등으로 내부 영역을 구분한다. (각 영역은 float 속성으로~)

css 파일을 열어서 width 를 찾아보면 고정 px로 되어있어서, 그 부분을 %로 변경해 주었다.

container : 900px -> 80%
content : 750px -> 77%
sidebar : 190px -> 21%

container 가 content와 sidebar 상위 개체(parent element)이고, 나의 경우 두개의 영역으로만 나눠져있기에 100%를 기존 px 비율로 나눴다.

이렇게 바꿔주면, 화면의 사이즈가 커지면 자동으로 커진다. 근데, 문제는 화면의 사이즈가 작아지면 계속 작아져서 화면 구성이 엉망이 된다.

CSS > min-width: 속성을 이용하자

최소값으로 기존 px을 지정해 주었다.

container : min-width: 900px;
content : min-width: 700px;
sidebar : min-width: 190px;

이렇게 해주면 화면이 작아져도 최소 넓이가 보장되므로 화면 구성에 문제가 없다. max 속성도 있등 다양한 설정이 가능하다. 자세한 설명은 w3school.com 을 참고!

큰 화면에서는 넓고 시원~하게 볼 수있고, 좁은 화면에서도 기존 속성을 유지할 수 있다. 회사의 큰 모니터에서 볼때 좀 답답했는데, 내일 함 확인해보고 필요하면 max-width도 넣어야겠다. (특히, 이미지...)

20141113 추가.
max-width 800으로 했다. 회사가서 와이드 화면에서 보니까 너무 넓어서 오히려 글을 읽기가 불편했다. 글은 폭넓이가 중요하다는 사실을 새삼 다시 깨달음. 그리고, 사이드바는 고정 사이즈로 해두는 것이 좋을것 같다. 보조창이기 때문에 더 넓을 필요가 없을것 같다. 요즘 외국 사이트에 많이 들어가는데, 그게 얼추 트랜드에 맞는것 같다.ㅎ 아, 사이드바 고정도 해야짐.ㅋ

맛소금