![[Web] 정규표현식 테스트 사이트 모음 총정리](http://i1.daumcdn.net/thumb/C120x120/?fname=https://blog.kakaocdn.net/dn/cE20vH/btrUGHzpOXw/G6oSBfk1y0TAfjnCIAaJM0/img.png)
스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기
고정된 헤더(네비게이션) 사용 불편함 인지 많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 포함하고 있는 경우 오히려 사이트의 사용자경험을 떨어뜨리는 요인이 되기도 한다. 이는 모바일과 같은 뷰포트가 작은 기기들에서는 더욱 그러하다. 기존의 단순히 고정된 형태의 헤더 디자인을 제공하는 것 보다는 사용자의 스크롤 방향에 따라 헤더부분을 보여주거나 감춤으로써, 사용자의 의도에 맞는 디자인을 제공하는 것이 목적이다. 즉, 사용자의 스크롤이 아래로 향한다면 콘텐츠를 탐색하길 원하는 것이라 ..
- 개발자 이야기/JavaScript - Html - Css
- · 2022. 12. 27.
DataTable - JS 데이터 테이블 표현
Data를 테이블 표현하는 것은 모든 데이터 서비스의 기본이다. 매번 이 부분을 구현하고 검색하고, 페이지네이션에 Export 기능까지 따로따로 하는데 이 모든것이 이미 구현이 되어 있다. Datatable.net 꼭 이 라이브러리를 활용하자. 여기서 정리한 모든 내용은 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) DataTable 일단은 한번 보면 안다. 아래 예제 사이트로 가서 봐라 데이터를 표현하는 테이블은 이걸 써야 한다. https://datatables.net/examples/ajax/objects.html 간단하게 Vue.js 를 이용하여 구현한 코드를 보자. Django 에서 ..
- 개발자 이야기/JavaScript - Html - Css
- · 2022. 12. 27.
자바스크립트에 매우 유용한 12가지
1) 연산자 를 사용하여 부울로 변환 때때로 우리는 어떤 변수가 존재하는지 또는 유효한 값을 가지고 있는지 확인하여 그것들을 참 값으로 간주할 필요가 있습니다. 이러한 종류의 유효성 검사를 수행하기 위해 !!(이중 부정 연산자) simple 을 사용할 수 있습니다 !!variable. 이는 모든 종류의 데이터를 부울로 자동 변환하고 이 변수는 다음 값 중 일부가 있는 경우에만 false를 반환합니다. 0, null, 또는 "", 그렇지 않으면 그것은 돌아올 것이다 . 실제로 이해하려면 다음과 같은 간단한 예를 살펴보십시오.undefinedNaNtrue function Account(cash) { this.cash = cash; this.hasMoney = !!cash; } var account = new..
- 개발자 이야기/JavaScript - Html - Css
- · 2022. 12. 27.
