생소했던 내용이라 강의를 두 번 듣고, 여러번 머릿속으로 복기한 다음 글로도 정리해본다. 👀 반응형에서 이미지 종횡 비율 맞추기 (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..
나는 커밋을 항상 왜이렇게 성급하게 하는지 모르겠다. 그래서 매번 수정하느라 땀 뻘뻘 💦 커밋은 확인 다 끝내고 차분하게 하기. 매번 찾아보는 명령어 들은 여기에 모아두기. 🚧 확인하기 git log 커밋한 목록 확인하기 git reflog 깃 로그 확인하기 (커밋, 리셋 등 전부) 🚧 취소하기 git reset HEAD~2 이전 2개의 커밋을 취소 (원하는 숫자만큼) git reset HEAD^ 가장 마지막 커밋을 취소 🚧 수정하기 공부하면서 계속 추가 예정 🔥
처음에는 찾아보고 테스트하느라 시간이 꽤 걸려도 쓰다보면 효율을 팡팡 올려주는 단축키! 열심히 익숙해지자 👀 🛠 선택하기 cmd + shift + 양쪽 방향키 커서가 있는 줄 전체 선택 cmd + D 한번 : 단어 단위로 선택 여러번 : 선택한 단어와 동일한 단어 선택 cmd + shift + L 선택한 단어와 동일한 단어들 한번에 일괄 선택 cmd + alt + 위아래 방향키 커서 위 아래로 확장 선택 cmd + shift + 위아래 방향키 커서가 있는 위치로부터 전체 선택 🛠 이동하기 cmd + 양쪽 방향키 커서가 있는 행의 맨 앞 또는 맨 뒤로 이동 🛠 편집하기 alt + 위아래 방향키 커서가 있는 행을 위 아래로 이동 alt + shift + 위아래 방향키 커서가 있는 행을 위 아래로 복사 공부하..
보여지는 모양이 비슷할때가 많은 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 속성을 가지고 있다. 각 태그 내..
본격적으로 UXUI 업무를 하면서 자연스레 프론트엔드에 관심이 생겼다. 그리고 다양한 글과 영상을 보면서, 아 저기가 내가 있어야 할 곳이었나 하는 생각까지 들었다.😂 하고싶은데 어디서부터 시작해야할지 몰라 닥치는대로 보기 시작한게 2021년 1월. 생활코딩 강의를 듣다가 좀 더 실무에 가까운 공부를 하고싶어서 비교적 접근이 쉬웠던 디자인 학원 & 디자인 유튜브에서 HTML/CSS 강의들을 들었고, 이후에 개발 관련 유튜브, 특히 커리어 전환에 대한 영상들을 보다가 김버그님을 알게되었다. (그 때 커리어 전환에 관심을 가진건 그냥 '그럴수도 있을까..' 정도의 생각이었다.) 세상 쿨한 목소리의 스따일있는 영상이 넘나 매력적이었다. 강의도 하시는거 같길래 찾아내서 바로 등록! 4월에 시작해서 천천-히 따라..
- Total
- Today
- Yesterday
- 타입스크립트
- DOM
- Ternary
- 다중조건삼항연산자
- ES6
- Til
- 개념정리
- promise
- JSX
- notworking
- 조건부삼항연산자
- Prettier
- Asynchronous
- VSCode
- JS
- typescript
- CSS
- JQuery
- 리액트
- Synchronous
- 생각정리
- destructuring
- 구조분해할당
- callsignature
- class
- javascript
- Prototype
- 삼항조건연산자중복사용
- scrollEvent
- Callback
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |