WIT – NTS UIT Blog

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

WIT 다시 시작합니다.

Posted by in Notice

앞으로 NTS UIT개발실 블로그는 기술, 접근성 각각의 전문성을 위해 널리와 WIT로 분리 운영 예정입니다. 한동안 재정비 시간을 가지고 정식으로 재오픈 예정이니 많은 기대 바랍니다. 정식 오픈전까진 일시적으로 오류 화면이 노출될 수 있으니 참고 바랍니다.

UIT개발실은 어떤 개발환경에서 일하는가

Posted by in Environment

日本語版한국어판 장인은 도구를 탓하지 않는다지만 더 좋은 도구와 장인이 만나면 어떨까요개인적으로는 업계 분들을 만나면 이렇게 잘 물어봅니다. 어떤 프로그램 쓰세요? UIT개발실의 개발환경을 한번 알아봤습니다! 1. 소프트웨어 어떤 에디터 쓰세요? 능력자분들은 어떤 에디터(또는 IDE)를 쓰는지가 제일 궁금합니다. 에디터/IDE 부문의 1위는 최근 프론트엔드 도구 중 가장 각광받고 있는 웹스톰입니다. 심플하고 강력한 서브라임 텍스트가 2위, 국산 에디터인 에디트 플러스가 3위 입니다. 그 뒤로는 vim을 쓰는 매니아 분들도 계시구요. 웹스톰과 형제인 intellij와 은둔고수 드림위버, 무료 에디터 노트패드++, IDE의 고전 이클립스, 마이크로소프트의 비주얼 스튜디오까지 사용하고 계시네요. 에디터들은 각자의 장단점이 있습니다만 좋은 점을 잘 골라서 쓰는게…read more

5

[스터디] Pro git 2장 – Git의 기초

Posted by in Environment, Tech

이 글은 사내 스터디에서 pro git을 진행하며 정리한 글입니다. git 저장소 만들기 git 저장소는 git init 명령어를 사용해 생성한다

기존 저장소를 clone하기 리모트 저장소(github)를 클론해서 가져올 수 있다. 클론은 svn의 svn checkout 저장소경로와 비슷하다.

파일의 생존주기 파일은 크게 untracked, unmodified, modified, staged 영역을 거친다. untracked : 파일이 있으나 한번도 add 되지 않음. unmodified : 파일을 add 하여 commit을 1회 이상 한 이후, 수정사항 없음 modified : 바로 위 케이스에서 수정사항 있음 staged : git add한 상태 파일의 상태 확인하기

위 명령어를 -s를 사용해 축약형으로 확인할 수 있다….read more

0

다국어 웹사이트 지원을 위한 HTML과 CSS

Posted by in Research, Tech

전세계에는 많은 국가가 존재하며, 개중에는 독자적인 언어를 가지고 있는 국가들이 있다. 브리태니커 비주얼 사전에서 전달하는 내용에 따르면 세계의 6,000여 가지 언어 중에서 100만 명 이상의 인구가 사용하는 언어는 250가지에 불과하다. 역으로 생각해보면 우리가 앞으로 대응해야할 가능성이 있는 언어가 250가지라는 것이다. 그렇다면 다양한 국가의 언어를 어떻게 대응할 수 있을까? Font-Family CSS에서 Font를 지정하는 건 누구나 해봤을 것이다. 교재에서도 제일 처음 가르쳐주고 있기 때문에 모르는 사람이 없으리라. 아래 코드를 예로 들어보자.

위의 코드로 선언할 경우, APPLE SD Gothic Neo를 가지고 있는 OS에서는 해당 폰트로 보여질 것이고, 그렇지 않다면 OS의 기본 고딕…read more

6

크롬37이상에서 영문 일부에 공백이 생김

Posted by in BugReport

