<목차>
- px, em, rem 의 차이점
- reset.css 또는 normal.css가 필요한 이유
- Tailwind CSS의 장점과 주요 개념
3. px, em, rem 의 차이점
px
- 고정되어있는 절대값
- 픽셀
- 디지털 화면에 표시되는 가장 작은 단위
- 요소나 설정의 영향을 받지 않는다.
em
- 환경에 따라 변하는 상대 단위
- 부모 요소의 글꼴 크기에 상대적
- 부모요소의 글꼴 크기가 16픽셀이고 자식요소의 글꼴 크기가 1em이면 자식 요소의 글꼴 크기도 16픽셀이 된다.
rem
- em과 마찬가지로 환경에 따라 변하는 상대 단위
- root em : root요소의 글꼴 크기에 기반
- 반응형에 적합
Q. CSS의 단위 중 px, em, rem 의 차이점에 대해 설명해주세요.
=> px는 픽셀을 간단하게 표현한 말로 고정되어있는 절대값입니다. 디지털 화면에서 표시되는 가장 작은 단위를 뜻하며 픽셀로 요소의 크기를 지정한 경우 다른 요소나 설정의 영향을 받지 않습니다. 그와 반대로 em과 rem은 환경에 따라 변하는 상대 단위 입니다. 우리가 반응형을 만들때는 px보단 em, rem사용하는 것이 더 적합합니다. em과 rem의 차이는 em의 경우 부모 요소의 글꼴 크기를 기준으로 1em 크기가 정해지고 rem의 경우 root rem 의 줄임말로 루트 요소의 글꼴 크기를 기준으로 1em 크기가 정해집니다.
4. reset.css 또는 normal.css가 필요한 이유
- reset.css와 normal.css는 웹페이지의 스타일을 초기화하거나 일관되게 유지하는데 사용되는 css 도구
- 웹페이지가 다양한 환경에서도 예측 가능하고 일관된 방식으로 렌더링 되도록 돕는다.
- 협업시 모든 개발자와 디자이너가 각자 갖고있는 다양한 웹환경을 조정하고 일관된 스타일링을 보여주기 위함
Q. reset.css 또는 normal.css가 필요한 이유를 설명할 수 있습니다.
=> reset.css와 normal.css는 웹페이지의 스타일을 초기화하거나 일관되게 유지하는데 사용되는 css 도구 입니다. 이러한 css도구를 사용하여 브라우저마다 설정되어있는 미세한 차이들을 없앨 수 있습니다. 다시 말하면 협업시 모든 개발자와 디자이너가 각자 갖고있는 다양한 개발 환경을 reset.css나 normal.css를 통해 조정하고 일관된 스타일링이 렌더링 되도록 만들 수 있습니다.
5. Tailwind CSS의 장점과 주요 개념
- 유틸리티 우선의 css프레임워크
- 전통적인 css 캐스케이팅 원칙을 지양
- 클래스를 통해 각 HTML 요소에 직접 스타일을 적용
- 예상치 못한 스타일 상속 문제를 방지, 코드 예층가능성을 상승
- 유연성 및 사용자 정의 용이성 : 테일윈트 설정 파일을 통해 디자인 시스템을 쉽게 조정
- 반응형 디자인에 적합 : 반응형 유틸리티 클래스 내장
- 유틸리티 클래스 재사용 -> css 코드 중복 최소화, 프로젝트 유지 관리 용이
- 사용되지 않는 스타일을 자동으로 제거 -> 번들 크기 ↓
Q. Tailwind CSS의 장점과 주요 개념을 설명해주세요.
=> tailwind css는 유틸리티 우선의 css 프레임 워크입니다. 스타일을 HTML에 바로 적용하는 전통적인 방식을 따르지 않고 모든 스타일을 클래스로 나눠져 있고 이를 조합해서 사용합니다. 자신만의 css 맛춤 설정을 해둘수 있는 기능이 함께 들어있습니다. 이러한 기능들을 개발자는 좀 더 손쉽고 간단하게 사용할 수 있고 예상치 못한 문제들을 방지하고 코드를 좀 더 잘 예측 할 수 있습니다. 이미 만들어진 코드를 사용하는 것이기 때문에 중복을 줄이고 파일 크기가 감소 합니다.
