Today I Learned
1.#TIL01
position 속성 정리
2.#TIL02
float / clear 속성 정리
3.#TIL03
플렉스(정렬)
4.#TIL04
position: sticky 란?
5.#TIL05
요소의 성격 없애기(reset) / 요소 숨기는 방법
6.#TIL06
display 속성 정리
7.#TIL07
HTML의 progress 요소에 대한 설명과 div로 progress 모양을 어떻게 만들고 꾸밀 수 있는지 정리
8.#TIL08
position: absolute 속성을 이용하여 박스를 수평 및 수직 가운데 정렬하는 방법
9.#TIL09
블록요소 width:auto 값의 성격이 변경되는 경우
10.#TIL10
인라인요소와 블록요소의 가운데 정렬 방법
11.#TIL11
background 속성 정리
12.#TIL12
데이터 종류(자료형) 정리
13.#TIL13
DOM API(Document Object Model, Application Programming Interface)
14.#TIL14
산술, 할당 연산자 / 비교, 논리 연산자 / 삼항 연산자
15.#TIL14 (2)
조건문, 반복문
16.#TIL14 (3)
변수 유효범위(Variable Scope), 형 변환(Type conversion)
17.#TIL14 (4)
함수 복습 / arguments 객체
18.#TIL14 (5)
화살표 함수
19.#TIL14 (6)
즉시실행함수(IIFE) / 호이스팅 / 타이머함수 / 콜백
20.#TIL15
생성자 함수(prototype)
21.#TIL16
this
22.#TIL16 (2)
ES6 Classes
23.#TIL16 (3)
상속(확장)
24.#TIL17
JS데이터 - String
25.#TIL17 (2)
JS데이터 - 숫자와 수학
26.#TIL17 (3)
JS데이터 - 배열(1)
27.#TIL18
JS데이터 - 배열(2)
28.#TIL18 (2)
JS데이터 - 객체
29.#TIL19
transition / animation
30.#TIL20
구조 분해 할당(Destructuring assignment)
31.#TIL20 (2)
전개 연산자(Spread)
32.#TIL20 (3)
데이터 불변성(Immutability)
33.#TIL21
얕은 복사(Shallow copy), 깊은 복사(Deep copy)
34.#TIL22
가져오기, 내보내기
35.#TIL22 (2)
Lodash 사용법
36.#TIL22 (3)
JSON(JavaScript Object Notation)
37.#TIL23
localStorage
38.#TIL23 (2)
정규식 생성
39.#TIL24
position / Swiper
40.#TIL25
Element.scrollIntoView() / Element.getBoundingClientRect()
41.#TIL26
wrapper
42.#TIL26 (2)
chain
43.#TIL26 (3)
event
44.#TIL27
Remove selection from the previous item and select the new one
45.#TIL27 (2)
Loops and iteration
46.#TIL28
Date / padStart() / padEnd()
47.#TIL29
Geolocation API / Fetch API
48.#TIL30
태그(tag) 정리
49.#TIL31
CSS 선택자 / 선택자 우선순위 / 스타일 상속
50.#TIL32
웹디자인기능사 필기 정리
51.#TIL33
웹디자인기능사 필기 정리
52.#TIL34
jQuery 정리
53.#TIL35
웹 접근성
54.#TIL36
<table>
55.#TIL37
SEO(Search Engine Optimization)
56.#TIL38
Event
57.#TIL39
tabindex Attribute
58.#TIL40
git 명령어
59.#TIL41
git 명령어 (2)
60.#TIL42
색상 내장 함수
61.#TIL43
웹 표준 / 웹 접근성 / 웹 호환성
62.git 명령어 정리
reset: 원하는 시점으로 돌아간 뒤 이후 내역들을 지움 revert: 되돌리기 원하는 시점의 커밋을 거꾸로 실행 merge: 두 브랜치를 한 커밋에 이어붙임 브랜치 사용내역을 남길 필요가 있을 때 적합한 방식 rebase: 브랜치를 다른 브랜치에 이어붙임 한 줄로
63.랜드마크
랜드마크란? 랜드마크는 웹 페이지에서 제공되는 콘텐츠 유형이 어떤 역할을 하는지 식별할 수 있도록 도와주는 표지판 기능을 한다. 스크린 리더와 같은 보조기술 사용자에게 웹페이지의 구조를 명확히 식별하기 위해 사용될 수 있으며, 보조기술 사용자에게 랜드마크 역할을 통해 효과적인 키보드 탐색을 지원하여 웹 페이지의 탐색 경험을 향상시킬 수 있다. 💡 랜...
64.<img> 태그로 반응형 이미지 구현하기
👀 이미지 태그 속성 srcset 브라우저에 이미지 선택권을 위임하는 속성 같은 비율의 다양한 크기를 가지는 동일 이미지 2개 이상 명시하는 속성으로 만약 1개의 이미지만 명시하려면 src 속성을 사용하면 된다. 사용방법 쉼표(,)로 사용할 이미지들의 경로와 해당
65.부트스트랩 파악하기
부트스트랩이란? 부트스트랩은 웹 개발을 빠르고 효율적으로 할 수 있도록 도와주는 오픈 소스 프론트엔드 프레임워크입니다. HTML, CSS, JavaScript를 기반으로 하며, 기본적인 웹 디자인의 구성 요소를 제공하여 사용자가 복잡한 코드 없이도 세련된 사용자 인터페
66.CSS translate 속성 독립적 사용
CSS translate 속성은 요소를 이동시키는 기능입니다. 이전에는 transform 속성 내에서만 사용되었지만, 현재는 독립적으로 사용 가능해져 스타일링이 더 직관적이고 유연해졌습니다.변경 사항: transform 내에서만 사용되던 translate가 독립적으로
67.리액트 설치 및 개발 환경 설정
리액트를 시작하려면 Node.js가 필요합니다.Node.js는 JavaScript 런타임으로, 설치하면 npm도 자동으로 함께 설치됩니다.🙋♀️ 자바스크립트 런타임이 뭔가요?"자바스크립트 런타임"은 JavaScript 코드가 실행되는 환경을 의미합니다. 보통 브라우
68.리액트 기초: JSX 문법과 State 활용하기
기존 HTML에서는 클래스명을 추가할 때 class=""를 사용하지만, JSX에서는 className=""으로 작성해야 합니다.그 이유는 JSX가 자바스크립트의 문법을 기반으로 하기 때문인데, 자바스크립트에서 class는 예약어로 사용되기 때문에 이를 직접 사용할 수