서비스명: 지식백과 / 제보자 : 정사라 현상 재현환경 윈도우 크롬 37 이상 돋움/굴림으로 선언한 페이지에서 영문자를 표현할 경우, 일부 글자에서 자간이 넓어져 띄어쓰기된것 처럼 보입니다. test url : http://jsbin.com/mebabecave/1 오류 화면 정상 화면 원인 크롬 윈도우 37정식판부터 글꼴 처리방식을 위한 ‘다이렉트라이트(DirectWrite)’의 기본 옵션이 ‘사용’ 으로 됨. 다이렉트라이트(DirectWrite)가 활성화 됐을 경우 ‘굴림’이나 ‘돋움’같은 비트맵 폰트들을 표현 할때 자간을 불규칙하게 만드는 현상이 나타남.  빌드번호 37.0.2062.94 버전으로 정식 배포된 크롬 브라우저가 글꼴 자간을 불규칙하게 만드는 현상은 윈도7 환경에서 한글 글꼴 중 ‘굴림’이나 ‘돋움’같은 비트맵 폰트를 표시할 때 나타나는 것으로 파악됐다. http://www.zdnet.co.kr/news/news_view.asp?artice_id=20140915152518 해결방법 한글 폰트 선언…read more

0

[iOS] 특수문자인식오류 해결

Posted by in BugReport, Research

서비스명: 지식백과 / 제보자 : 정사라 현상 재현환경 ios 버전 6.1.3, 7.1.1, 7.0.4 safari 브라우저 ios에서 기본 entity는 정상노출됩니다. 하지만, ㈜의 경우 entity코드가 없어 unicode로 넣어 대체하였으나, Helvetica font에서 해당 unicode 인식하지 못해 x표시(일명 엑박)로 노출되는 문제가 있어 공유드립니다. 오류화면 정상 화면 정상화면URL: http://m.terms.naver.com/entry.nhn?docId=1395962&cid=685&categoryId=1426 원인 Helvetica만 선언했을경우 영문은 Helvetica로 보여주고 한글은 AppleSDGothicNeo 로 보여줌 unicode는 한글이 아니므로 Helvetica로 렌더링 시도 Helvetica는 ㈜에 해당하는 unicode를 지원하지 않아 X로 노출 해결방법 기본폰트인 Helvetica뒤에 sans-serif도 추가로 넣어 해결됨. sans-serif는 영문,숫자를 포함한 모든 문자를 html의 lang값에 맞는 기본 폰트로 노출해줌. (ko일 경우 ios에서는 AppleGothic /…read more

0

CSS Interaction

Posted by in Research

CSS로 만들 수 있는 다양한 인터렉션을 소개합니다. 대부분의 내용은 CSS3 내용이지만 모바일에서라면 충분히 도움이 될 거라 믿습니다. 혹은 회사의 클라이언트분들이 ‘우리는 IE10 이상부터 공식적으로 지원하겠습니다.’ 혹은 ‘신규 브라우저에서 사용자의 사용성을 더 좋게 만들면 되지’라는 멋진 생각을 가지고 계신다면, 이 아티클의 내용을 잘 활용하실 수 있을 거라 생각합니다. 마우스를 올리는 행위 Element:hover를 사용하여 요소에 마우스를 올렸을 때 특정한 행위를 하도록 할 수 있습니다. 아래와 같은 상황을 쉽게 연출할 수 있습니다. 마우스를 올려보세요 마우스를 올리면 나오는 메뉴 마우스를 올리면 나오는 메뉴 마우스를 올리면 나오는 메뉴 마우스를 올리면 나오는 메뉴 마우스를 올리면 나오는…read more

0

레이어 중앙정렬

Posted by in Research

조은입니다. CSS만 사용하여 레이어를 중앙정렬 하는 몇가지 테크닉을 소개한다. Margin을 이용하는 방법

결과 : {codepen 링크} 장점 예로부터 자주 쓰인 방법으로 모든 브라우저에서 원활히 지원한다 단점 레이어의 사이즈가 유동인 경우 활용하기가 어렵다. Transform을 이용하는 방법

결과 : {codepen 링크} 장점 레이어의 사이즈가 유동인 경우에도 쉽게 활용할 수 있다. 단점 IE8 이하에서는 제대로 동작하지 않는다 구버전 안드로이드에서 성능 저하를 야기할 수 있다. (이 경우 Translate3d도 활용할 수 있다) Position을 이용하는 방법 클리어보스 @이재호님 제보

결과 : {codepen 링크} 장점 레이어의 사이즈가 유동이어도 잘 돌아감. 다른…read more

2

외국 몇개 기업의 CSS

Posted by in Research

