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

HTML5 비디오 플레이어 마크업 작업기

Posted by in Research

서론 네이버 메인에는 광고가 군데군데 들어가 있는데, 저는 이 중에 롤링보드라는 영역의 비디오 플레이어 마크업 작업을 진행해야 하는 상황이었습니다. 기존에는 플래시로 광고 영상 플레이어가 구현이 되어 있었기 때문에, 이를 순수 HTML5로 변환하는 작업이었습니다. 그림 1: 네이버 메인 롤링보드 영역 처음 해보는 플레이어 마크업 이었기 때문에, 어떻게 시작을 해야 할지 약간 감이 잡히지 않아서 본격적인 마크업을 시작하기 전에 다른 서비스를 레퍼런스 삼아 분석해 보기로 하였고, 주요 비디오 스트리밍 서비스 사이트 3개(유투브, 비메오, 네이버TV)를 조사해 보았습니다. 이 글에서는 레퍼런스 사이트들의 UI와 마크업 구조를 먼저 살펴보고, 실제 구현했던 마크업 구조는 어떤 식으로 개발하였는지 그리고 작업을 하면서…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

Webstorm으로 GIT 쉽게 사용하기

Posted by in Research

Webstorm 기준으로 제작되었지만 다른 JetBrains IDE 에서 모두 동일하게 적용됩니다. Webstorm UI 간단히 살펴보기 프로젝트 목록 및 파일상태 확인 창 파란색 파일명 : 수정된 사항 있음 초록색 파일명 : 신규 추가 빨간색 파일명 : 신규 파일 추가 시 – unstage 상태 merge 등의 작업 후 – 충돌 상태 gulp task 실행 창 에디터 창 git > network 를 보여주는 log 창 Terminal 입력 창 git > branch 리스트 및 관련 기능 창 로컬저장소(Local Repository) 생성 기존의 저장소에서 clone 받기 웹스톰 설치 후 최초 실행인 경우 1. check out from Version Control > Git  선택 2. Clone…read more

HTML 5.1 정리 / HTML 5.2 미리보기

Posted by in Research

HTML 5.1 권고안 공개 2016년 11월 1일 웹표준화단체인 W3C의 웹플랫폼워킹그룹(Web Platform Working Group)이 HTML 5.1을 W3C 권고안으로 공개했다. (W3C의 규격이 W3C 권고안에 이르기까지의 과정은 “초안 (Working Draft)” → “최종 초안 (Last Call Working Draft)” → “권고 후보 (CR : Candidate Recommendation)” → “권고안 (PR : Proposed Recommendation)” → “W3C 권고안 (Rec : Recommendation)” 라는 5개의 단계가 있다.) HTML 권고안의 역사를 간단히 살펴보면 1999년에 HTML 4.01의 권고안이 공개가 됐다. 그러나 HTML 4.01 당시에는 웹 응용프로그램 등이 고려되지 않았고 웹 페이지를 기술하기 위한 포맷이었던 만큼 전면 개정을 거쳐서 W3C가 15년 만인 2014년 10월 28일에 HTML5 권고안을 공개하게 된다. 이번에 권고안을 공개한…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

[CSS방법론] SMACSS, BEM, OOCSS

Posted by in Research

세상이 바뀌는 속도보다 약간 더 빠르게 웹은 발전하고 있습니다. 특히 그 중에서도 CSS는 기존에 경험하지 못한 속도로 다양한 부분이 변화하고 있습니다. CSS의 활용도가 높아지고 대규모 프로젝트가 많아짐에 따라, 복잡한 설계의 필요성을 느끼지 못했던 CSS에도 다양한 방법론들이 생기기 시작했습니다. CSS 방법론의 필요성을 사내에서도 느끼고 있었고, 같은 필요성을 느끼고 있던 다른 팀원들과 함께 CSS방법론(SMACSS, BEM, OOCSS)에 대해서 스터디를 하였습니다. 방법론의 특징에 따라서 장단점이 있었으나, 세 방법론 모두 같은 지향점을 갖고 있었습니다. 코드의 재사용성을 높이자 쉽게 유지보수 하자 확장 가능하게 하자 클래스명 만으로도 무슨 의미인지 예측 가능하도록 하자 대부분의 언어에서도 비슷한 지향점을 가지고…read more

하위 버전 브라우저의 HTML5 / CSS3.0 호환성 준수방안

Posted by in Research

