웹키트(webkit)기반인 모바일 브러우저들의 기본 뷰포트 너비는 980px이다.
그래서 스마트폰의 모바일 브라우저에 맞춰 웹페이지는 980px로 표시된다.
웹키트 기반의 브라우저란 브라우저를 동작시키는 실행 엔진이 '웹키드(webkit)'엔진이기 때문에 붙은 이름이다.
스마트폰 브라우저는 대부분 웹키트 엔진을 기반으로 하는 브라우저이다.
뷰포트는
<meta>태그를 이용해서 <head>태그 사이에 작성해 넣는다.
<meta name="viewport" content="<속성1=값>, <속성2=값2>, ... ">
<meta name="viewport" content="width=device-width, initial-scale=1">
뷰포트의 너비를 스마트폰화면 너비에 맞추고
초기 화면 배율을 1로 지정한 것으로 가장 많이 사용하는 형태.
width: 뷰포트 너비, device-width(브라우저 기본 값)
initial-scale: 초기 확대/축소 값 (기본값 1)
크롬 브라우저 F12: 개발자 도구 창.
390x844 아래쪽에 있는 회색 바를 클릭하면 사이즈가 변경된다.
웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준이 '그리드 시스템(grid system)'입니다.
960픽셀의 12칼럼 그리드를 많이 사용한다.
고정그리드 레이아웃을 만들고 가변 그리드 레이아웃으로 바꿀 수 있다.
가변 그리드는 웹 콘텐츠 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비를 계산한다.
(요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비)*100
요소의 너비 값을 %로 지정할 때 소수점 이하 숫자가 많다면 소수점 이하3~4자리까지 표시하는 것이 좋다.
패딩(padding):콘텐츠 영영과 테두리 사이의 여백.(테두리 안쪽의 여백)
float 속성은 웹 요소를 문서 위에 떠 있게 만든다.
속성값: left, right, none(좌우 어느 쪽으로도 배치하지 않는다.)
이미지와 텍스트를 나란히 표시하려고 할 때는 이미지에 float속성을 사용한다.
이미비를 왼쪽에 배치한 후 오른쪽에 오는 텍스트와 적당한 간격을 유지하기 위해 margin-right 속성도 함께 사용한다.
float: left;
margin-right:15px;
float 속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달된다.
따라서 float 속성이 더 이상 유용하지 않다고 알려 주는 속성이 필요한데 그것이 바로 clear 속성이다.
float:left 속성을 이용해 왼쪽으로 배치했다면 clear:left로 종료하고
float:right를 사용했다면 clear:right를 사용해 무효화 시킨다.
float 속성 값이 left, right인지와 상관없이 무조건 기본 상태로 되돌리고 싶다면 clear:both라고 하면 된다.
'web' 카테고리의 다른 글
| 워드프레스 다시 시작해보자 (0) | 2022.08.15 |
|---|---|
| 가변 글꼴 (0) | 2022.03.08 |
| 뷰포트와 미디어 쿼리에 관하여 (0) | 2021.10.25 |
| 크롬 브라우저에 사용중인 서체 확인하는 방법과 변경하는방법 (0) | 2021.10.21 |
| 배경색과 글자색의 대비 정도를 측정해주는 사이트 (0) | 2021.10.18 |
댓글