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

(번역) CSS GPU 애니메이션 제대로 하기

Posted by in Research, Translation

원문: https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/ 본 번역문은 원작자인 Sergey Chikuyonok의 동의하에 번역 및 게시되었습니다. 이제 대부분의 사람들이 모던 웹 브라우저가 GPU를 사용해서 웹 페이지의 일부를 렌더링 한다는 사실을 알고 있습니다. 예를 들어,  trasnform 속성을 사용해서 CSS 애니메이션을 구현하면 left나   top 속성을 썼을 때 보다 훨씬 부드러워 보입니다. 그러나 만약 “어떻게 GPU를 사용해서 부드러운 애니메이션을 만들어 낼 수 있을까요?”라는 질문을 던져본다면, 아마 들려오는 대답은 ” transform: translateZ(0)이나  will-change를 쓰세요”라는 말일 것입니다. 우리는 마치 IE6 대응을 위해  zoom:1을 사용하는 것처럼, 이 두가지 속성을 GPU가 애니메이션 작업을(혹은 브라우저 벤더들이 좋아하는 방식으로 표현하자면, ‘컴포지팅’을) 할 수 있도록 준비 하는 용도로 사용하기 시작했습니다. 하지만 간단하게 데모로 만들어…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 Custom Properties (커스텀속성) 소개

Posted by in Research

(https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/ 문서를 토대로 번역하고, 다른 문서들을 조합해 정리하였습니다.) 1. 전처리기 변수와 CSS 커스텀 속성 오늘날 CSS 전처리기는 웹개발에서 중요한 역할을 수행하고 있습니다. (Sass, Stylus, Less, PostCSS 등) 전처리기의 주요 장점 중 하나는 변수를 사용할 수 있다는 것인데요. 변수를 사용하면 복붙을 피할 수 있고, 개발과 리팩토링이 간단해집니다. 그러나, 전처리기 변수에는 다음과 같은 몇가지 한계가 있습니다. 동적으로 변경할 수 없다. DOM 구조를 알지 못한다. JavaScript에서 읽거나 변경할 수 없다. 이러한 문제를 해결하기 위해 CSS 커스텀 속성이 개발되었습니다. 전처리기와 CSS 커스텀 속성 두 가지가 어떤 점이 다른지는 아래에서 더 자세히 알아보도록 하겠습니다. 2. CSS…read more

CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용)

Posted by in Research

모바일 네이버 지도 개편을 하면서 검색창 부분과 상세페이지 스크롤 부분에 애니메이션이 추가되었습니다. 초기 검색창 부분 애니메이션은 CSS 속성 중 margin, height을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어 자료를 찾아보니 margin, height 속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 하나였습니다. 성능에 영향이 있는 속성들은 페이지 reflow를 일으키는 속성들이였고 이를 수정하여 성능을 향상 시킬 수 있었습니다. 이 글에서는 reflow를 최소화 하는 방법과 will-change를 설명하겠습니다. 검색창 애니메이션 초기에는 아래와 같은 애니메이션을 구현하고자 했습니다. 총 4가지 애니메이션이 들어가있는데요. 검색창이 왼쪽으로 축소되고 아래쪽으로는 확장됩니다. 검색창이 왼쪽으로 계속 축소되고 아래쪽으로는 확장됩니다. 추가로 한 줄 검색창은 fade-out,…read more

웹폰트 사용하기 (웹폰트 101)

Posted by in Research

1. 웹폰트란? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다. 예를 들면, 웹폰트를 사용하지 않았을 경우 나눔고딕 폰트 미설치 PC에서는 기본 폰트인 돋움 폰트가 노출되고 나눔고딕 폰트 설치 PC에서는 나눔고딕 폰트가 노출됩니다. 하지만 웹폰트를 사용할 경우에는 나눔고딕 폰트 설치 유무와 상관 없이 나눔고딕 폰트가 노출됩니다. 2. 웹폰트를 사용하기 위해 알아야 @font-face 속성

