- 전체보기(47)
- JavaScript(11)
- CSS(9)
- jquery(8)
- html(7)
- class(3)
- offset(3)
- ON(2)
- animation(2)
- animate()(2)
- float(2)
- click(2)
- removeClass(2)
- each()(2)
- scrollTop()(2)
- vue(2)
- DOMTree(1)
- recursive function(1)
- destructuring assignment(1)
- variable(1)
- semantic tag(1)
- align(1)
- BEM(1)
- text ellipsis(1)
- ellipsis(1)
- parsing(1)
- querySelector(1)
- skip-navi(1)
- http(1)
- accordion menu(1)
- Inhertance(1)
- 문서객체모델(1)
- addClass(1)
- slider(1)
- variables(1)
- overwriting(1)
- innerHeight(1)
- beforeunload(1)
- 건너 뛰기 링크(1)
- input(1)
- wrapAll()(1)
- stop()(1)
- unload(1)
- Inherit(1)
- Modifier(1)
- parese()(1)
- revert(1)
- menutree(1)
- scrollY(1)
- Spread(1)
- async(1)
- for(1)
- Nightmode(1)
- Viewport(1)
- prev()(1)
- Default parameters(1)
- keyframes(1)
- wrap(1)
- template literals(1)
- querySelectorAll()(1)
- json(1)
- Scroll Trigger(1)
- all: unset;(1)
- loop(1)
- v-for(1)
- data type(1)
- arrow function(1)
- Javascipt(1)
- text-size-adjust(1)
- DOM(1)
- stringify()(1)
- animation queue(1)
- parent(1)
- MediaQuery(1)
- type(1)
- unwrap()(1)
- block(1)
- Ternary operator(1)
- load(1)
- unset(1)
- extends(1)
- super(1)
- wrapInner()(1)
- Defer(1)
- Skip Navigation(1)
- 객체지향(1)
- v-bind(1)
- 상속(1)
- coding convention(1)
- resize(1)
- dynamic event binding(1)
- ES6(1)
- Date(1)
- RWD(1)
- swiper(1)
- element(1)
- hasClass(1)
- DOMContentLoaded(1)
- 웹접근성(1)
- Prop(1)
- shuffle(1)
- initial(1)
[TIL]반응형 웹 디자인과 viewport
반응형 웹 디자인(Responsive Web Design)은 RWD라고도 하며, 쉽게 말해 브라우저 창의 폭에 따라 레이아웃을 바꿀 수 있도록 하는 기술이다.
[TIL] Skip Navigation(건너뛰기 링크)
Skip Navigation(건너뛰기 링크)란, ‘링크’를 건너뛰기 위해 제공되는 메뉴를 의미한다.
[CSS] CSS의 상속(Inheritance)
CSS에서의 상속이란, 하위 엘리먼트에서 어떤 CSS 속성을 명시하지 않은 경우, 기본적으로 상위 엘리먼트에 적용된 스타일이 하위 엘리먼트에도 적용되는 것을 뜻한다.
[jQuery] GNB 메뉴 활성화, 스크롤 이동
로드 된 스크롤 위치에서 메뉴 활성화 > body의 경우 scroll 값을 반환하지 못하므로 $(window).scrollTop(); 를 쓴다. GNB 메뉴 클릭 시 해당 섹션으로 이동 > animation queue jQuery에서 animate()함수로 애니메
[TIL]DOMContentLoaded vs load
브라우저가 웹페이지를 읽을 때 과정은 아래와 같다.HTML파일을 읽는다.이미지,폰트,CSS파일과 같은 리소스를 읽는다.JS를 다운받는다.
[Vue.js] Vue.js 입문(2) v-for, v-bind
Vue.js의 기본 디렉티브 v-for, v-bind를 이용해 menu를 구현해고 Vue.js의 기본구조 디렉티브를 학습한다.
[Vue.js] Vue.js 입문 (1)
Vue.js는 컴포넌트(component) 기반의 SPA(Single Page Application)를 구축할 수 있게 해주는 프론트엔드 프레임워크이다.
[CSS] CSS Coding Convention
언어를 개발한 단체나 기업에서 딱히 공식적인 규칙으로 지정하지 않은 번외의 내용에 대해 개인의 코딩 습관을 통일하여, 작업상의 가독성과 판독능력을 높여 일의 능률을 증진시키기 위한 내부적인 공동의 약속을 코딩 컨벤션이라 한다.
[jQuery - 실습] Changing element position with Scroll
스크롤을 트리거로 요소의 좌표를 특정 구간동안 제어하는 로직을 통해 window.scrollY, .offset() 등 요소의 좌표를 반환하거나 제어하는 메서드를 심화학습한다.
[SASS - 문법]
SASS(Syntactically Awesome StyleSheets)는 CSS 전처리기 (pre-processor)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.
[jQuery - 실습] Making a Scroll Trigger
원페이지 웹사이트를 만들다 보면 스크롤이 내렸을 때 진행되는 애니메이션을 구현해야 할 때가 있다.
[jQuery - 실습] Making a Accordion Menu
아코디언 메뉴(Accordion Menu)란 컨텐츠를 담는 방식 중 하나로 네비게이션을 클릭하면 컨텐츠를 담은 컨테이너가 열리고 다른 네비게이션을 클릭하면 열려있는 컨테이너는 닫히고 클릭한 컨테이너가 열리는 구조이다.
[JavaScipt - Plugin] Making a slider with Swiper
자바스크립트로 무한으로 루프하는 슬라이더를 구현해봤으니 플러그인을 이용해 슬라이드를 간단하게 만들 수 있는 방법에 대해 알아보자!
[TIL] HTTP와 JSON
HTTP(Hypertext Transfer Protocol)는 HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜이다.
[Jquery - 실습]counter animation
지정해둔 숫자까지 카운팅되는 애니메이션을 animatie()메서드를 이용해 구현하는 것을 통해 animatie()와 관련 속성을 학습한다.
[CSS] mediaquery 대응 navbar 만들기
웹페이지를 만들때 첫번째 고비는 GNB 즉 navbar를 만드는 것이고 두번째 고비는 mediaquery를 이용해 모바일 기기에 대응하는 레이아웃으로 만드는 것이다.
[TIL] jQuery를 이용하여 체크박스 전체선택하기
학습목표 체크박스의 라벨이 여러개일 경우 편의를 위해 전체선택 버튼도 함께 만드는 경우가 많다. 이 경우 jQuery를 이용하면 전체선택 버튼을 쉽게 만들 수 있는데, 이번 포스팅에서는 .click() .on() .prop() 메서드를 이용하여 전체선택 버튼을 구현하