분류 전체보기
[CSS] 제일 쉬운 overflow 설명
[CSS] 제일 쉬운 overflow 설명
2020.12.11[CSS] 제일 쉬운 overflow 설명 오늘은 css의 overflow 속성에 대해서 알아보겠습니다. 기본 컨텐츠, 콘테이너 성질 이해하기 기본 CSS는 요소의 크기(width, height) 를 정하지 않는다면 아래 그림 1 처럼 컨텐츠 늘어나면, 요소의 크기도 같이 커지게 됩니다. 이럴 때 "초과하는" 영역을 제어할 수 있는 속성이 overflow 입니다. 요소의 크기(width, height)를 고정해둔 상태에서 overflow 속성을 주게 된다면 컨텐츠가 요소의 크기보다 늘어날 경우, 초과한(넘쳐흐른 = overflow 된) 부분이 설정해 둔 속성에 맞춰서 보이게 됩니다. 속성값 visible 기본값. 영역을 벗어난 부분을 자르지 않고 그대로 보이게 함 (그림 1 참고) hidden 영역을 벗..
[JS] 문법정리 > 타입과 변수
[JS] 문법정리 > 타입과 변수
2020.12.09[JS] 문법정리 > 타입과 변수 자바스크립트의 특징 - 싱글스레드 이벤트 기반 - 다중 패러다임 - 다이나믹 타입 - 크로스 플랫폼 - Prototype 기반 표준 규격 - 자바스크립트 출시 1995 - ES1 - 1997 - ES3 - 1999 - ES5 - 2009 - ES6 - 2015 - ES Next - 2020~ - http://kangax.github.io/compat-table/es5/ 타입과 변수 타입의 종류 Primitive Type(원시형) - Number : 123 / NaN / Infinity - Boolean : true / false - String : "sangziii" - Undefined : undefined - Null : null - Symbol : Symbol() ..
[CSS] word-wrap, word-break 정확하게 알아보기
[CSS] word-wrap, word-break 정확하게 알아보기
2020.12.09[CSS] word-wrap, word-break 정확하게 알아보기 오늘은 CSS의 word-wrap 과 word-break 속성에 대해 알아보겠습니다. 항상 그렇듯이 해당 속성을 알아보기 전에, 먼저 왜 이 속성들이 필요한 지부터 이해가 필요합니다. // 영문 https://plus.google.com/+googlekorea#+googlekorea/ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. // 한글 나랏말싸미중귁에달아문자와로로서로삼았디디아니할세이런전차로어린백셩이 니르고져 ..
[CSS] cursor 속성 빠르게 알아보기
[CSS] cursor 속성 빠르게 알아보기
2020.12.09[CSS] cursor 속성 빠르게 알아보기 cursor 속성 마우스가 요소 위에 위치(hover) 했을 때, 커서의 모양을 바꿀 때 사용합니다. 다양한 종류가 있으며, 상황 및 용도에 맞게 사용하면 됩니다. UX 개선에 도움을 주는 속성 입니다. 사용법 .text { cursor: pointer; cursor: not-allowed; // cursor: 원하는 값 } 시스템 cursor 아래 codepen 예제에서 키워드별 모양을 확인할 수 있습니다. See the Pen cursor list by 이상진 (@sangziii) on CodePen. 커스텀 cursor 시스템에서 기본적으로 제공하는 키워드 커서 외에 자신이 원하는 이미지를 적용할 수도 있습니다. 사용법 차례대로 첫번째는 적용되기 원하는 ..
[html/css] HTML 공백 줄바꿈 그리고 white-space
[html/css] HTML 공백 줄바꿈 그리고 white-space
2020.12.09[html/css] HTML 공백 줄바꿈 그리고 white-space 이번에는 HTML 텍스트의 공백, 줄 바꿈에 대해서 알아보겠습니다. 예제로 시 한편을 공유하기 위해 HTML로 작성하려고 합니다. 시는 행으로 나누어 표현하는 표기해야 하므로 신경 써서 HTML을 작성하였습니다. See the Pen html spacing by 이상진 (@sangziii) on CodePen. 결과를 살펴보겠습니다. 이런,, HTML에서는 시의 형태로 enter를 쳐서 개행하였는데, 왜 브라우저에서는 반영되지 않았을까요? text의 공백(space)과 공백문자( ) HTML에서의 공백 관력 규칙은 다음과 같습니다. - 공백을 만들 수 있는 키(key)는 space, enter, tab 세 종류. - HTML에서는 기본..
[CSS] 말줄임(ellipsis)에 관한 모든 것
[CSS] 말줄임(ellipsis)에 관한 모든 것
2020.12.09[CSS] 말줄임(ellipsis)에 관한 모든 것 이번에는 위 그림처럼 width, height 고정된 영역에 길이가 긴 텍스트가 들어갈 경우 말줄임 처리하는 방법에 대해 알아보겠습니다. 강제로 잘라내는 방법 overflow: hidden 과 white-space 을 사용하여 컨텐츠를 잘라내는 방법입니다. 해당 속성을 모르시거나 헷갈리신다면, 아래 포스팅에 쉽게 정리해두었습니다. 참고해주세요 [html/css] HTML 공백 줄바꿈 그리고 white-space [CSS] 제일 쉬운 overflow 설명 한 줄 처리 기본적으로 text가 길어져 width를 넘게 되면 자동 개행됩니다. 이때 white-space: nowrap를 주게 되면 자동 개행되지 않습니다. (white-space 에 대한 자세한 설..
[미국주식] 테슬라 또 다시 유상증자 팔아야 될까요?
[미국주식] 테슬라 또 다시 유상증자 팔아야 될까요?
2020.12.09테슬라 또다시 유상증자 팔아야 될까요? 테슬라(Tesla, NASDAQ: TSLA)가 50억 달러 (약 5조 4천억) 규모의 유상증자를 8일 발표했습니다. 금액은 9월 1일 유상증자와 똑같은 금액 $50억 달러이고 한 번에 이뤄지지 않고, 보통 주식을 발행해 시시때때로 시장가에 파는 형식으로 진행된다고 밝혔습니다. 테슬라는 왜 유상증자 진행을 결정했을까요? 회사가 유상증자를 진행하는 이유는 크게 두가지가 있습니다. 1. 회사 운영에 필요한 자금을 마련하기 위해 2. 회사가 더 발전하기 위해 필요한 투자금을 마련하기 위해 테슬라가 공식적으로 발표한 이유는 2번으로 보입니다. 현재 텍사스 오스틴 1개, 독일 베를린에 2개 공장을 짓고 있으며, 프리몬트, 텍사스, 상하이의 기존 공장의 조립 생산량 확대 등의 ..
[이슈] Fixed DOM과 가상 키보드
[이슈] Fixed DOM과 가상 키보드
2020.12.09[이슈] Fixed DOM과 가상 키보드 배경 모바일 웹 작업할 때 종종 가상 키보드를 사용하는 input과 특정 위치에 고정된(position 속성이 fixed 인) 요소가 함께 설계된 시안을 만나게 된다. 이 때 아래 그림처럼 사용자가 input을 포커스 했을 때, fixed 된 요소가 가상 키보드 바로 위에 위치하는 스펙을 원하는 경우가 많다. 시안대로 fixed 된 요소를 만들어보면 특정 디바이스에서 예상과 다르게 가상 키보드가 fixed 된 요소를 덮어서 가리는 이슈를 발견하게 된다. 해당 이슈는 OS(iOS/Android)마다 조금씩 다르게 나타나고, iOS에서는 버전마다 조금씩 다르게 동작하여 파악하기 힘들다. 이 문서는 해당 이슈를 OS별, 세부 버전별로 살펴보고, 왜 이런 현상이 발생하는..
[CSS] 이미지 적용 및 crop 방법 A to Z
[CSS] 이미지 적용 및 crop 방법 A to Z
2020.12.09[CSS] 이미지 적용 및 crop 방법 A to Z 이번 포스팅에서는 CSS 로 이미지를 적용하는 방법과 Crop하는 방법에 대해 알아보겠습니다. 1. background-image 방식 CSS의 background 속성을 사용하여 DOM의 배경으로 이미지를 적용하는 방식 1.1 기본 성질 컨테이너 DOM 사이즈와 이미지 사이즈의 관계 case 1 : 컨테이너 DOM 사이즈 === 이미지의 사이즈 - 기본적으로 컨테이너의 좌측 상단(0, 0)을 기준으로 정렬 - 다른 설정이 없다면 원본 이미지 사이즈로 적용 case 2 : 컨테이너 DOM 사이즈 > 이미지의 사이즈 - 이미지가 반복되면서 컨테이너 DOM의 빈 공간을 가득 채움 ⇒ background-repeat / background-size 속성으로..