1. 모바일 웹 구현시 이미지 파일의 이해
SVG :
✔ 확장 가능한 벡터 그래픽(Scalable Vector Graphics).
✔ 그래픽을 마크업 하기 위한 xml의 일종의 형식.
✔ 벡터 기반의 형식이므로 크기를 조절했을 때 해상도가 깨지지 않는 장점이 있음
✔ HTML, CSS, JS와 함께 동작 가능하다는 점
📍 로고 또는 단순화 이미지에 활용
2. 모바일 웹 화면 크기
보통 이미지 시안을 잡게 되면 모바일은 다음의 모바일 크기에 최적화된 이미지를 제작한다.
| 화면크기 | ||
|---|---|---|
| 최소크기 320px |
보편적 크기 360px |
wide하게 잡은 크기 400px |
| 시안(× 2배) | ||
| 640px | 720px | 800px |
📍 웹 pc 화면에서 구현되는 이미지는 모바일에서는 굉장히 wide하게 보일 것이다.
따라서 모바일 size에 맞게 이미지를 조절해주는 것은 선택사항이 아닌 필수!!
📍 모바일 화면 구현시 다양한 해상도에 대응하기 위해서는 viewport 적용은 필수
📍 참고) 구현해야 하는 기능이 많아질 수록 반응형 web보다는 적응형을 지향한다. (반응형은 기능이 많아질 수록 소스를 끌고올 때 과부하가 걸릴 가능성이 높다. (용량 up)
3. float vs text-align
먼저 간단하게 개념정리를 리뷰해보자.
✔ float이란?
-단어 자체의 의미처럼 '둥둥 떠나니는 요소'처럼 만들어서 위치 조절을 보다 편리하게 하는 css 속성
-float 하게 될 경우의 변화
①가로 나열 : 나열하는 요소는 다같이 묶어서 float을 사용함// 남아있는 공간에서 왼쪽or오른쪽에 붙는다.
②부모의 배경색or높이를 읽어야 하는 모든 속성이 사라짐 : 자식이 둥둥 떠다니는 상태이므로 부모의 높이값을 제대로 읽을 수 없다. 따라서 어디까지에 대한 범위설정이 모호해지기 때문에 배경색이 적용되지 않는 것.
③메뉴구현시 많이 사용 : sub, main 메뉴들
④📌float은 해지 작업이 필수!
⑤float은 가운데 정렬이 안된다- 따라서 여백을 줘야 함(문단이 아닌 떠다니는 덩어리이기 때문)
⑥보여지는 화면을 100%라고 했을 때 주어진 요소들을 가로 나열하고 싶으면 요소들의 너비 비율의 합이 100%가 된다.
✔ text-align이란?
텍스트 정렬 / width가 100% 전체를 잡는 block요소에 적용. 부모-block요소, 자식-inline요소일때 inline요소가 정렬된다.
4. background-clip
배경이미지나 배경색을 어디까지 지정하는지 정하는 css 중 하나.
→border-box : 박스모델의 가장 외곽인 테두리(border)까지 적용(기본값)
→padding-box : 테두리를 뺀 패딩 범위까지 적용
→content-box : 내용부분에만 적용
→initial : 기본값으로 설정
