0047 CSSFont Weight, Style, Variant


Font Weight


Font Weight글꼴의 굵기를 말한다. font-weight 속성(property)으로 다음과 같이 설정한다.

     

font-weight: normal; → 굵지 않음

font-weight: bold;   → 굵음


만일, 기본 설정이 bold이거나 부모로부터 bold를 상속받는 요소라면 해당 요소에 다음과 같은 선언을 다시 적용하여 bold를 제거할 수 있다. 

     

font-weight: normal; → 굵지 않음


이론적으로는 bolderlighter와 같은 상대적인 굵기 단위를 사용하여 상속받은 굵기보다 굵거나 얇게 만들 수 있다. 

      

혹은, 절대적인 굵기 단위100~900 사이의 숫자로 font-weight속성값을 설정할 수 있다. 하지만 대부분의 폰트들은 이렇게 다채로운 굵기로 제시되지 않고 브라우저도 잘 지원하지 않아 결국, 실무에서는 normalbold만 그 속성값으로 사용한다. 

    

다음과 같이 작성하여 0047_font_weight.html로 저장하고 실행해보자. 

            

<!DOCTYPE html>

    

<html>

<head>

<title>font weight</title>

</head>

<body>

<p style="font-weight: bold;">폰트 굵기(bold)</p>

<p style="font-weight: normal;">폰트 굵기(normal)</p>

<p style="font-weight: 100;">폰트 굵기(100)</p>

<p style="font-weight: 200;">폰트 굵기(200)</p>

<p style="font-weight: 300;">폰트 굵기(300)</p>

<p style="font-weight: 400;">폰트 굵기(400)</p>

<p style="font-weight: 500;">폰트 굵기(500)</p>

<p style="font-weight: 600;">폰트 굵기(600)</p>

<p style="font-weight: 700;">폰트 굵기(700)</p>

<p style="font-weight: 800;">폰트 굵기(800)</p>

<p style="font-weight: 900;">폰트 굵기(900)</p>

</body>

</html>


실행한 결과는 다음과 같다. 폰트 굵기 100~500까지는 normal과 동일하고, 600~900까지는 bold와 동일하게 굵게 나타나기만 하는 것을 확인할 수 있다. 




Font Style


Font Style은 보통 텍스트를 이탤릭으로 처리하기 위하여 font-style 속성(property)을 사용한다.

     

font-style 속성(property)은 세 가지 속성값을 갖는다.

            

font-style: normal; → 변화 없음

font-style: italic; → 이탤릭

font-style: oblique; → oblique는 italic과 매우 비슷



Font Variant


Font Variant font-variant 속성을 이용하여 텍스트를 작은 대문자 글꼴(small-caps font)로 할지 여부를 결정한다. 작은 대문자 글꼴(small-caps font)소문자를 전부 원래의 글꼴 크기보다 작은 대문자로 표기하는 글꼴을 말한다. 

    

font-variant: normal; → 변화 없음 

font-variant: small-caps; → 텍스트가 작은 대문자 글꼴로 나타남


작은 대문자 글꼴로 텍스트를 나타내면 다음과 같다. 

    

<p style="font-variant: small-caps;">HTML ankilog font variant</p>




Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:   0047 CSS의 Font Weight, Style, Variant.apkg




0046 font-size 설정하기


앞에서 절대 길이(absolute length)상대 길이(relative length) 등을 살펴보았으므로 이제 font-size에 사용되는 길이(length)들이 어떻게 작동하는지 대충 알게 되었다. 

       

텍스트의 크기를 결정하는 것은 알게 되었지만 중요한 것은 다양한 브라우저들 사이에서 일관된 결과물을 만들어내는 것이므로 주로 사용되는 방법에 대해서 알아보자. 


우선, <body> 요소에 텍스트의 크기를 규정하여 웹페이지의 기준 텍스트 크기를 설정한다.

그리고 다른 요소들은 em이나 %를 사용하여 상대적인 비율로 텍스트의 크기를 결정한다.


<body> 요소에 기준이 되는 텍스트 크기를 설정할 때, %를 사용한다. 브라우저는 보통 기본 텍스트 크기16px로 설정한다. 따라서 <body> 요소에 텍스트 크기%로 설정하면 16px에 대하여 비례하는 텍스트 크기가 된다. 


<body> 요소의 텍스트 크기상대 길이(relative length)%를 이용하여 규정하면 나중에는 기준이 되는 <body> 요소의 텍스트 크기 조절하여 전체 웹페이지텍스트 크기를 자연스럽게 조절하는 것이 가능해진다.


