엔테크서비스 웹표준 UI개발 인턴십 공고

최고의 교육 + 네이버 서비스 관련 실무 경험 + 정규직 입사의 기회 HTML, CSS, JavaScript 등 UI개발 관련 실무 중심의 교육을 받을 수 있으며, 실제 네이버 서비스에 적용되는 UI개발 경험을 쌓을 수 있습니다. 또한, 인턴과정에서 우수한 성적을 거두는 분에게는 정규직 입사의 기회가 부여되며, 네이버, 라인서비스의 UI개발(HTML+CSS)을 하게 됩니다. [전형 절차] 더보기…

gradient를 활용하여 그래프 만들기 

gradient를 생각하면 색상이 자연스럽게 섞이는 이미지를 생각하거나… 오래된 사이트를 방문했을 때 여기저기 있는 촌스럽게 느껴지는 이미지를 생각했습니다. 작년 팀에서 진행한 CSS 시크릿 스터디에서 gradient를 자세하게 보게 되었고 생각보다 활용할 곳이 많이 있다는 것을 알게되었습니다. 그래프를 만드는 일을 하면서 이미지로 넣거나 DOM을 추가해야 하는 상황을 gradient로 해결한 사례를 공유합니다. 1. 디자인 더보기…

What's New in Chrome 71 (크롬71 업데이트)

2018년 12월 4일 정식 릴리즈 예정인 Chrome 71 새로운 기능 중 UI 개발과 관련된 내용을 정리했습니다. 🔔 New Feature [CSS] ‘left’ and ‘right’ values for the ‘text-underline-position’ property [CSS] :host, :host-context, and ::slotted specificity [Graphics] Animation Worklet [Graphics] COLR/CPAL font support [CSS] CSS gradient color stop double-position syntax [JavaScript] importScripts() [JavaScript] 더보기…

linear-gradient로 skeleton screen 만들어보기

페이스북이나 유튜브의 첫 화면을 보면, 아주 잠깐 프레임을 그려주는 빈 페이지를 확인할 수 있는데요. 이러한 페이지를 개발에서 skeleton screen(스켈레톤 스크린) 이라고 합니다. 저도 함께 일하는 개발자를 통해서 처음 알게 되었는데, skeleton은 뼈대를 의미하는 단어네요. skeleton screen을 적용하면 사용자가 “대기중”이라는 느낌을 전달하면서 빠르게 로드되고 있다고 인식하게 합니다. 그럼 이러한 UI는 어떤 방법으로 더보기…

CSS Scroll snap points 알아보기

Safari에서만 사용할 수 있던 Scroll snap 모듈이 9월 4일 릴리즈되는 Chrome 69부터 지원합니다. 배경 Scroll snap 모듈을 사용하면 사용자가 터치, 휠 스크롤 조작을 마쳤을 때의 오프셋을 설정할 수 있습니다. 스크롤링은 사용자와 웹 콘텐츠간의 자연스러운 인터랙션이지만 정밀도가 부족하여 콘텐츠의 중간에서 멈추거나 주요 콘텐츠의 일부만 보이기도 합니다. 하지만 미리 설정한 위치로 이동한다면 더보기…

flexbox로 만들 수 있는 10가지 레이아웃

기존에 사용하던 레이아웃 기법은 display, float, position으로 컬럼 레이아웃을 표현하는 데 한계가 있고 구현 방법이 복잡한 문제가 있었는데요. 마크업 개발자들이 종종 “이것은 구현이 어렵습니다.” 라고 얘기했던 이유 중 하나이기도 했습니다. flexbox 모델의 장점을 한 마디로 표현하면 “복잡한 계산 없이 박스의 크기와 순서를 유연하게 배치할 수 있다.” 라고 정리할 수 있습니다. 정렬, 방향, 순서, 사이즈 더보기…

새로운 CSS Typed Object Model

이 글은 https://developers.google.com/web/updates/2018/03/cssom 문서 번역을 기초로, 필요한 설명을 일부 추가한 글입니다. 요약 최근 W3C Houdini WG에서 표준화 하고 있는 CSS Typed Object Model이 크롬 66에 추가되었습니다. CSS Typed Object Model은 아래와 같이 사용할 수 있습니다: el.attributeStyleMap.set(‘padding’, CSS.px(42)); const padding = el.attributeStyleMap.get(‘padding’); console.log(padding.value, padding.unit); // 42, ‘px’ 이제 CSS는 JavaScript에서 사용하기에 적절한 객체 기반 더보기…

CSS Paint API

이 글은 https://developers.google.com/web/updates/2018/01/paintapi 문서 번역을 기초로, 필요한 설명을 일부 추가한 글입니다. Chrome 65에 도입된 CSS의 새로운 가능성 “CSS Custom Paint” 혹은 “Houdini’s paint worklet”이라고도 불리는 CSS Paint API가 크롬 65에 추가되었다. 지금까지 background-image나 border-image와 같은 속성은 이미지 파일을 로딩하기 위해서 속성 값으로 url() 혹은 linear-gradient()를 사용해 왔다. 크롬에서 새로 도입된 CSS Paint API를 사용하면 프로그래밍 방식으로 이미지를 더보기…

포용적 컴포넌트: 토글 스위치 컴포넌트 제작기

담당 서비스에서 신규 추가되는 UI를 제작하다가, 토글 스위치가 등장하는 부분이 있어서 이를 시험삼아 컴포넌트화 해보기로 마음 먹었습니다. 만들기 전에 우선 포용적 컴포넌트: 토글 버튼편(Inclusive Components – Toggle Button) 번역글을 읽어보니 도움이 많이 되었습니다. 마지막 부분에 핵심이 다 적혀 있습니다. 토글 버튼을 만들 때 체크해야 하는 사항들은 다음과 같습니다. 사용자들에게 체크박스와 같은 폼 요소들이 더보기…

(번역) 포용적 컴포넌트: 토글 버튼

원문: https://inclusive-components.design/toggle-button/ 본 번역문은 원작자의 동의하에 번역 및 게시되었습니다. 원문 게시일: 2017년 3월 31일 번역글 1차 수정: 2018년 1월 5일 토글 버튼 토글 버튼 중 어떤 것들은 껐다가 킬 수 있지만, 어떤 것들은 킬 수가 없기도(혹은 못 끄기도)하고, 어떤 것들은 반드시 꺼야만(혹은 반드시 켜야만) 합니다. 토글 버튼의 컨셉 자체는 너무나 간단합니다. 더보기…