1. ES21, 논리연산자
(1) &&=
: 첫 번째 변수가 true이면, 두 번째 변수를 할당한다.
//before
let one = true;
let two = 13;
if (one) {
one = two;
}
console.log(one); //13//after
let one = true;
let two = 13;
one &&= two;
console.log(one); //13(2) ||=
: 첫 번째 변수가 false이면, 두 번째 변수를 할당한다.
//before
let one = null;
let two = 13;
if (one) {
one = two;
}
console.log(one); //13//after
let one = null;
let two = 13;
one &&= two;
console.log(one); //13(3) ??=
: 첫 번째 변수가 null 또는 undefined이면, 두 번째 변수를 할당한다.
//before
let one = undefined;
let two = 13;
if (one) {
one = two;
}
console.log(one); //13//after
let one = undefined;
let two = 13;
one &&= two;
console.log(one); //132. lazy loading image
: 이미지의 경우 용량이 클수록 사이트에 부담을 줄 수 있다.
: 그래서 lazy loading(지연로딩)을 사용해 사이트 성능과 응답속도를 높일 수 있다.
: 아래는 지연로딩을 사용하는 방법 중 하나이다.
<img src="" loading="lazy" />: img 태그에 loading="lazy"을 하면 지연로딩을 할 수 있다.
See the Pen by KumJungMin (@kumjungmin) on CodePen.
3. 입력 제안받기
: 입력칸이 있고, 사용자에게 특정 값을 제안하고 싶다면?
: <datalist/>를 사용해보자!
: 아래 코드예시에서 input칸을 클릭해봅시다 :)
단, datalist의 id === input의 list 동일해야함
See the Pen by KumJungMin (@kumjungmin) on CodePen.
4. picture 태그
: 우리는 이미지를 넣기 위해 주로 img태그를 사용하곤 한다.
: 그리고 창 크기 별로 이미지 크기를 달리하기 위해 css를 사용한다.
: 하지만 picture를 사용하면 html 만으로도 크기 조절이 가능하다!
: 아래는 _TCP school의 picutre 태그 예시 사진_이다.
.gif)
: picture태그는 아래와 같이 사용하면 된다.
See the Pen picture by KumJungMin (@kumjungmin) on CodePen.
하지만 이 태그는 IE에서는 작동하지 않는다. (죽어라! IE!)
5. 기본 URL 설정
: 만약 우리가 여러 사이트로 이동하는 버튼을 만든다고 하자.
: 그렇다면 아래와 같이 만들 것이다.
<a href="https://www.naver.com/blog/1">1</a>
<a href="https://www.naver.com/blog/2">2</a>
<a href="https://www.naver.com/blog/3">3</a>
<img src="https://www.naver.com/blog/4/hello.png"/>
하지만 특정 URL (www.naver.com/)이 중복되는데, 중복코드를 한 번만 쓸 수 없을까?
있다! 바로 baseURL을 설정하는 것! 사용방법은 아래와 같다.
<head>
<base href="https://www.naver.com/blog/" target="_blank">
</head>
<body>
<a href="1">1</a>
<a href="2">2</a>
<a href="3">3</a>
<img src="4/hello.png" alt="hello world">
</body>출처
아래 사이트에 가면 더 자세히 알 수 있어요!
'개발 기술 > 사소하지만 놓치기 쉬운 개발 지식' 카테고리의 다른 글
| 밀리초를 날짜로 바꾸는 법 (0) | 2021.09.12 |
|---|---|
| arrow, normal function의 차이 (0) | 2021.09.12 |
| 여러 인자 넘기기, NaN 체크, 값 서로 교체, 글 작성 가능한 div (0) | 2021.09.12 |
| 이중부정, 조건문 대신, or연산자와 조건문 (0) | 2021.09.12 |
| [알아보기] a태그 margin, beforeupload, !important, event.keyCode (0) | 2021.09.11 |
댓글