Archive: 2018/3

CSS 텍스트 말줄임

일반 말줄임은 text-overflow나 line-clamp속성을 이용한다는 것은마크업공부를 한 사람들이라면 모두 다 알만한 내용들!하지만 이번 포스트에는 제목+아이콘 (예를들면 New)말줄임 + 아이콘이 유동적이게 우측에 붙어있어야 함에 대한 대응방법을 소개합니다 :> inline-block 이용하기 See the Pen GxRBOa by lee-h

Chap07. 개발일지 - CSS/calc

수직중앙정렬 See the Pen calc01 by lee-hyuna (@lee-hyuna) on CodePen. 플렉서블영역/고정영역 See the Pen calc02 by lee-hyuna (@lee-hyuna) on CodePen. backorund-position See the Pen calc03 by lee-hyuna (@lee-hyuna)

Javascript 면접질문02

개인적인 용도로 보관하기 위해 리포스팅합니다 출처 Front-end-Developer-interview-questions프론트엔드 면접 문제 은행이 파일에는 잠재적인 프론트엔드 개발자 후보를 선정할 때 사용할 수 있는 여러 가지 면접 질문들이 있습니다. 후보자에게 모든 문제를 사용하는 것은 많은 시간이 소요되기 때문에 추천하지 않습니다. 대신, 여러분이 요

Chap06. 개발일지 - CSS/Clip

Clip을 이용하여 원그래프 만들기 clip 속성을 이용하여 도형을 그리고 border-radius로 원형을 표현하여 원그래프를 css로 표현 css animation을 이용하여 액션을 표현할 수도 있음 부모, 자식 요소를 부모로 왼쪽을 가리고 자식으로 반대도형을 오른쪽에 표현하여 반원을 점점 채우는걸 표현 clip:rect(top, right, botto

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”를 적용한 요소안의 포함