웹4 3일차- 반응형 기초

* 반응형과 고정형

-. 반응형과 고정형 두가지 개념이 섞이게 되면 이도저도 아닌 사이트가 구현된다.

-. 반응형 사이트는 특정한 상황을 제외하고 대부분 퍼센테이지로 구현된다.

 

* 앱과 반응형 사이트

앱 : 플레이스토어나 앱스토어에서 판매하는 상품

반응형 사이트 : 플랫폼에서 판매하는 앱이 아닌 url주소로 접속하는 모바일 기기의 반응할 수 있는 사이트이다

이 두가지는 개발되는 방향이 완전히 다르다

( 안드로이드 개발자와 IOS개발자 준비는 완전히 다르다)

언스플레시 사이트 바로가기-무료 사진 사이트

 

 

 

[반응형 이미지]

수업 코드펜 바로가기

 

-. 이미지 삽입

img 태그 안에 이미지 주소를 넣어준다 (alt 이름 지정 무조건 하기)

 

-. 이미지는 우리가 직접 태그에 %를 걸어주지 않는 한 고정형으로 작동한다

-. 이미지는 기본 display가 inline이기 때문에 하단에 여백이 생긴다

ㄴ 이미지에 너비를 100%로 설정하게 되면 반응형으로 바뀌나 배경 색도 삭제된다.

 

 

****** 반응형 이미지

-. 반응형 이미지는 정말 특정한 경우를 제외하곤 width: 100%로 설정된 상태로 구현된다.

-. 반응형 이미지는 대부분 width: 100%로 커스텀되기 때문에 여백을 없애는 용도로 auto값이 100%인 display: block;으로 바꾸어서 사용된다.

 

 

-. 원하는 높이만큼 이미지 사이즈 조정 후 위치 조정

height: 300px; overflow: hidden; 을 사용하여 - 클리핑 마스크라고 생각하면 됨

 

-. img 태그를 감싸고 있는 img-box에 원하는 너비나 높이를 지정하고 지정된 사이즈 외 전부를 잘라서 보여주겠다는 overflow코드를 img-box에 적용한다.

-. 이미지 위치 조정은 absolute없이 음수 마진이나 양수 마진 값을 사용하여 조정한다.

 

[높이가 고정된 반응형 이미지]

수업 코드펜 바로가기

 

* 문제 풀이 목적

- 화면을 줄였을 때 화면 크기에 맞춰서 유연하게 작동해야하며 높이는 500px로 고정되어 있어야 한다

- 화면이 줄었을 때 이미지가 찌그러지면 안되고 이미지 중앙을 보여야 한다

ㄴ 웹1 때 배웠던 개념으로 풀이하면 됨 / 이미지에 관련된 속성(정답:)을 생각해보 ㅊㅍ자 / 구글검색 가능

ㄴ 검색 키워드 : css이미지가 찌그러졌을 때 해결방법

 

object-fit: cover; 은 고정형, 반응형, 영상에서도 쓴다

 

▶숙제 코드펜 바로가기

 

[미디어쿼리]

수업 코드펜 바로가기

 

* 미디어쿼리 목적

- 화면이 1000px 정도가 되면 박스 사이즈가 100px*100px로 줄어들고 오른쪽으로 100px을 이동한다. 이동할 때 0.3초동안 이동될 수 있도록 구현한다.

- 1000px 이상일때는 작동하지 않는 코드를 구현해야 한다  (최대치가 1000px이다)

 

 

transition을 사용할 때는 일반적인 태그에 사용하도록 함

 

▶숙제 코드펜 바로가기

 

[max-width 주의사항과 해결방법]

수업 코드펜 바로가기

 

* max-width 주의사항

- 너비가 auto일때 0으로 작동하는 요소들은 max-width를 적용했을 때 제대로 적용되지 않는다는 특징이 있다

(해결방안)

- width: 100%; 와 함께 적용한다

 

* max-width 특징

- width와 완전히 다른 속성 취급 받는다

- width속성과 max- width속성을 함께 사용할 수 있다.

 

[]

수업 코드펜 바로가기

 

▶ 숙제 코드펜 바로가기

 

@@ 간단하게 디자인 해보기

1. 무료 이미지 사이트(언스플레시)에서 내가 원하는 분위기 사진 한장 찾기

2. 어떤 분위기인지 한줄에 정리하기 (예시:겨울바다같은 따뜻하지만 어두운)

3. 내가 추구하는 분위기와 비슷한 웹사이트 서칭(디비컷, 지디웹)

4. 서칭한 웹사이트의 배경색과 높이를 카피해서 적용

 

 

숙제

지속적으로 웹사이트 찾아보고 관찰해보기

1. 폰트 사이즈/두께/자간

2. 전체적인 글자너비

3. 오브젝트끼리의 여백

4. 

 

컨셉 하나 잡아서 탑바 만들기 숙제