트위치 카피캣 1일차

---

작성된 본문 헤더

간단하게 길이 속성만 정리해보겠다.

---

px, em, rem

PX to em 변환 에서 px 단위를 em단위로 바꿀 수 있다. rem 단위로 쓰이는 경우도 있으나 px to rem 사이트는 접속이 되지 않는 듯 하다.

그래서 따로 정리해 두자면

• px(픽셀) : 모니터의 최소 표현 단위. 모니터 사이즈나 픽셀 구성에 따라 달라진다. 반응형 웹 작업엔 좋지 않다.

• em(엘리먼트) : 부모/현재 클래스에 정의된 폰트 사이즈를 1em으로 정의한다.

.mother{
	font-size: 12px;
}
.mother .son{
	font-size: 0.5em;
}
.mother .son .grandson{
	font-size: 3em;
}

이때, son의 폰트 사이즈는 6px, grandson의 폰트 사이즈는 son의 것을 상속 받기 때문에 36px이 아닌 18px으로 된다.

• rem(root em) : html의 폰트 사이즈를 1rem으로 정의한다.

.html{
	font-size: 10px;
}
.mother{
	font-size: 2rem;
}
.mother .son{
	font-size: 0.5rem;
}
.mother .son .grandson{
	font-size: 3rem;
}

코드 전체에서 1 rem의 크기는 바뀌지 않아 mother의 폰트사이즈는 20px, son의 폰트 사이즈는 5px, grandson의 폰트 사이즈는 30px으로 된다.

---

학습 소감

아직은 헤더 부분만 진행해서 여태 하던 것과 차이가 없어 큰 어려운점은 없었다.

진행한 코드 링크

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.