CSS 텍스트 말줄임
일반 말줄임은 text-overflow나 line-clamp속성을 이용한다는 것은마크업공부를 한 사람들이라면 모두 다 알만한 내용들!하지만 이번 포스트에는 제목+아이콘 (예를들면 New)말줄임 + 아이콘이 유동적이게 우측에 붙어있어야 함에 대한 대응방법을 소개합니다 :> inline-block 이용하기 See the Pen GxRBOa by lee-h
Archive: 2018
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”를 적용한 요소안의 포함
Chap05. 개발일지 - 클로저 기초예제
오랜만에 스터디 하는 겸 개발일지를 적어본다 :^)나한테 주어진 2주차 과제는 for문을 돌려서 alert로 버튼안의 숫자들 (1,2,3,4,5)찍기였다.innerHTML, innerText 등등 태그안의 값을 가져오지 않고 index로만 가져오는 문제 즈엉답 ::: 123456789101112131415<script> // for문 돌려서 a
Web font
회사 세미나에서 웹폰트 관련으로 발표를 진행했는데, 그 때의 발표자료를 올리도록합니다 :^)(절대 문서정리가 귀찮아서 그런 것 아님..) 웹사이트는 대부분 텍스트로 이루어져있습니다.사진이나 영상 이외에 정보 전달은 글을 눈으로 읽는 과정에서 이루어지죠. 이 과정에서 시스템 폰트 외 상당 부분의 폰트를 아름다운 폰트로 사용하기 위해 웹사이트에 폰트를 심어주고