관련 자료를 찾다보니 불문율 같은 것이 느껴졌다. 이론적으로는 <body> 요소에서 텍스트 크기를 규정할 때 em이나 %나 모두 동일한 상대 길이(relative length)인데 W3C 튜토리얼이나 교재들을 뒤져보면 모든 예제에서 <body> 요소의 텍스트 크기는 반드시 %키워드로 규정하고 있다(키워드는 다루지 않으려고 한다.). 하물며 W3C에서는 em 사용을 권장하면서도 예제에는 <body> 요소에서 em으로 텍스트 크기를 설정하는 사례를 보여주지 않는다. 


그래서 Chrome FireFox에서 몇 가지 비교 테스트를 해보았지만 <body> 요소에서 font-size em으로 정의하나 %로 정의하나 전혀 차이가 없었다. 그래서 불문율이 실제로 있는 것인지 명확하지 않다. 개인적인 망상일지도 모른다고 생각하지만 워낙 HTML의 발달사가 혼란스러워서 과거에 어떤 문제가 있었는지도 모른다는 생각이 든다. 관련 자료를 찾아보니 디자인적인 문제와 개념적인 문제가 혼재되어 이야기를 전개하고 있어 내 역량을 넘어서는 문제라는 생각도 든다. 이에 대한 부분은 좀 더 전문적인 디자이너로 거듭날 때 파악하는 것으로 하고 em%에 대한 이야기는 이제 그만하려고 한다. 


em이나 %가 아닌 반응형으로 Font 크기를 결정할 수 있다. 이에 대한 상세한 내용은 0045 CSS 반응형 길이(responsive length) 단위 포스팅을 참고하기 바란다.


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0046 font-size 설정하기.apkg




0045 CSS 반응형 길이(responsive length) 단위


오늘날에는 컴퓨터가 데스크탑, 노트북, 모바일 기기, 냉장고, 자동차 등 다양한 기기에 다양한 목적으로 설치되어 인터넷에 연결되어 있다. 이 때, 디스플레이 규격이 모두 천차만별이라 다양한 상황에 대응할 수 있는 반응형(resposive) 길이(length)를 사용할 필요가 있다. 

      

반응형(resposive) 길이(length)라는 것은 브라우저 창(viewport) 크기에 따라 길이가 변하는 상대 길이(relative length)를 말한다. 

      

다음과 같은 종류가 있다. 

    

vw : 화면(viewport) 너비(width)의 1%1vw로 하는 단위

vh : 화면(viewport) 높이(height)의 1%1vh로 하는 단위

vmin : 1vw와 1vh 중 작은 쪽1vmin으로 하는 단위

vmax : 1vw와 1vh 중 큰 쪽1vmax로 하는 단위


개념을 알았으니 다음과 같이 0045.html 파일을 작성하고 이를 실행해보자. 

    

<!DOCTYPE html>

    

<html>

<head>

<title>반응형 길이</title>

</head>

<body>

<p style="font-size: 5vw;">

 5vw의 텍스트 크기

</p>

<p style="font-size: 5vh;">

 5vh의 텍스트 크기

</p>

<p style="font-size: 5vmin;">

 5vmin의 텍스트 크기

</p>

<p style="font-size: 5vmax;">

 5vmax의 텍스트 크기

</p>

</body>

</html>


실행한 브라우저 창인 뷰포트(viewport)에서 너비(width)를 키워 높이(height)보다 크게 만드니 (vw > vh) 다음과 같은 관계가 성립하는 것을 볼 수 있다. 

      

5vw=5vmax

5vh=5vmin



실행한 뷰포트(viewport)에서 높이(height)를 키워 너비(width)가 보다 크게 만드니 (vw < vh) 이번에는 다음과 같은 관계가 성립하는 것을 볼 수 있다. 

     

5vw=5vmin

5vh=5vmax




Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0045 CSS 반응형 길이(responsive length) 단위.apkg




0044 CSS의 길이(length) 중 상대 길이(relative length)


앞에서 CSS절대 길이(absolute length)를 다루면서 웹페이지는 모니터 스크린에 구현되므로 절대 길이(absolute length) 중에서 픽셀(px)을 자주 사용한다는 점에 대해서 언급했다. 하지만 절대 길이(absolute length) 보다는 상대 길이(relative length)를 사용하는 경우가 훨씬 더 많다

       