나눔스퀘어 폰트를 웹폰트로 사용하려고 위의 코드처럼 @font-face를 적용합니다. @font-face에는 font-family, src, font-style, font-weight, unicode-range 속성을 사용할 수 있습니다. 2-1. font-family CSS 문서에서 사용할 웹폰트 패밀리명…read more

Layer 화면 중앙정렬 방법

Posted by in Research

널리에 작성되어 있던 기존 글을 다듬어 재게시합니다. 마크업 작업을 하다보면 div layer를 화면 정중앙에 정렬해야 하는 경우가 많습니다. layer 사이즈가 고정이면 간단히 표현할수 있지만 가변형일 경우에는 매번 어떤식으로 표현을 할까 생각하곤 합니다. 그래서 어떤 경우의 수들이 있는지 정리 해보았습니다. 1. position:absolute와 margin 마이너스값을 이용한 중앙 정렬 장점 : IE7 이상 모든 브라우저에서 지원 가능합니다. 단점 : width와 height값이 고정사이즈인 상태에서만 사용할 수 있습니다.

See the Pen Layer vertical-align 1 by Kim Tae Hyoung (@myting) on CodePen. 2. position:absolute와 margin:auto를 이용한 중앙 정렬 장점 IE8 이상 모든 브라우저에서 지원 가능합니다. margin…read more

CSSCONF 참관후기 #2

Posted by in Conference

CSSCONF 참관후기 #1에서 이어집니다. # 최신 CSS 스펙에 관한 주제 7. CSS4 Grid: 마침내 등장한 진정한 레이아웃(True Layout Finally Arrives) FlexBox: 이제는 그리드 시스템을 파야할 때(It’s Time to Ditch The Grid System) Grid / Flexbox 발표영상 바로가기 Grid / Flexbox 슬라이드 바로가기 과학의 힘으로 수억 마일 밖의 혜성에도 탐사선이 정확하게 착륙하는 시대이지만, 여전히 모던 웹 디자인 분야에서 CSS로 요소를 알맞게 정렬하는 일은 힘들기만 합니다. 웹 디자인에서 두 번째로 시간 낭비를 많이 하게 되는 부분이 바로 처음에는 flexbox로 레이아웃 짜기를 시도했다가 현실의 한계에 부딪혀 그만두고 float으로 돌아가는 것이라고 합니다. 하버드 대학교에서 디지털 미디어에 대한 강의를…read more

CSSCONF 참관후기 #1

Posted by in Conference

2016년 9월 미국 보스턴에서 진행된 CSSCONF 참관기를 공유합니다. 배영, 김세희님이 실을 대표해 참관해 주셨고, 본 후기를 직접 작성해 주셨습니다. 내용이 다소 길어 2편으로 작성합니다. 컨퍼런스 소개 CSSConf는 OOCSS로 유명한 니콜 설리반(Nicole Sullivan)이 주축이 되어 2013년 미국에서 첫번째로 개최되었습니다. 그 후로는 유럽, 호주, 아시아 등 세계 곳곳에서 열리고 있습니다. 컨퍼런스 대상은 세상에서 가장 멋진 UI 개발을 위해 노력을 마지않는 디자이너와 개발자입니다. 각 세션 발표자들은 참석자들에게 CSS 관련 각종 최신 기술과 테크닉, 툴에 관한 설명을 해줌으로써 가능한 최대로 CSS의 사용성을 높이고자 하는 목표를 가지고 있습니다. 저희는 이번에 보스턴에서 이틀동안(9/26-27) 열린 CSSConf US에…read more

