Front-end

[CSS] 생소한 글자 관련 속성 모음

text-transform 글자를 소문자 또는 대문자로 바꿔주는 속성 uppercase: 모든 글자를 대문자로 lowercase: 모든 글자를 소문자로 capitalize: 단어의 첫 글자만 대문자로 letter-spacing 자간(글자간 간격) 조정 letter-spacing: 1px letter-spacing: -2rem word-spacing 단어간 간격(띄어쓰기 간격) 조정 word-spacing: 15px

[JS] onInput 이벤트 - 입력한 글자 실시간으로 화면에 출력하기

결과: const input = document.getElementById('input'); const result = document.getElementById('result'); input.oninput = function() { result.innerHTML = input.value; }; 1. document.getElementById('id')로 엘리먼트를 선택하고, 2. oninput 이벤트를 할당해준다. 3. result.innerHTML = input.value - input.value 값을 id="result"인 엘리먼트에 설정해준다. body의 끝 부분에 를 위치시키거나 js 파일을 로드한다면 defer를 붙여 불러야 엘리먼트를 가져올 때 null이 되지 않을 수 있다.

[JS] prototype 참고글

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67 [Javascript ] 프로토타입 이해하기 자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토타입인데요. 프로토타입이 거의 자바스크립트 그 자체이기때문에 이해하는 것이 어렵 medium.com 흥미를 잃지 않게 도입부부터 친절하게 설명한 다음, 그림과 그에 대한 해설로 직관적으로 이해가 되게 잘 설명해놓은 글이다. 이것만 읽으면 프로토타입에 대해 이해하는 것은 문제가 없을 듯. 개념이 가물가물해질 때마다 다시 보면 좋을 듯하다.

[JS] String 오브젝트에 굳이 toString()이 있는 이유

toString() 메소드란? toString()은 어떤 대상을 문자열로 바꿔주는 메소드이다. Number 오브젝트에 있는 toString() 함수는 숫자를 문자열로 바꿔준다. String 오브젝트에 있는 toString()은 문자열을 문자열로 바꿔준다. 문자열을 굳이 문자열로 바꿔줄 필요는 없어 보인다. 왜 String 오브젝트에는 toString() 메소드가 존재하는 것일까? 그 이유를 알려면 먼저 프로퍼티(property)와 프로토타입(prototype)에 대해 알 필요가 있다. 프로퍼티와 프로토타입 프로퍼티는 name-value 쌍을 뜻한다. 예를 들면 {name: "Carrot", eyeColor: "blue", meow: meow()} 는 프로퍼티이다. 여기서 meow() 처럼 value 자리..

[JS] undefined와 null의 차이

undefined 변수를 선언하면 자동으로 undefined 값이 할당된다. 그러므로 undefined는 아직 값을 따로 할당하지 않았다는 표시이다. undefined도 값이니 이렇게 기본적으로 할당되는 undefined 외에도 당연히 변수에 undefined을 할당할 수 있다. 하지만 값을 아직 할당하지 않은건지 undefined를 의도적으로 할당해준건지 구분하기 힘드므로 권장하지 않는다. 그래서 둘을 구분하기 위해 null이 필요하다. typeof 연산자를 통해 타입을 확인하면 undefined는 undefined 타입이다. null 아무 값도 가지고 있지 않다고 표시해주고 싶은데 undefined를 할당하자니 아직 초기값을 설정해주지 않은 변수와의 구별이 어렵다. 그럴 때에는 null값을 할당해주면..

[CSS]background image

background-repeat 속성 repeat 혹은 background-repeat을 지정하지 않았을 때 이미지가 수직, 수평 모든 방향으로 반복된다. no-repeat 이미지를 반복하지 않음 repeat-x 옆으로(horizontally) 반복 repeat-y 수직으로(vertically) 반복 * 영어로는 어떻게 표현하는 지 알아두는 것도 도움이 됩니다. vertical 수직의, horizontal 수평의 horizontally 반복해 달라고 하면 repeat-x vertically 반복해 달라고 하면 repeat-y

[CSS]display 속성 (block, inline, inline-block, none)

●block width, height 지정 가능 margin, padding 지정 가능 ~ list 태그 (, , , , , ) navigation 태그 (, , , , , ) ●inline width, height 지정 불가 width는 컨텐츠 길이만큼 지정됨, hegith는 폰트 크기만큼 지정됨 margin 위아래X / padding 좌우O, 위아래O(But only 시각O, 공간 차지X) ●inline-block block처럼 줄바꿈이 이루어지지 않음 block처럼 height, width 지정 가능, 만약 지정 안했을 경우 inline처럼 크기가 컨텐츠 크기 만큼 잡힘 ●none 지정된 요소가 아예 없는 것처럼 사라지게 보임. visibility:hidden과는 다른 점은 visiblity:hid..