조은입니다. 요전번에 Github’s CSS라는 아티클에 삘받았는지, Lonely Planet, CodePen, Groupon 같은 많은 외국 기업에서 CSS Coding Style을 릴레이로 공개했는데요. 해당 내용 간단히 공유드립니다. – 바쁘신 분들을 위한 세줄요약 SASS를 (직접 공개한 사람들 기준으로는) 전 기업에서 활용하고 있습니다. 모듈단위로 CSS파일을 쪼개는 게 대세인 거 같습니다. Lonely Planet에서 OOCSS, Groupon에서는 SMACSS를 채택했다고 하니 그 부분도 중요해보입니다. Lonely Planet의 CSS 간략한 요약 우리는 SASS를 사용합니다. 우리는 150개 이상의 파일을 가지고 있다. 컴파일된 CSS는 앱에서 강한 캐싱을 허용하는 두개의 스타일 시트로 분할됩니다. 페이지당 평균 CSS 파일 크기는 35kb 정도입니다. (gizp으로 압축) Rem과 Pixel을 주로…read more

1

프론트엔드 개발 시작하기

Posted by in Research

디자이너, 기획자 등을 대상으로 프론트 엔드 개발을 어떻게 시작해야하는 지 알려주었다. 발표자료를 공유한다. 발표 중 라이브 코딩도 했는데, 코딩 내용도 공유한다. https://github.com/transbot/s_140809_FrontEnd

0

How Start JavaScript

Posted by in Research

지금까지 자바스크립트는 많은 오해를 받아왔고, 완성되지 않은 이상한 언어라는 수식어에서 벗어나지 못하였었다. 대부분의 개발자들은 복사 – 붙여넣기식으로 자바스크립트 코드를 활용하거나, Form의 유효성 검사 등에만 자바스크립트를 사용할 뿐 그 이상으로는 활용하지 않았다. 하지만 모바일에서 플래시를 지원하지 않아, 기존에 플래시로 제작하던 다양한 인터렉션을 CSS3와 자바스크립트를 활용하여 구현하기 시작하였다. 또한 웹 어플리케이션의 중요성을 강조하며, AJAX를 활용한 비동기 데이터 통신 등 자바스크립트를 활용한 다양한 인터렉션이 나타나면서, 자바스크립트의 중요성은 이루 말할 수 없는 경지에 이르렀다. 이 글은 HTML과 CSS만 할 줄 알았던 한 웹 퍼블리셔가, 자바스크립트의 중요성을 인식하고 공부하기 시작하면서 겪은 일들을 정리한 것이다. 지극히…read more

0

그 Transform을 넣은 요소의 자식에 fixed를 넣지말라.

Posted by in Research

두어달 전에 상품광고_CCP(그림 1) 관련 작업을 진행하며 발견한 이슈다. 그림1. 상품광고_CCP 화면 상품광고_CCP 구현 스펙 중에 플리킹에 대한 구현 이슈가 있었는데, 개발조직에서 jindo를 사용하기로 결론이 나왔고, 그에 맞춰서 마크업 구조도 일관성있게 맞춰서 공유하였다. 사실 jindo만큼 한국에서 쓰기 편한 라이브러리도 없는 거 같기는 하다. 물론 상황에 맞게 쓰는게 최고지만. 어쨌든 여기서 simple형 헤더라는 걸 제공했는데, 이 simple형 헤더라는 녀석은 스크롤의 위치가 어디던간에 상단에 고정(position:fixed)이었다. 그림 2. 심플형 헤더 대충 상황은 알거라 생각한다. 당시 스펙의 마크업은 이러했다. (코드 자체를 긁어온게 아니니 대충 어떤 느낌인지만 보시라)

위의 코드에 진도 플리킹을 넣으면 코드가…read more

1

간단하게 HTML 페이지의 레이아웃을 확인하는 방법!

Posted by in Research

마크업 개발시 현재 페이지의 레이아웃을 쉽게 확인할 수 있는 툴을 소개합니다. pestcide.io 라는 툴 인데요. CSS상에서 레이아웃 문제가 있을때 해당 툴을 통해서 각각의 모든 요소들의 외곽선을 그어 확인할 수 있습니다. 각각의 요소들마다 다른 컬러값을 주어 표현할 수도 있습니다. (설치형 css를 받아서 보시면 모든 태그에 outline값을 적용해 주었습니다.) 적용 방법은 사이트에서 css를 다운받아서   <link rel=”stylesheet” href=”css/pesticide.css”> 이렇게 바로 <head>태그 안에 넣어주셔도 되고   크롬을 이용하시는 분들은 크롬 extension을 통해서 사용하실 수 있습니다.

2