- HTML5+CSS3 -유동형 레이아웃 만들기,이미지,비디오 목차
전체를 감싸는 div 추가하기
-유동형 레이아웃은 처음부터 유동형으로 작성하는 것이 좋지만, 이미 픽셀 값을 사용하여 만들어진 고정형 레이아웃도 유동형 레이아웃으로 만들 수 있다.
전체 스타일 시트를 살펴보고 전체 레이아웃을 감싸는 div가 없다면 가장 바깥에 새로운 div를 추가한 후 그곳에 id=“wrapper”또는 원하는 이름을 지정한다.
why???
div를 만드는 것은 각 요소들의 너비를%(백분율)로 바꿀 때 기준이 되는 너비가 필요하기 때문이다.
또한 전체를 감싸는 wrapper요소가 있으면 웹 문서 내용 전체의 크기나 배경 색 등을 한꺼번에 조절할 수 있고, 브라우저 화면 크기에 상관없이 웹 문서의 내용을 중앙에 배치할 수 있다.
ex) <body>태그 및 부분에 <div id=“wrapper”> 같이 전체 레이아웃을 감싸는 <div>태그 지정해준다. 그 후, <style>태그와 </style>태그 사이에 방금 위에서 추가한 wrapper라는 새로운 id의 스타일을 정의한다.
#wrapper {
width:960px;
margin:0 auto /상하여백 0 좌우 여백 자동 (내용을 화면 가운데 배치)
background-color:white; / 콘텐츠 배경을 흰색
}
->이 경우에는 너비 값이 픽셀 단위이고 크기가 고정되어 있어, PC나 테블릿 , 스마트폰에서 그 크기가 똑같이 표시되고 일부 내용은 가려지기 때문에 화면을 스크롤해야 보는 단점이 있다
해결 : 기존 고정형 레이아웃을 유동형 레이아웃으로 바꿔준다.
요소의 너비를 백분율(%)로 바꾸기
앞의 예를 이어서 , 가장 바깥의 #wrapper의 너비 값을 백분율로 변환한다. 여기에서는 화면 양 옆에 여백을 두기 위해 너비를 96%로 지정했습니다. 디자인이 모니터 화면에 가득차게 표시하고 싶다면 100%로 지정하면 됩니다.
ex) #wrapper {
width:96 %
margin:0 auto;
background-color:white
}
요소들 너비 값 계산하기
-나머지 요소들은 #wrapper안에 포함되는 것이므로 #wrapper크기를 기준으로 백분율 값을 계산합니다. 너비를 100이라는 기준으로 했을 때 각 요소들의 너비 값을 계하산하는 것입니다.
ex) article의 너비는 600px 인데, 960px를 기준으로 하면 600px / 960px = 0.625가 된다.
이 값을 백분율로 바꾸면 소수점을 오른쪽으로 두칸 이동시켜 62.5%가 된다 즉 article의 너비는 62.5%가 됩니다.
article {
float:left;
width:62.5%
padding:20px;
}
공식
->px너비 값을 %너비로 바꾸려면 “요소너비 / 부모요소 너비” 값을 구한 후, 소수좀을 오른쪽으로 두칸 이동하여 원하는 백분율 값을 얻을 수 있다.
(요소 중 브라우저 너비에 따라 높이 값이 달라지는 요소가 있다면 높이 값도 %로 바꿔줍니다.)
% 요소의 너비 값을 %로 지정할 때 소수점 이하 숫자가 많다면 간단하게 소수점 이하 한두 자리로 표시하는 것이 좋다. 그후 오차를 고려해 실제 계산 값 보다 약간 작게 지정해주는 것이 좋다
패딩과 마진을 %로 바꾸기
-요소들의 너비가 조절됨에 따라 패딩과 마진 여백도 조절되는 것이 자연스럽습니다.
이또한 %값으로 조절해야 하는데 각 요소에 사용한 패딩과 마진 값도 #wrapper너비를 기준으로 계산합니다.
663p 참조
글자 크기를 em 단위로 변환하기
-웹 페이지를 작성할 때 글자 크기를 px단위를 사용합니다. px는 모니터의 해상도를 기준으로 하기 때문에 N-screen시대에는 적합하지 않다. 모니터의 해상도에 따라 픽셀 크기가 달라지기 때문이다.
em단위는 대문자 M의 너비를 1em으로 표현한 것으로, 16px이 1em에 해당합니다. 따라서 이미 px로 표시한 글자 크기는 16px로 나누면 emm 값으로 계산할 수 있습니다.
공식 : em = 글자 크기(px) / 16 px
유동형 이미지 만들기
-이미지 너비가 브라우저 화면의 너비보다 클 경우, 화면의 너비를 늘릴 때는 상관 없지만 브라우저 화면의 너비를 줄이면 일부가 가려진다.
해결 : CSS로 이미지의 최대 너비를 100%로 지정하면 된다.(브라우저 너비를 기준으로 항상 100%에 맞게 이미지 너비가 조절)
ex) img{
max-width:100%;
}
유동형 비디오 만들기
ex) video{
max-width:100%
}
'HTML&CSS > HTML5' 카테고리의 다른 글
| <HTML5+CSS3>CSS리셋하기 - 마무리 - (0) | 2018.11.04 |
|---|---|
| <HTML5+CSS3>반응형 웹사이트 만들기 (0) | 2018.11.02 |
| <HTML+CSS>유동형 레이아웃이란 ? (0) | 2018.11.02 |
| <HTML5+CSS3> 미디어 쿼리 적용하기 (0) | 2018.10.26 |
| <HTML5+CSS3>반응형 웹 사이트 만들기 (0) | 2018.10.24 |
