CSS 텍스트 말줄임
일반 말줄임은 text-overflow나 line-clamp속성을 이용한다는 것은마크업공부를 한 사람들이라면 모두 다 알만한 내용들!하지만 이번 포스트에는 제목+아이콘 (예를들면 New)말줄임 + 아이콘이 유동적이게 우측에 붙어있어야 함에 대한 대응방법을 소개합니다 :> inline-block 이용하기 See the Pen GxRBOa by lee-h
Category: Web
CSS 텍스트 줄바꿈
.article-entry img {margin:0 !important} white-space공백 줄바꿈 문자 처리 방법 white-space: normal;기본값 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 지정된 넓이의 끝에서 자동 줄바꿈 한다 white-space: pre;띄워쓰기는 실제 입력한 칸대로, 줄바꿈도 엔터의 시점에서 그대
Flexible Box Layout Module
개요 css3의 새로운 layout 모드인 flex layout을 소개한다. (유동적 layout) 기존 4가지 레이아웃: block layout, inline-layout, table-layout, positioned-layout display 속성의 새로운 속성값 (진보된 block,inline 속성값) “display:flex”를 적용한 요소안의 포함
Web font
회사 세미나에서 웹폰트 관련으로 발표를 진행했는데, 그 때의 발표자료를 올리도록합니다 :^)(절대 문서정리가 귀찮아서 그런 것 아님..) 웹사이트는 대부분 텍스트로 이루어져있습니다.사진이나 영상 이외에 정보 전달은 글을 눈으로 읽는 과정에서 이루어지죠. 이 과정에서 시스템 폰트 외 상당 부분의 폰트를 아름다운 폰트로 사용하기 위해 웹사이트에 폰트를 심어주고
CSSOM (CSS Object module)
CSSOM*출처 : https://varvy.com/performance/cssom.html해당 문서를 번역했습니다. What is CSSOM?CSS object model이라는 뜻. 이는 기본적인 웹페이지에서의 CSS “map”이다DOM과 비슷하지만, HTML보다는 CSS에 가까우며 DOM과 결합된 CSSOM은 브라우저에서 웹페이지를 표하는데 사용됨 CS
Pug (jade)
Pug?제이드는 Haml로 부터 큰 영향을 받은 고성능 템플릿 엔진이며 node를 위해 자바스크립트로 구현되었다.html태그 보다 상당히 심플한 형태의 마크업을 작성하면 자동으로 html을 생성해주는 역할을 하고 있다.pug는 HTML을 심플하게 표현할 수 있는 마크업언어인 HAML 영향을 받아 대부분의 문법은 HAML의 것을 차용한 것으로 보인다. 왜 p
web accessibility
웹 접근성 향상을 위한 10가지 가이드10 guidelines to improve your web accessibility해당 링크의 본문을 참조하였습니다 우리는 장애가 있어도, 모든 사람에게 사이트에 대한 접근을 보장하는 10 가지 웹 접근성 가이드 라인 목록을 작성했습니다.W3C의 제작자이며 World Wide Web의 발명가 인 Tim Berners-
2018 Web Design Trends
모바일 환경을 고려한 웹 시대의 디자인 추세모바일 우선주의“Patterns, Lines and Circles; Geometric Shapes” 2018년의 웹디자인 트렌드는 가상 현실, 기계 학습 및 음성 사용자 인터페이스와 같은 기술이 발전하여 주류가 될 것입니다. 패턴, 선과 원, 기하학적 패턴은 2017년에도 각광을 받았지만 디자인 분야에서 디자인과