상대 길이(relative length)란 것은 다른 기준이 되는 길이에 비례하여 결정되는 길이를 말한다. 여기에서 기준이 되는 길이를 어떤 것으로 잡느냐에 따라서 다양한 상대 길이(relative length)가 나온다. 

      

W3C의 튜토리얼에서 상대 길이(relative length)로 제시하는 단위들은 다음과 같다. 

     

em, ex, ch, rem, vw, vh, vmin, vmax, %


각각의 설명은 다음과 같다. 

     

em : 현재 요소의 텍스트 크기1em으로 하는 단위

ex : 현재 텍스트 크기에서 소문자 x의 높이1ex로 하는 단위

ch : 현재 텍스트 크기에서 숫자 "0"의 너비1ch로 하는 단위

rem : 루트 요소의 텍스트 크기1rem으로 하는 단위이다. 

vw : 화면(viewport) 너비(width)의 1%1vw로 하는 단위

vh : 화면(viewport) 높이(height)의 1%1vh로 하는 단위

vmin : 1vw와 1vh 중 작은 쪽1vmin으로 하는 단위

vmax : 1vw와 1vh 중 큰 쪽1vmax로 하는 단위

% : 부모 요소의 텍스트 크기에 비례하는 단위  (이 부분은 조금 잘못되었다.)


이 중에서 ex, ch, rem은 많이 사용하지 않는 단위들이고 vw, vh, vmin, vmax화면(viewport) 크기를 기준으로 상대적인 크기를 갖는 단위이므로 다음 기회에 살펴보고 가장 자주 사용하는 em% 자세히 살펴보자. 

    

최근 CSS 관련 포스팅을 하지 못하고 있는 이유는 em%의 개념이 헷갈려 이것 저것 찾다가 결국 결론을 내리지 못했기 때문이다.

     

em%에 대한 W3C 튜토리얼의 정의는 다음과 같다.

     

em : 현재 요소의 텍스트 크기를 1em으로 하는 단위

% : 부모 요소의 텍스트 크기에 비례하는 단위


