웹페이지 개발시 방법론 - Code, Test, Refine
1. Look for natural boxes
2. Look for repeated elements & semantic elements
3. Write your HTML
4. Apply your styles (from biggest to smallest)
5. Fix things
그리고 다시 3~5반복함, 원하는 웹페이지가 만들어질 때까지
반응형 디자인(Responsive design)
viewport 테그 - 웹페이지를 모바일 디바이스에 최석화 시켜줌
<meta name="viewport" content="width=device-width, initial-scale=1.0">
initial-scale=1의 의미는
device independent pixel과 CSS pixel의 비율이 1:1
모바일에서 사람이 touch 가능한 최소 크기는 40, 적어도 48px 정도는 설정 해줘야 함
nav a, button {
min-width:48px;
min-height:48px;
}
반응형
'개발' 카테고리의 다른 글
| MEAN stack AWS 우분투 / Mac 설치 방법 (2) | 2017.02.11 |
|---|---|
| AWS 에서 Ubuntu (우분투) Linux 인스턴스 띄우기 (0) | 2017.01.25 |
| Grunt 설치 및 셋팅 (0) | 2016.08.18 |
| Node.js 설치 및 셋팅, npm 이란? (0) | 2016.08.18 |
| 웹개발, 웹디자인 방법 (0) | 2016.08.12 |
| 웹개발 관련 툴 모음 (0) | 2016.08.12 |
| CSS 문법 정리 (0) | 2016.08.11 |
| CentOS 사용팁 (0) | 2016.08.09 |
| Apache MySql PHP 윈도우 설치 따라하기 (0) | 2016.06.26 |
| 해쉬맵(hashmap) 설명 정리 (0) | 2016.06.26 |