{**Tip**}
언스플래쉬: 무료 이미지 사이트
핀터레스트: 이미지 참고 사이트
[반응형과 고정형]
- 반응형과 고정형 두가지 개념이 섞이게 되면 이도저도 아닌 사이트가 구현된다.
- 반응형 사이트는 특정한 상황을 제외하고 대부분 퍼센테이지로 구현된다.
[앱과 반응형 사이트]
- 앱은 플레이스토어나 앱스토어에서 판매하는 상품
- 반응형 사이트는 플랫폼에서 판매하는 앱이 아닌 url주소로 접속하는 모바일 기기에 반응할 수 있는 사이트
- 이 두가지는 개발되는 방식이 완전히 다르다.
[반응형 이미지]
- 이미지는 기본 고정형으로 작동
- 이미지 기본 display 속성값이 inline으로 하단 여백 있음 => 여백 제거: display: block;으로 설정해서 사용.
- 반응형 이미지는 정말 특정한 경우를 제외하고 width: 100%;로 설정된 상태로 구현됨.
[최소 높이 고정된 반응형 이미지]
- img태그를 감싸고 있는 img-box에 원하는 너비나 높이를 지정
- img-box에 overflow:hidden;적용 => 넘치는 이미지 안 보임.
- 이미지 위치 조정 => margin: ±원하는 값;
- max-height로 최소 높이 지정
- 이미지가 찌그러지면 안되므로 object-fit: cover;로 설정
[미디어 쿼리 목적]
사용자들이 사용하는 기기는 최소 320px부터 1920px이상까지 굉장히 너비 스펙트럼이 넓어서,
페이지 구조를 그대로 유지할 수가 없다.
그래서 너비에 따라 구조를 변경시켜주기 위해 미디어 쿼리를 사용한다.
일반적으로 핸드폰 / 태블릿&패드 / PC, 3가지로 기준을 나눠 구조를 유동적으로 바꿔준다.
[max-width 특징]
- width와 완전히 다른 속성 취급 받는다.
- width속성과 max-width 속성을 함께 사용할 수 있다.
※주의사항
width: auto일때 0으로 작용하는 요소들은 max-width를 적용했을 때 제대로 적용되지 않으므로 width: 100%와 함께 적용.
[간단한 디자인 해보기]
1. 무료이미지 사이트에서 내가 원하는 분위기 사진 한 장 찾기
2. 어떤 분위인지 한 줄에 정리하기(예시: 겨울바다같은 따뜻하지만 어두운)
3. 내가 추구하는 분위기와 비슷한 웹사이트 서칭(디비컷, 지디웹)
4. 서칭한 웹사이트의 배경색과 높이를 카피해서 사용
ex)
스타벅스 사이트 디자인 카피 스타벅스 링크
컨셉 사진(배경 사진) : 카페
포인트 사진1 : 커피
포인트 사진2 : 논커피(스무디)
포인트사진3 : 제빵류(쿠키)