‘하위 버전 브라우저의 HTML5 / CSS3.0 호환성을 어떻게 준수할 것인가’ 에 대해 포스팅하겠습니다. 요즘 ‘모바일웹을 PC에서 잘보이게 해달라’는 미션을 많이 받습니다. 즉 HTML5, CSS3.0으로 작성된 코드를 PC에서 잘보이게 해야하는 것이죠. 따지고 보면 “모바일 -> PC” 요구사항에만 해당되는 미션이 아니라 모든 프로젝트에서 고민할 내용입니다. 요즘은 반응형이 대세이고 최신 스펙들은 안쓰기엔 너무 아까우니까요… “webkit이나 CSS3.0을 걷어내야하나?” “따로 한벌 더 만들자” “신경안써도 잘 나오게 하는 방법 없을까?” 방법은 여러가지입니다. 문제는 어떤게 가장 효율적인가를 판단하는 것이죠. 호환성 준수를 위한 방법을 크게 4가지로 분류했습니다. 1. polyfill “polyfill”은 낡은 브라우저에서는 작동 안하는 HTML5 , CSS3.0들을 자바스크립트나…read more

1

[번역] 7 Patterns to Refactor JavaScript Applications

Posted by in Books, Research

이 글은 Michael Phillips 가 2014년 6월,  [Crush&Lovely]에  연재한  ‘자바스크립트 어플리케이션 리팩토링을 위한 7가지 패턴’에 대해  번역한 것이다. 들어가며 2012년 10월 17일, Bryan Helmkamp, Code Climate 설립자가 Ruby on Rails의 액티브 레코드 모델들(대표적인 객체 레이어들)을 리팩토링할 7개의 패턴을 요약하여 블로그 포스트를 작성했다. 여기 [Crush & Lovely]의 포스트는 모든 Rails개발자를 위해 어떻게 문제를 분리하고, 모듈 형으로 작성하며, 간결하면서도 표현적인 코드를 만들고, 매우 간단한 테스트를 만드는 지에 대해 설명하는 핵심 레퍼런스가 될 것이다. 이 시리즈의 포스트들은 자바스크립트 환경에서 다음과 같은 개념에 대해 직접 보여준다 ; 자바스크립트의 데이터 모델보다 더 적합하거나 거기에 필적할 만한 것은 없다. 매주, 일곱 패턴 중…read more

2

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

Posted by in Research

Vivaldi Techinial Preview Chromium 기반의 브라우저인 Vivaldi의 Techinial Preview 버전이 공개됐습니다. 이 브라우저는 전 Opera의 CEO인 jon Stephenson von Tetzchner가 설립한 Vivaldi Technologies에서 개발하고 있습니다. 2014년 3월경 오페라 소프트웨어에 의해 My Opera가 폐쇄 됐고 이를 탐탁치 않아 했던  jon Stephenson von Tetzchner는 My Opera를 대신할 가상 커뮤니티 사이트로써 Vivaldi를 만들었던 것이 시발점이 되어 여기까지 오게됐다고 합니다. Meet Vivaldi, A New Browser From the Former CEO of Opera Former Opera CEO Launches Vivaldi, A New Browser For Power Users Opera 12 유저를 대상으로한 기능이 많이 구현돼 있는 느낌이며 Chronium 기반으로 개발됐으므로…read more

0

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

Posted by in Research

TypeScript 1.4 릴리즈 TypeScript 1.4가 릴리즈 됐습니다. 이전 TypeScript and the Read to 2.0(로드맵)에 작성돼 있었던 것 처럼, Union Types, Type Aliases, Const Enums 등의 기능이 추가됐으며 ES6의 구문 지원의 개선, ES6의 코드를 출력하는 모드도 추가됐습니다. 자세한 사항은 TypeScript 1.4.1 변경 사항(일본어)을 참고해주세요. 또, TypeScript의 Compiler API에 관한 문서가 첨삭(添削)되고 있습니다. io.js 1.0.0 릴리즈 Node.js를 fork한 io.js 1.0.0이 릴리즈 됐습니다. io.js – FAQ에도 작성돼 있습니다만 1.0은 semver 이므로 Node.js에서의 메이저 업데이트라는 의미입니다. production-ready라는 의미는 아닙니다. jser.info 4주년(일본어)에서 간단히 언급했듯이 오픈 거버넌스 모델을 바탕으로 예측 가능한 릴리즈 사이클의 제공을 목적하고 있으며 이와…read more

0