탭 메뉴에서 반복문을 만들면서 배운 필터링 문법. 역시나 배운걸 검색하니 훨씬 방대한 내용이 나오는데 일단 내가 지금 사용해봤던 것들부터 정리하고, 차차 경험이 닿는대로 내용 추가 예정. 👀 .first() .last() $('.tab-button').first().addClass('active'); 첫번째 tab-button 요소를 선택해 클래스 추가 $('.tab-button').last().addClass('active'); 마지막 tab-button 요소를 선택해 클래스 추가 👀 .eq() $('.tab-button').eq(0).addClass('active'); 0번째 tab-button 요소를 선택해 클래스 추가 $('.tab-button').eq(-1).addClass('active'); ..
탭 UI를 만들다가 자연스럽게 나온 반복문 개념. 코드가 잘 작동해도 명확하지 않은 부분이 있으면 아는게 아니므로, 생활코딩 반복문 파트를 다시 공부하며 정리했다. 이 코드에서 내 의문은 이거였다. 반복문의 조건에 의해 i 에 들어가는 숫자가 바뀌면서 내부의 코드가 반복 실행되는 것은 알겠는데.. 그럼 어떻게 그 중 클릭하는 버튼의 번호에 해당하는 코드만 실행되는거지? 👀 아.. 모르는걸 정리해서 적다보니 알겠다. 버튼이 3개인 경우, 원래는 .eq(0) .eq(1) .eq(2)를 넣어 여러 묶음의 코드를 만들어놓아야 했으나, 위의 코드로 정리하면 여러 묶음의 코드를 만들어 놓은 것과 똑같이 코드가 생성되니 클릭 이벤트가 발생했을때 실행될 수 있는거구나.ㅎ.. 의식의 흐름대로 쓰는 포스트.. 일단 정리는..
매번 익숙한 position: absolute;만 사용하다가 가끔 fixed를 사용할일이 생기면 생각없이 사용하는것 같아서 마음에 걸렸다. 다시 개념정리를 정리해보자! 📌 position position은 요소의 위치를 정해줄 수 있는 속성이다. static을 제외한 나머지 type들은 사용시 z-index 레벨이 생성된다. 📌 position : static position의 default type. 태그 순서대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. 📌 position : relative static과 동일한 위치로 보이지만 z-index가 생성되어 floating된 상태. top, left, right, bottom 옵션을 주면 위치가 변화하지만, 다른 요소에 영향을 주지 않는다. (원래 있던 ..
처음 들었던 자바스크립트 기초 강의에서는 const와 let을 사용하고, var는 의도를 알 수 없으므로 사용하지 말라고 배웠다. 근데 어떤 강의에서는 var를 많이 사용한다고도 하길래 구글링한 내용을 글로 정리해보았다. 정리하고보니 hoisting과 scope개념까지 알아야 하는 이유가 있었다. 📌 변수를 선언하기 변수(variable)는 하나의 값을 저장하기 위해 확보하는 공간이며, 그 공간을 식별하기 위해 이름을 붙이는 것이다. 변수에 이름을 붙여 알림 : 선언(declaration) 변수에 어떤 값을 저장 : 할당(assignment) 저장된 값을 읽어옴 : 참조(reference) 변수의 선언은 const let var 를 통해 할 수 있으며, ES6에서 const 와 let이 추가되었다. 📌 ..
10월 17일 노마드코더 사이트에서 자바스크립트 공부를 시작했다. 호기롭게 예습할 여유 없이 바닐라JS강의와 챌린지를 함께 진행하려했으나 실패. 챌린지는 일단 포기하고, 내 페이스대로 강의를 다 들었다. 11월 15일 지금은 또 다른 강의를 듣는 중인데, 바닐라JS 수업의 챌린지 기간이 다시 돌아와서 등록했다. 매일 나오는 퀴즈도 풀고 기록도 하면서 들었던 강의 내용을 복습해보면 좋을 것 같다. 👀 Why Javascript 자바스크립트는 프론트엔드가 사용할 수 있는 유일한 프로그래밍 언어다.(HTML/CSS는 프로그래밍 언어가 아니다) 자바스크립트는 모든 브라우저에 내장되어있어 설치할 필요가 없다. 그래서 파워풀하다. 브라우저는 HTML/CSS/Javascrip만 이해할 수 있다. 자바스크립트는 10일..
CSS에서 말줄임 처리를 하는 두 가지 방법. 아래 코드는 mixin으로 만들어서 사용한 예시. 상황에 맞게 사용할 것. 📌 한 줄로 보이는 텍스트를 말줄임표 처리할때는 [ truncate ] @mixin truncate() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 📌 여러 줄로 보이는 텍스트를 말줄임표 처리할때는 [ line-clamp ] @mixin line-clamp($line) { display: -webkit-box; -webkit-line-clamp: $line; -webkit-box-orient: vertical; overflow: hidden; } 자꾸 쓰다보면 익숙해질테니 불안해하지말고 기록하자!🔥
생소했던 내용이라 강의를 두 번 듣고, 여러번 머릿속으로 복기한 다음 글로도 정리해본다. 👀 반응형에서 이미지 종횡 비율 맞추기 (1:1 비율 이미지 만들기) 1. % 와 px의 개념은 다르다. 2. width의 100%는 명확하지만, height의 100%는 부모에 명확한 px값이 없다면 명확하지 않아진다. 3. 반응형 제작 시 width는 100%를 주면 디바이스에 따라 px 사이즈가 변화하지만, 세로는 안된다. 4. padding 과 margin 의 % 기준은 width 를 따른다. 5. 따라서 반응형에서 정사각형 이미지를 만들기 위해 padding을 사용한다. .img-parent { width: 100%; height: 0; padding-bottom: 100%; img { display: bl..
보여지는 모양이 비슷할때가 많은 button과 a태그.. input type="submit" 까지 시멘틱한 마크업을 위해 확실하게 구분하자! 📌 a : 단순 링크 연결을 위한 태그 문서(페이지)간의 이동이나 문서 내 다른 영역으로 이동 등, 단순히 A에서 B로의 연결을 위한 태그. 구글로 이동 text 페이지 내 id 설정한 div 영역으로 이동 Jessie에게 메일 쓰기 Jessie에게 전화 걸기 새창으로 구글 열기 📌 button : 눌러서 어떤 액션이 일어나도록 하는 태그 button 태그는 데이터를 제출하거나, ui를 조작하는 등의 버튼에 쓰인다. button 태그에는 꼭 type을 명시해주어야 한다. button type="submit"이 default 값이기 때문에, 단순 UI조작을 위한 버튼..
가볍게 생각하고 넘겼다가 쓸 때마다 헷갈렸던 개념들은 주제별로 찾아보고 풀어서 다시 정리해두기. 강의를 들으면서 block과 inline-block의 구분, display : none;과 visibillity : hidden;의 구분이 헷갈려서 정리해본다. Q. inline-block은 왜 써야할까? 그냥 block으로 만들면 안되나? A. display 기본적인 속성을 잘 구분해보자 display : block; div, p, h, li 태그 등이 기본적으로 block 속성을 가지고 있다. 각 요소마다 한 줄을 모두 차지한다. 크기, 여백과 관련한 속성을 모두 가질 수 있다. display : inline; span, strong, a 태그 등이 기본적으로 inline 속성을 가지고 있다. 각 태그 내..
- Total
- Today
- Yesterday
- Prototype
- callsignature
- 삼항조건연산자중복사용
- 타입스크립트
- Ternary
- CSS
- 다중조건삼항연산자
- 조건부삼항연산자
- DOM
- notworking
- ES6
- typescript
- destructuring
- JQuery
- Synchronous
- promise
- VSCode
- 개념정리
- javascript
- 생각정리
- 리액트
- Prettier
- JS
- JSX
- class
- Asynchronous
- Til
- Callback
- 구조분해할당
- scrollEvent
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |