일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 유사배열
- 클론코딩
- 실행 컨택스트
- 호이스팅
- 비동기 작업
- Lexical environment
- 호출 스택
- 이벤트 루프
- 매클로태스크
- JavaScript
- 넘블
- 함수형
- 렉시컬 환경
- localtunnel
- relatedTarget
- AbortController
- Call stack
- 화살표 함수
- 마이크로태스크
- fetch 취소
- webpack
- 번들러
- 로컬터널
- 로드마크
- hoisting
- pushstate
- 웹팩
- 이터러블
- 자바스크립트
- debounce
- Today
- Total
목록CSS (5)
내가 보려고 만든 개발 공부 일지
화면에 컨텐츠를 보여주기 위해선 API를 호출하고 데이터를 가져와서 해당 UI에 적절히 렌더링 해줘야 한다. 이때 API 요청에 대한 응답이 올때까지 사용자에게 "요청중" 이라는 상태를 보여주는게 좋은 사용자 경험일 것이다. 이 상태를 로딩마크로 보여주는데 (원이 빙글빙글 돌아간다던가 아니면 텍스트가 움직인다던가) 가장 무난한 모양의 로딩마크를 css로 구현하는 법을 끄적거려본다. 위 스타일1, 2 의 차이점은 1은 그냥 일정하게 회전만 하는 모습이고, 2는 뭔가 테두리가 늘어났다 줄었다 하면서 좀더 역동적으로 회전하는 모습이다. 스타일-1 /* style.scss */ .loading { div { border: 9px solid orange; border-radius: 50%; border-color..
일단 SCSS, Sass 둘다 CSS 를 확장시킨 기술이다 (전처리기 라고 부른다.) 둘다 중첩구문(nesting) 을 쓸수있다. 기존 css 에서 하위 선택자를 선택하려면 .select { display: flex; } .select div:hover { cursor: pointer; } .select > p { color: green; } 위와 같이 상위 선택자 .select 를 여러 번 써야 했지만 중첩을 이용하면 .select { display: flex; div: hover { cursor: pointer; } > p { color: green; } } 이런식으로 .select 를 한번만 써줘도되고, 가독성도 더 좋아진다. ( .select 안에 이런이런 스타일들이 적용되는구나 하는게 한눈에 보..
div { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } 이렇게 top, bottom, left, right 에 모두 0 을 주게 되면 저 div 는 화면전체를 뒤덮는 효과를 가지게 된다. (top: 0, left: 0, width : 100%, height : 100% 와 같은효과) 아무튼 이걸 이용해서 어떤 팝업이나 툴팁 같은 요소들이 있다고 할때 그 요소 밖같영역을 클릭했을때 없애는 기능을 구현할때 사용한다. 예제) function onClosePop(){ document.querySelector('#pop').style.display = 'none' }
CSS 로 여러 HTML 엘리먼트들을 원하는대로 배치하고 싶을때 생각만으로는 간단해 보였는데 막상 CSS 를 짜서 적용해보면 내맘처럼 배치가 안되는 적이 많았다. 이때 참고하면 좋은 블로그를 공유한다. https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com