CSS 예제 속성 복습
-텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요? text-align:center;
-글자 색을 바꾸기 위한 속성은 무엇인가요? color
-배경 색을 바꾸기 위한 속성은 무엇인가요? background-color
-background 속성과 background-color 속성은 어떻게 다른가요?
background는 배경과 관련된 여러 속성을 한번에 설정하는 단축속성이고, background-color는 이 중에서 배경색을 설정하는 속성이다.
-em의 의미는 무엇인가요?
font-size 속성을 설정하는 속성값은 absolute-size, relative-size, length, percentage, 전역값 등으로 구분할 수 있다.
absolute-size: 기본 유저 폰트 크기는 medium이고, 차례로 xx-small, x-small,small,medium,large,x-large,xx-large이 있다.
relative-size: 부모 엘리먼트의 폰트 크기에서 일정비율로 늘이거나 줄이고 larger, smaller 등이 있다.
percentage: %
전역값: inherit, initial, unset
length: em, ex는 부모 엘리먼트의 폰트 크기에 상대적으로 정해지고 px는 정적이고 운영체제 독립적이다.
픽셀: 픽셀 단위의 정확함이 필요하면 폰트 크기를 픽셀로 설정하는 것도 좋으나, 사용자가 폰트 크기를 브라우저를 이용해 바꿀 수 없으므로 접근성이 떨어진다. 그러므로 접근성이 높은 페이지를 만들기 위해서는 폰트 크기를 픽셀로 설정하는 것을 지양해야 한다.
em: em은 픽셀과 다르게 동적이다. 전체 페이지에 폰트 크기를 정의하지 않으면 보통 브라우저 기본인 16px로 지정되어 1em=16px이다. 만약 body 엘리먼트의 font-size를 20px로 정한 경우, 1em=20px이고, 2em=40px이다.
em=구하고자 하는 엘리먼트의 픽셀값 / 부모 엘리먼트의 font-size pixel 값
보통 문서 전체의 폰트 크기를 정할 때 많이 쓰는 방법은 body 태그의 폰트 크기를 10px와 같은 62.5%나 0.625em으로 설정해 1em=10px과 같게 설정해두고 6px=0.6em, 8px=0.8em, 12px=1.2em, 14px=1.4em 등으로 표현한다.
하지만 em은 부모요소를 기준으로 하기 때문에 다음과 같은 문제가 발생할 수 있다.
<style>
body{font-size:62.5%} /*1em=10px*/
span{1.6em;} /*1.6em=16px*/
</style>
<body>
<div>
<span>Outer <span>Inner</span> Outer</span>
</div>
</body>브라우저의 기본 font-size가 16px일 경우, Outer는 16px로 그려지고, Inner는 25.6px로 표현된다. 이는 em이 부모의 엘리먼트를 기준으로 계산되기 때문인데 이러한 문제를 '합성'이라고 부른다.
rem: rem은 합성의 문제를 피하기 위해 고안되어 부모 엘리먼트가 아니라 최상위 html 엘리먼트를 기준으로 한다.
<style>
html{font-size:62.5%} /*1em=10px*/
span{1.6rem;} /*1.6rem=16px*/
</style>
<body>
<div>
<span>Outer <span>Inner</span> Outer</span>
</div>
</body>이 경우 Outer, Inner 모두 16px로 보인다.
