조금씩 천천히

최근 작업을 하다가 position sticky라는 새로운 속성을 알게되었다position은 4가지만 있는줄 알았는데 아직 모르는 속성이 있었다니!그래서 정리해보는 position 속성 우선 position에는 총 5가지가 있다. static, relative, absolute, sticky 그리고 static을 제외한 4가지 속성은 각각 top, left, bottom, right를 사용하여 위치를 지정할 수 있다 #### position : static static 요소는 position속성을 지정하지 않은 기본적인 속성이다 1234567891011121314151617181920 div{ padding:10px; width: 500px; text-align: center; box-sizing: bo..

## 오늘한일벨로퍼트님의 리액트 초급 인강 완강~!!!기존에 인프런에서 듣던 java, jsp강의 2018년 버전이 나와 수강신청(언제 들을지는 모르겠다) ## 내일할일인사이드 자바스크립트 챕터03 읽기시작.

### 오늘한일인프런 벨로퍼트님 리액트 강의 - 배열다루기 복습인사이드 자바스크립트 읽음 ### 내일할일벨로퍼트님 리액트 강의 완강인사이드 자바스크립트 계속 읽기

### 오늘한일인사이드 자바스크립트 읽기 시작 ### 각오반드시 끝까지 읽으리

최근에 calc() 이라는 css 함수의 존재를 알게되었다. calc()은 이름에서도 알 수 있듯이 계산을 해주는 css함수로 자바스크립트로 css계산을 하던 것을 상당부분 대체할 수 있다 + - * / 의 사칙연산을 사용 하여 width, font-size, margin 등 px, %, em, rem, deg 등의 단위를 쓰는 영역에 모두 사용이 가능하다 유의사항은 + - 사용시에 반드시 연산자 양 옆에 공백을 주어야 한다. -사용시 공백이 없을 경우 음수값으로 처리되기 때문에 + -의 경우는 공백이 반드시 필요하다. * / 의 경우는 공백이 필수 사항은 아니지만 표현의 일관성을 위해 공백을 사용해주자 잘못된 사용 1width: calc(100%-80px);cs + - 연산자를 붙여쓰면 이미지처럼 in..

일하다보면 종종 사용하는 스크롤고정!! 매번 사용하지만 할 때마다 까먹는 것 같아서 정리한다 처음엔 스크롤 안에 함수가 아닌 if문을 직접 넣어서 사용했는데 새로고침을 할 경우 적용되지 않아서 함수로 만들어 스크롤상황과 최초접속(새로고침) 두가지 모두 적용되도록 만들었다 그리고 앵커태크 클릭 시 부드럽게 해당 영역으로 애니메이션 되는 것까지 함께 정리!.hash가 아니라 클릭한 a태그의 href값을 읽어서 하는 방법도 있다 12345678 $(document).on('click','#gnb a',function(event){ var targetHash = $(this).attr('href'); var headerHeight = $('header').outerHeight(); event.preventDef..