css: font-stretch 글자의 장평 정하기 / max-width 등 width 속성

언제나 그렇듯, 스킨을 고쳐가며 적고 적어가며 알게된 내용.

font-stretch 속성은 장평, 즉 "A"나 "가"같은 글자의 가로폭을 늘였다 줄였다 한다. 하지만, 모든 글꼴에 대해 적용되지 않는다. 글꼴 파일에 정의된 폭이 있을 때만 적용되므로, 특정 웹폰트를 임베딩할 때처럼 결과가 분명할 때만 사용할 것.

출처: https://www.w3schools.com/cssref/css3_pr_font-stretch.asp

(매우 유용한 곳이지만, 열어놓고 방치해두면 웹페이지가 가끔 cpu를 잡아먹는 사이트 중 하나. 오래 켜놓지는 말 것)

https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch

width, min-width, max-width 는 글자 그대로다. 정의상 max-width 는 width를 override한다. 단, width가 가변적일 땐 포함하고있는 콘텐츠라든가, !important를 쳐주었거나, 상위 클래스에서 어떻게 규제해놨냐에 따라 결과는 해봐야 아는 것 같다.

https://www.w3schools.com/css/css_dimension.asp

(예제를 직접 해볼 수 있다)

min-width:700px !important; max-width:900px !important로 지정하면 div 태그로 만든 박스가 가로 800px를 못 넘을 때(그 상위의 div가 가로 800px라거나), width:850px !important를 지정해 고정하면 그렇게 보이기도 한다. 반응형 스킨에서는 @media 를 써서 경우에 따라 저해상도 스마트폰, 고해상도 스마트폰, 태블릿, PC웹에서 보이는 div width를 각각 지정해줄 수 있을 것이다. 무조건 현재 해상도에서 +150px width를 잡아주고 싶으면 tt- 로 시작되는 변수를 써줘야 하는 모양인데.. 그건 아직 해보지 않았다.