[2-2] 반응형 웹 사이트 구축하기 (1)

rem = em 과 같이 쓰임.
반응형을 위해서 최적화 된 단위.

rem / em
= HTML 에 설정된 폰트 사이즈에 영향을 받음.

HTML 의 폰트 사이즈 = 16px
1rem = 16px

만약, HTML 의 폰트 사이즈가
17px로 지정됐을 경우,
1rem은 17px 이 된다.

HTML 에 있는 font-size는
시스템의 기본 설정에 의해서도 계속 바뀜.
- "반응형"으로 제작할 땐,
미디어 쿼리의
font-size에 vw 를 삽입해준다.
= 손쉽게 스타일들이 일정하게 줄어들도록
만들어 줄 수 있음.

피그마에서의 p태그 폰트 사이즈
= 27.2

1rem = 16px
이므로
27.2를 16으로 나눠줌.
27.2 / 16 = 1.7 나옴
* 1.7 rem 인 것.

em = 부모 / 자신의 영향 받음.
1em = 27.2 가 됐기 때문에
46.2 를 27.2 로 나눠주면
= 1.698
반올림해서 1.7로 작성.

행간은 line 의 1.7em 으로 작성됐다 보면 됨.

마진 = 상하의 여백에 영향을 받음, 세로로 늘어났다 줄였을 때도 영향을 받음.
대지 사이즈가 1440 x 800 px 으로 지정됐으니
80 을 800 으로 나눴을 때 10이 되며
10vh 로 margin 넣을 수 있다.

margin-left, right 를 동시에 auto 로 적용하게 될 경우,
가운데 정렬 가능

여기서 vh는 viewport height의 단위로, 화면의 높이에 상대적인 값을 나타냅니다.
이렇게 설정함으로써, 웹 요소는 화면의 높이에 따라 크기가 조절되며,
다양한 화면 크기와 종횡비에서 일관된 배치를 유지할 수 있습니다.
auto는 수평 방향의 마진을 자동으로 설정한다는 것을 의미합니다.
이는 수평 중앙 정렬을 달성하기 위해 사용됩니다.
따라서 이 코드는 요소를 수직으로는 화면의 10%만큼 아래로 이동하고,
수평으로는 화면의 중앙에 배치하는 역할을 합니다.