프레임워크160 [생활코딩] 가상 클래스 선택자 pseudo(수도 가상, 모조의, 가짜의) 수도 클래스 selector = 가상 selector Class 선택자는 Id 선택자처럼 한가지만 선택하는 것이 아니고, Tag 선택자는 모든 태그에 대해서만 선택하는 아주 거친 선택자는 아닌 선택자입니다. Class 선택자처럼 동작하지만 Class 선택자는 아니고, 아주 특수한 선택들을 하게 하는 선택자이고, 요소(element)의 상태에 따라서 요소를 선택하는 선택자입니다. 방문함 방문안함 link 방문하지 않은 곳을 나타내는 수도 클래스 visited 방문한 곳을 나타내는 수도 클래스 hover 마우스를 올렸을 때 선택되는 수도 클래스 active 클릭 했을 때 실행되는 수도 클래스 focus tap을 사용해서 focusing 되었을 때 실행되는 수도 클래.. 2022. 1. 21. [React] 렌더링 최적화 Hook - useRef JavaScript에서 특정 DOM을 선택해야 할 때는 DOM selector를 사용하고, React에서도 특정 요소의 크기를 가져오거나 focus를 설정할 때 특정 DOM을 선택해야 하는 상황이 있습니다. 이럴 때, React 함수형 컴포넌트에서는 React Hook 중 하나인 useRef() 함수를 사용합니다. 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef() 함수를 사용합니다. [ Ref란 무엇인가 ] reference의 줄임말로, DOM을 직접 참조하기 위해 사용합니다. 클래스형 컴포넌트에서는 createRef, 함수형 컴포넌트에서는 useRef를 사용하는 데 둘의 동작 방식은 동일하다. HTML에서 id를 사용해서 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서.. 2022. 1. 20. [생활코딩] 선택자 공부 팁 선택자는 CSS에서 주어 같은 역할을 하는 것이기 때문에 매우 중요합니다! 아래 사이트를 이용하면 selector를 익히기 좋다고 합니다 CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 2022. 1. 20. [생활코딩] 부모 자식 선택자 전산에서는 부모, 자식이라는 비유를 많이 씁니다. 위에 있는 것과 아래에 있는 것 or 포함 하는 것과 포함 되는 것들의 관계를 부모, 자식이라고 표현합니다. 클래스, 아이디, 태그 선택자만으로는 섬세한 작업을 하지 못하는 경우들이 있기 때문에 그것들을 기본으로 해서 조금 더 복합적으로 조합해서 아주 정교한 선택을 할 수 있게 해줍니다. HTML CSS JavaScript HTML CSS selector declatarion JavaScript 2022. 1. 20. [생활코딩] 선택자의 종류 : 클래스 선택자 selector : 선택자 declaration : 선언 property : 속성 value : 속성 값 ":" : 속성과 속성 값을 구분 해주는 구분자 ";" : 선언과 선언을 구분 해주는 구분자 HTLM CSS JavaScript [ id ] 유일한 이름을 의미한다. (여러번 쓸 수 X) (ex) 주민등록번호 [ class ] 어떠한 대상을 관리하기 쉽도록 그룹화 하는 역할 (여러번 쓸 수 O) (ex) 학년, 반 2022. 1. 19. [생활코딩] 선택자의 종류 : 아이디 선택자 selector : 선택자 declaration : 선언 property : 속성 value : 속성 값 ":" : 속성과 속성 값을 구분 해주는 구분자 ";" : 선언과 선언을 구분 해주는 구분자 HTLM CSS JavaScript 2022. 1. 19. [React] 렌더링 최적화 Hook - useCallback, useMemo Clean Coding에 대한 책을 읽고, 정리를 하다 보니 useState, useEffect만으로는 성능 최적화나 클린한 코드가 되지 않는구나를 뼈저리게 느끼게 되었고 찾아보니 성능 최적화를 위한 Hook이기 때문에 필수적으로 사용 할 필요는 없지만. 필수가 아니라는 이유 만으로 해당 기술의 장단점을 파악하지 않고, 넘어가는 건 좋지 못한 것 같아 정리를 하게 되었다! 이제는 사용해보자 useMemo & useCallback - 이화랑 블로그 이제는 사용해보자 useMemo & useCallback 이제 useState와 useEffect에 완전히 익숙해졌다고 느꼈는데, 컴포넌트 내에서 저 두 개의 hook 만으로도 props나 state를 다루는 로직에 관련된 기본적인 기능을 모두 leehwaran.. 2022. 1. 18. [CSS] @keyframes 사용하기 CSS에 @keyframes와 animation을 사용해 보았다! [ 실행 화면 ] [ 전체 코드 ] 더보기 PICK YOUR FAVORIT body { margin: 0; height: 2000px; } section { height: 800px; background: url(https://www.starbucks.co.kr/common/img/main/fav_prod_bg_new.jpg) fixed; /* 간지 */ } .photo { position: absolute; /* 화면에 절대적인 속성 (부모에 절대적 X) */ top: 100px; right: 200px; } h1 { font-size: 6em; width: 258px; color: white; font-family: sans-serif.. 2022. 1. 18. [생활코딩] 선택자와 선언 selector : 선택자 declaration : 선언 property : 속성 value : 속성 값 ":" : 속성과 속성 값을 구분 해주는 구분자 ";" : 선언과 선언을 구분 해주는 구분자 HTLM CSS JavaScript 2022. 1. 18. 이전 1 ··· 11 12 13 14 15 16 17 18 다음 728x90