[JSer.info#번역] 2014-12-23 자바스크립트 주요 소식

Posted by in Research

DaliyJS 설문 공개 매년 이 시기에 DaliyJS에서 시행하는 설문인 JavasScript Developer Survey 2014 결과가 공개됐습니다. 매년 조금씩 질문 및 응답 방식이 변경되므로 단순 비교는 어려울 수 있으나, 작년 Grunt에 대한 응답이 가장 많았던 빌드 도구에 대한 설문은 올해 Gulp가 35%, Grunt가 47%로 집결되는 등 흥미로운 변화를 알 수 있습니다. 자세한건 아래 문서를 참고해주세요 2014-survey-summary.pdf 무섭지 않아, Protractor(일본어) 무섭지 않아 Protractor(일본어[구글번역])에는 Protractor라고 하는 E2E 테스트 도구가 어떤 방식으로 WebDriverJS를 사용하여 테스트 하는지 작성돼 있습니다. 테스트 시 Selenium으로 브라우저를 조작하기 때문에 실제 결과를 얻기까지 소요 시간이 있고, assert할 타이밍을 잡기가 어려우며 비동기인…read more

1

[JSer.info#번역] 2014-12-08 자바스크립트 주요 소식

Posted by in Research

Firefo 34.0 릴리즈 Firefox 34.0이 릴리즈 됐습니다. 개발자 도구에 localStorage inspector, console.table() 등이 추가됐고,  profiler 도구가 개선됐습니다. 그리고 jQuery events를 대응합니다. 자세한 것은 아래 문서를 참고하세요. WebIDE, Storage inspector, jQuery events, iframe switcher + more – Firefox Developer Tools Episode 34 또한 CSS Fonts Level 3 시범적으로 적용됐고, template string 등 ES6의 기능이 구현 됐습니다. Firefox 34 for developers QUnit 1.16.0 릴리즈 자바스크립트 테스트 라이브러리 QUnit 1.16.0이 릴리즈됐습니다.  코드를 리팩토링했고 done() 스타일의 비동기 테스트와 Promise 테스트 지원하는 등 QUnit 2.x를 위한 여러 사항이 반영됐습니다. 2.0에서 바뀌는 부분은 「QUnit 2.x에서 바뀌는…read more

0

[JSer.info#번역] 2014-12-02 자바스크립트 주요 소식

Posted by in Research

DaliyJS 앙케이트 올해도 역시 DailyJS의 자바스크립트 개발자 앙케이트가 시작됐습니다. JavaScript Developer Survey 2014에서 어떤 목적으로 자바스크립트를 사용하는지 또, 사용하는 라이브러리나 테스트 등에 대해 조사 하고 있습니다. 2010년(JavaScript Developer Survey 2010) 부터 지속적으로 시행하고 있는 설문 조사입니다. 여력이 되다면 꼭 참가 합시다. The State of JavaScript in 2015 The State of JavaScript in 2015(한국어) 아티클에는 라이브러리와 기술 변화에 어떤 자세로 임해야할지 작성돼 있습니다. AngularJS 2.0은 지금과 완전히 다르며 트랜드를 따라가는건 부질없고 대기업이 지원한다고 해서 기대할 필요도 없다고 말하고 있습니다. 대도록 AngularJS나 Ember 같은 단일체 프레임워크를 사용하지 말고 레이어에 전문성을 가진 라이브러리를…read more

0

[JSer.info#번역] 2014-11-25 자바스크립트 주요 소식

Posted by in Research

Chrome 39 릴리즈 Chrome 39가 릴리즈 됐습니다. 구현된 기능은 베타 릴리즈 노트를 참고해주세요.  ES6 Generator가 기본으로 활성화 됐고 Web Application Manifest 대응, Beacon API(한국어)가 구현됐습니다. 그리고 Web Animations 구현이 진행되고 있습니다. 보통 XHR을 사용한 비동기 통신 시 페이지를 종료하면 요청을 신뢰할 수 없지만 Beacon API를 사용하면 백그라운드로 요청하기 때문에 UI를 블로킹하지 않으면서 요청을 신뢰할 수 있습니다. 예를 들어 링크 클릭을 로그로 쌓기 위해 리스너에서 기본 이벤트를 중지시키고 XHR 요청 후 페이지 전환을 해야 했지만 Beacon API를 사용하면 단순히 navigator.sendBeacon으로 요청하면 보내면 됩니다. Modern Debugging Experience: Part 2 개발자 도구를 사용한…read more

0

다양한 폰트정보 및 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