WIT – NTS UIT Blog

(번역) CSS에 대한 깊은 이해: 폰트 매트릭스, line-height와 vertical-align

Posted by in Research, Translation

원문: http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align 본 번역문은 원작자인 Vincent De Oliveira의 동의하에 번역 및 게시되었습니다. line-height와 vertical-align은 아주 간단한 CSS 속성들입니다. 매우 간단하기 때문에 대분의 사람들은 이것들이 어떻게 작동하고 어떻게 사용하는지 완전히 이해하고 있다고 확신합니다. 하지만 실제로는 그렇지 않습니다. 이것들은 매우 복잡합니다. CSS에서 덜 알려진 특징 중 하나인 inline formatting context를 형성하는 주요한 역할을 하기 때문에 아마도 가장 어려운 것 중 하나가 될 수도 있습니다. 예를 들어,  line-height는 길이 혹은 단위가 없는 값으로 설정할 수 있지만 1, 기본값은 normal입니다. 좋습니다. 하지만 ‘ normal’은 무엇일까요? 우리는 종종 그 값은 1이나 1.2라고(혹은 그래야 한다고) 읽곤 했습니다. 심지어는 CSS 스펙에서 조차 그 부분에 대해 불분명합니다 . 우리는 단위가 없는  line-heightfont-size가 상대적이라는 것을 알고 있습니다. 하지만, 문제는 font-size: 100pxfont-family에 따라 다르게 동작한다는 것입니다. 그렇다면 line-height는 항상 같을까요? 다를까요? 이것은 정말 1에서 1.2 사이의 값일까요? 그리고 vertical-align은 line-height에 어떤 영향을 받을까요? 절대 단순하지 않은 CSS 메커니즘에 대해 깊게 알아봅시다… font-size에 대해 먼저 이야기해봅시다 간단한 HTML 코드를 살펴봅시다. <p> 태그 안에 서로 다른  font-family가 선언된 3개의 <span> 태그가 있습니다:

다른 font-family에 동일한 font-size를 적용할 경우 각 요소들은 서로 다른 높이값을 가집니다: 그림 1. 다른 font-family에 동일한 font-size을 적용한 경우 각각 다른 높이값을 가집니다. 우리가 그러한 작동 방식에 대해 알고 있다 하더라도 font-size: 100px; 이 각 요소의 높이값을 100px로 만들지 않는 이유는 무엇입니까? 저는 각 값을 측정해 보았습니다: Helvetica: 115px, Gruppo: 97px and Catamaran: 164px…read more

word-break 속성과 word-wrap 속성 알아보기

Posted by in Research

실무를 하다 보면 가볍게 이해한 스펙을 바탕으로 관습적으로 사용하는 속성들이 있다. 그중 word-break 속성과 word-wrap 속성에 대해 조금 더 명확하게 정리해보았다. ※ 본 내용은 W3C 스펙문서에서 제공하는 내용 일부를 실무 경험을 바탕으로 의역 및 편집하여 작성한 것이다. 중국어/일본어/한글의 경우 W3C문서에서 CJK(Chinese, Japanes, Korean 의 약자)로 사용하고 있으며, 본 문서에서도 CJK로 지칭한다. 그 외 언어는 non-CJK(숫자, 영어, 베트남어 등)으로 지칭한다. 중단점은 ‘ · ’로 표기한다. word-break 속성과 word-wrap 속성 실무에서 두 속성은 주로 줄 바꿈을 위해 사용한다. 먼저 각 속성이 무엇인지 간단히 살펴보자. word-break : 아래 예제와 같이 단어의 분리를 어떻게 할…read more

다양한 폰트정보 및 css 정의 방법

Posted by in Research

윈도우에 기본으로 설치되어있는 폰트 이외에 각종 폰트들에 대한 정보들 및 CSS font-family 정의 방법에 대해서 알아보도록 하겠습니다. 중요한 점은 작업하시는 컴퓨터에 적용하려는 폰트가 설치되어 있어야 폰트 적용이 가능합니다. 폰트 목록 :  http://www.adobe.com/products/type/font-information.html 해당 목록들 중에서 Helvetica Neue Std 폰트 적용방법에 대해서 알아보도록 하겠습니다. 리스트에서 Helvetica Neue Std를 클릭해서 들어가시거나 http://www.adobe.com/type/browser/html/readmes/HelveticaNeueStdReadMe.html 경로를 통해 바로 들어가실수 있습니다. Family information란을 보면 Menu Names And Style Linking 이라는 곳이 있습니다. 하단 부분에 3행으로 Menu Name, plus Style option, selects this font가 있는데 selects this font가 포토샵에서 Helvetica Nenu LT Std 폰트를 선택했을때 나오는 옵션값들에 대한…read more

0