프로그래밍
[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체
[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체
2020.12.20[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체 Javascript 는 다중 프로그래밍 패러다임이다. 패러다임의 종류 1) 절차적 프로그래밍 - 조건문 - 분기분 - 반복문 - 프로시져 2) 함수형 프로그래밍 - 함수는 1급 객체 - 고차 함수 - 익명 함수 3) 객체지향 프로그래밍 - 객체 생성 - 객체 상속 - 다형성 Javascript 에서는 모든 것을 함수가 책임진다. 함수 선언 방법 함수를 선언하는 방법에는 함수 선언식, 함수 표현식, Function 생성자 함수 총 3가지 방법이 있다. 1. 함수 선언식 (function statement) function name(arg) { // ... return "반환값"; } - JS에서는 함수도 일반 객체처럼 값으로 취급되기 때문에, 함수..
[CSS] float 와 float 해제 방법 A to Z
[CSS] float 와 float 해제 방법 A to Z
2020.12.16[CSS] float 와 float 해제 방법 A to Z 안녕하세요 Nuhends 입니다. 이번 포스팅에서는 float 에 관한 걸 알아보겠습니다. 다음과 같은 순서로 적어보겠습니다. 바쁘신 분들은 해결방법 2-4 방법으로 바로 넘어가시는 걸 추천합니다. 1. float 가 필요한 이유 (배경) 2. float 를 사용하는 방법 3. float 의 문제점과 해결 방법 0. 시작하기 앞서 최근에는 float 를 대신 사용할 flex, grid 등 다양한 레이아웃 속성이 나오고 있습니다. float 는 오래된 속성이라, 사용하기 불편하고 어렵기도 합니다. 하지만 새로운 레이아웃 속성보다 구형 브라우저에서의 이슈가 없어 크로스 브라우징에 장점이 있고 이전에 작성된 거의 대다수의 코드들이 float 방식을 채..
[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 에 대한 자세한 설..
[이슈] 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 속성으로..