이 설명은 정확하지 않다. 위의 설명에 따르면 em % 모두 텍스트 크기를 기준으로 작동한다고 설명하고 있지만 실험해보면 em은 확실히 텍스트 크기를 기준으로 작동한다. 하지만 퍼센트(%)는 다양한 기준이 있다. 가령 다음과 같은 HTML을 작성해서 0044.html로 저장하고 실행해보자. (0044example.zip

     

<!DOCTYPE html>

    

<html>

<head>

<title>relative size</title>

</head>

<body style="font-size: 2em;">

<p style="font-size: 50%;">

첫 번째 p요소의 폰트 사이즈는 50%인 16px

</p>

<p style="font-size: 1em;">

두 번째 p 요소의 폰트 사이즈는 1em인 32px<br />

이미지는 높이 3em, 너비 100%<br />

<img src="sun.jpg" style="height: 3em; width: 100%;" alt="sun" />

</p>

</body>

</html>


모든 브라우저의 기본 텍스트 크기는 보통 16px로 설정되어 있다. 

       

따라서 <body> 요소에 적용되는 텍스트의 크기는 16px이고 이 상황에서 텍스트의 크기를 2em으로 설정되었을 때, 2em32px(2×16px)가 된다. 

     

<p> 요소는 <body> 요소의 을 받으므로 텍스트의 크기 32px로 설정된다. 

     

font-size 속성(property)에는 em이나 % 모두 동일하게 작용한다. em의 수치에 100을 곱하면 %가 나오는 관계로 아주 심플하다. 그래서 첫 번째 <p> 요소의 font-size50% 이므로 이는 0.5em이고 16px가 된다. 그리고 두 번째 <p> 요소의 font-size1em 이므로 이는 100%이고 32px가 된다. W3C에서 제시한 설명은 %는 부모 요소의 텍스트 크기를 기준으로 하고 em은 현재 요소의 텍스트 크기를 기준으로 한다고 설명되어 있지만 실제 font-size에 적용해보면 부모 요소를 기준으로 하거나 현재 요소를 기준으로 하는 경우에도 차이가 없다.

     

하지만 우리가 지금 이야기하고 있는 것은 텍스트의 크기 뿐만 아니라 상대 길이(relative length)에 대하여 이야기하고 있는 것이므로 이 상대 길이를 다른 것에 적용할 때 어떻게 달라지는지 살펴볼 필요가 있다. 

    

0044.html에는 <p> 요소 내부에 <img /> 요소를 중첩시켜 놓았다. 

그리고 그 <img /> 요소의 크기(size) style="height: 3em; width: 100%;" 으로 높이3em이고 비가 100%로 규정해놓았다. W3C에서 제시한 바에 따르면 이런 경우 너비<p> 요소의 텍스트 크기인 32px가 되어야 할 것이다.

       

이제 0044.html을 실행해보자. 



가장 위의 첫 번째 <p> 요소는 텍스트 크기가 16px로 설정되어 있고, 그 아래의 두 번째 <p> 요소는 32px로 나타난다. 텍스트 크기를 결정하는 font-size 속성(property)에서는 em%완전히 동일하게 작동한다. 

     

하지만 이미지의 크기에서는 전혀 다르다. 위의 결과에서 이미지의 높이3em으로 설정되어 있다. 해당 이미지의 여백까지 생각하면 얼추 96px(3×32px)로 제대로 작동하고 있는 것 같다. 하지만 너비(width)100%이므로 32px가 되어야 하는데 가로폭을 완전히 차지하는 모양으로 나타난다.

     

이는 브라우저 창의 가로폭을 이리저리 변화시켜 보아도 이미지는 항상 가로폭 전체에 걸쳐 나타나도록 변형되는 것을 다음과 같이 확인할 수 있다.



이는 결국, <img /> 요소의 너비로 부과된 100%브라우저 창의 가로폭 전체를 의미한다는 것을 알 수 있다. 즉, W3C에서 설명한 것과는 다르게 부모 요소의 텍스트 크기를 반영하는 것이 아니라 너비처럼 해당 CSS 속성(property)에 설정된 별도의 기준작동하는 것을 알 수 있다. 

      

반대로, em<img /> 요소의 크기를 결정하는 상대 길이(relative length)를 결정할 때에도 font-size를 기준으로 해당 크기를 적용하고 있다. 

     

이외에도 이리저리 실험을 계속해본 결과 다음과 같은 사실을 알게 되었다. 

      

em은 기존의 설명대로 현재 요소의 텍스트 크기를 1em으로 하는 단위라고 하면 된다. 하지만 %는 부모 요소의 텍스트 크기가 아닌 그냥 %가 쓰이는 해당 속성(property) 크기에 비례하는 단위로 수정하면 타당하다.

      

em은 해당 요소의 font-size1em으로 하는 값이고 이 값은 다른 CSS 속성에도 그대로 적용할 수 있다. 즉, 다른 CSS 속성의 길이(length)해당 요소의 텍스트 크기에 따라서 상대적인 길이로 조정되는 것이다. 

하지만 %는 각각의 CSS 속성 별로 정해진 별도의 길이를 기준으로 작동한다. font-size 속성에서는 %의 기준이 부모 요소font-size 속성값을 기준으로 비례하지만 해당 %width로 가져가면 이는 부모 요소width 속성값을 기준으로 비례하지 해당 요소의 font-size 속성을 기준으로 비례하지 않는다. 또, %는 어떤 경우에는 작동하지 않는 것 처럼 보이기도 한다. 

     

가령, CSS에서 border 속성경계선의 두께%로 주면 경계선이 나타나지 않는다. 즉, 다음과 같은 경우다.(참조 0044_1.html)

     

<p style="border: 100% solid red;">첫 번째 p 요소</p>

<p style="border: 1em solid red;">두 번째 p 요소</p>


실행해보면 다음과 같이 두 번째 <p> 요소에만 경계선이 1em 두께로 나타나는데 결론적으로 말하면 부모 요소인 <body> 요소에 경계선이 없어 두께0px이므로 이를 기준으로 하는 % 길이도 같이 0px가 되어 경계선이 나타나지 않는 것이다.



이리저리 실험해보고 내리고 생각해본 결과 em%의 차이를 나름 정리해보았다. 결국, W3C에서 em을 기준으로 작성하라고 권고하는 이유도 em텍스트의 크기를 기준으로 다른 CSS 속성(property)의 길이를 모두 규정할 수 있어 일관되면서도 광범위하게 사용할 수 있기 때문이 아닌가 싶다. 

    

이 내용들은 명쾌하고 믿을만한 자료를 찾지 못해서 임의로 이것저것 실험해보고 스스로 개인적인 확신으로 결론을 내렸으니 주의하시기 바랍니다.


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0044 CSS의 길이(length) 중 상대 길이(relative length).apkg


2019/01/03 pm 2:40 Ankilog 문구 일부 수정




+ Recent posts