210823 오늘은 JS ES5문법을 사용하여 자동으로 전환되는 이미지 갤러리를 만들었다.
※ script를 작성할 때 필요한 경우의 수를 하나 하나 자세하게 생각하자(수도 코드를 작성하는 것 리마인드...)
상대적인 em(부모 font-size의 비례), rem(root의 font-size의 비례), vw, vh, %를 활용하자.
.text {
font-size: 8em;
}
.text > p {
font-size: 0.5em;
font-size: 0.5rem; // 16px 의 0.5
}
//위와 같은 경우에 .text는 기본 font-size인 16px의 8배로 128px이 되고, .text의 자식인 p는 128px의 0.5배인 64px이 된다.
상하는 em 좌우는 rem이 적합하다.
.title {
font-size: 1.75rem
padding: 0.5em 0.5rem;
}
.contetnt {
font-size: 1.5rem
padding: 0.5em 0.5rem;
}