❤️Liked 느낀 점
지난 주말은 제출 과제가 없어서 너무 좋았습니다!
주말동안 평일에 부족한 잠도 보충하면서 휴식도 취하고, 리액트 강의도 듣고 알찬 주말을 보낸 것 같아 뿌듯했습니다!
이번 강의에서는 이미지스프라이프 기법을 사용해서 왼쪽 이미지를 오른쪽이미지처럼 만드는 실습을 진행했는데
별점에 경우 여러 페이지에서 쓰이기 마련이고, 데이터에 따른 결과물이 다르기 때문에 미리 셋팅해놓는 것이 편리하다는 것을 느꼈습니다.
✏️Learned 공부한 내용
상대 단위 장단점
- 상대 단위의 장점:
- 유연성: 상대 단위(rem, em)를 사용하면 브라우저의 기본 폰트 크기 변경에 따라 웹사이트의 폰트 크기도 유동적으로 조정됩니다.
- 접근성 향상: 사용자가 기본 폰트 크기를 늘리면, rem 단위를 사용한 폰트 크기와 여백 등이 자동으로 비례하여 조정되므로 접근성이 향상됩니다.
- 현실적인 고려사항:
- 디자인 일관성 유지:
- 상대 단위를 사용하면 웹사이트의 전체 스타일이 사용자의 기본 폰트 크기 변경에 영향을 받을 수 있습니다.
- 이는 디자인의 일관성을 유지하기 어렵게 만들 수 있습니다.
- 개발 비용:
- 웹 접근성을 고려하여 상대 단위를 사용할 경우, CSS 작업이 복잡해질 수 있으며, 전체 스타일 조정이 필요할 수 있습니다.
- 이는 추가적인 개발 비용을 발생시킬 수 있습니다.
- 대안:
- 일부 개발자는 디자인의 일관성을 유지하기 위해 절대 단위(px)를 사용하기도 합니다.
- 사용자는 브라우저의 줌 레벨을 조정하여 폰트를 커지게 할 수 있지만, 이는 웹 접근성에 완벽한 해결책은 아닙니다.
- 디자인 일관성 유지:
rem 단위
문서의 최상위 요소인 <html>의 font-size를 기준으로 합니다.
특징
- 상위 요소의 영향을 받지 않으며, 항상 최상위 요소의 폰트 크기를 기준으로 합니다.
- 사용자 설정에 따라 폰트 크기를 조정할 때 유용합니다.
사용 용도
- 일관된 폰트 크기와 여백을 유지할 때 유용합니다.
- 문서 전체에서 상대적인 크기를 동일하게 유지하려는 경우에 적합합니다.
em 단위
현재 요소 또는 부모 요소의 font-size 속성을 기준으로 합니다.
특징
- 부모 요소의 폰트 크기에 따라 크기가 달라질 수 있습니다.
- 상속된 스타일에 따라 동적으로 크기가 변경될 수 있습니다.
사용 용도
- 특정 컨텍스트 내에서 상대적인 크기를 설정할 때 유용합니다.
- 중첩된 요소에서 크기를 상대적으로 조정하려는 경우에 적합합니다.
rem, em 단위 비교
폰트 크기 및 여백 같은 요소의 크기를 설정할 때 사용하는 상대 단위입니다.
기준점
- em: 현재 요소의 font-size를 기준으로 합니다.
- rem: 루트 요소(일반적으로 <html>)의 font-size를 기준으로 합니다.
계산 방식
- em: 1em은 현재 요소의 font-size와 같습니다. 예를 들어, font-size가 16px인 요소에서 1em은 16px입니다.
- rem: 1rem은 항상 루트 요소의 font-size와 같습니다. 기본적으로 대부분의 브라우저에서 1rem은 16px입니다.
중첩 영향
- em: 부모 요소들의 font-size에 영향을 받아 중첩될 수 있습니다. 이로 인해 계산이 복잡해질 수 있습니다.
- rem: 항상 루트 요소만을 참조하므로 중첩의 영향을 받지 않습니다.
반응형 디자인
- em: 개별 컴포넌트의 크기를 동적으로 조절하는 데 유용합니다.
- rem: 전체 페이지의 크기를 쉽게 조절할 수 있어 반응형 디자인에 효과적입니다.
추천 접근법: 웹 접근성을 고려한 CSS 단위 선택
- 상대 단위(rem, em) 사용:
- 웹 접근성 향상을 위해 기본 폰트 크기에 따라 자동으로 조정되는 상대 단위를 사용하는 것이 좋습니다.
- 이는 사용자의 편의를 보장하며 접근성을 높입니다.
- 절대 단위(px):
- 디자인의 일관성을 유지하기 위해 사용하는 경우가 있지만, 웹 접근성 측면에서 사용자의 기본 폰트 크기 조정을 무시할 수 있습니다.
😔Lacked 부족한 점
집에서 혼자 온라인으로 강의를 듣다보니 뒤에서 보는 사람이 없으니까
강의 중간 중간 집중력이 떨어지면 딴짓을 하게 되는데
요즘들어 딴짓하는 빈도가 높아져 중간중간 강사님께서 중요한 개념 설명을 제대로 듣지 못해서
강의를 듣는 동안 집중력을 높일 수 있는 방법은 무엇이 있는지 찾아봐야할 것 같습니다.
🙏🏻Longed For 앞으로 바라는 점
- 수업시간 딴짓하지 말기
'Education > ⛺BootCamp' 카테고리의 다른 글
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 19 ~ 20 [5주차] (0) | 2024.08.25 |
|---|---|
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 18 [5주차] (0) | 2024.08.21 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 16 [4주차] (0) | 2024.08.19 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 14 ~ 15[4주차] (0) | 2024.08.15 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 13[4주차] (0) | 2024.08.12 |
