TIL : 반응형 웹 2

 

https://www.youtube.com/watch?v=yRyphOqSFKo&list=PLFeNz2ojQZjvPhBMUy3-641YBOOyLrXYS&index=1
위 강의를 요약한 블로그 글입니다.

 

🌼 함수 개념과 calc()

css함수 calc()를 이용하면 계산식의 결과를 속성값으로 지정할 수 있다.

width: calc()

메시지 창을 80%하고 전송버튼을 20% 하면 창의 크기를 늘렸을 때 버튼이 너무 커져서 별로고,

전송버튼을 100px로 하고 메세지 창을 80%으로 하면 20%에서 100px 뺀 만큼의 여백이 생긴다.

그럴 때 width: calc()를 사용해준다.

 width: calc(100%-100px);

브라우저가 넓어져도 여백이 생기지 않음

 

🌼 미디어 쿼리

미디어 타입을 인식하고, 콘텐츠를 읽어 들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능).

 

🌼 가변 이미지

사진이 원래 크기보다 커지면 픽셀이 깨지고 보기 좋지 않음

그럴 땐 max-width를 지정해 준다. 

 

- picture와 source 요소는 이미지를 미디어 조건에 맞게 선택적으로 불러올 수 있는 요소이다.

<picture>
	<source srcset="이미지1" media="(min-width:800px)"> // 미디어 조건에 부합하면 이미지1을 보여준다
    <img src="이미지"> // 기본 이미지
</picture>

 

 

🌼 가변 동영상

=> 추가 공부 필요

 

🌼 모듈화 디자인

컴포넌트란 독립적이고 재사용이 가능한 모듈을 뜻한다. 

모듈화란? 개별 컴포넌트를 하나의 조립 부품(모듈)으로 보고 작업하는 것.

 

모듈화가 주는 이점

반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형 페이지가 된다.

페이지의 일관성을 유지하기가 용이하다.

 

- reset.css

 

🌱 실습하면서 다시 정리하기