post-thumbnail

[TIL]반응형 웹 디자인과 viewport

반응형 웹 디자인(Responsive Web Design)은 RWD라고도 하며, 쉽게 말해 브라우저 창의 폭에 따라 레이아웃을 바꿀 수 있도록 하는 기술이다.

2022년 2월 16일
·
1개의 댓글
post-thumbnail

[TIL] Skip Navigation(건너뛰기 링크)

Skip Navigation(건너뛰기 링크)란, ‘링크’를 건너뛰기 위해 제공되는 메뉴를 의미한다.

2022년 1월 12일
·
0개의 댓글
post-thumbnail

[CSS] CSS의 상속(Inheritance)

CSS에서의 상속이란, 하위 엘리먼트에서 어떤 CSS 속성을 명시하지 않은 경우, 기본적으로 상위 엘리먼트에 적용된 스타일이 하위 엘리먼트에도 적용되는 것을 뜻한다.

2021년 12월 8일
·
0개의 댓글

[jQuery] GNB 메뉴 활성화, 스크롤 이동

로드 된 스크롤 위치에서 메뉴 활성화 > body의 경우 scroll 값을 반환하지 못하므로 $(window).scrollTop(); 를 쓴다. GNB 메뉴 클릭 시 해당 섹션으로 이동 > animation queue jQuery에서 animate()함수로 애니메

2021년 9월 23일
·
0개의 댓글
post-thumbnail

[TIL]DOMContentLoaded vs load

브라우저가 웹페이지를 읽을 때 과정은 아래와 같다.HTML파일을 읽는다.이미지,폰트,CSS파일과 같은 리소스를 읽는다.JS를 다운받는다.

2021년 8월 14일
·
0개의 댓글
post-thumbnail

[Vue.js] Vue.js 입문(2) v-for, v-bind

Vue.js의 기본 디렉티브 v-for, v-bind를 이용해 menu를 구현해고 Vue.js의 기본구조 디렉티브를 학습한다.

2021년 6월 8일
·
0개의 댓글
post-thumbnail

[Vue.js] Vue.js 입문 (1)

Vue.js는 컴포넌트(component) 기반의 SPA(Single Page Application)를 구축할 수 있게 해주는 프론트엔드 프레임워크이다.

2021년 6월 6일
·
0개의 댓글
post-thumbnail

[CSS] 요소를 분석하여 정렬하기

아직도 수틀리면 flex를 남발하고 있으신가요?

2021년 5월 29일
·
0개의 댓글
post-thumbnail

[CSS] CSS Coding Convention

언어를 개발한 단체나 기업에서 딱히 공식적인 규칙으로 지정하지 않은 번외의 내용에 대해 개인의 코딩 습관을 통일하여, 작업상의 가독성과 판독능력을 높여 일의 능률을 증진시키기 위한 내부적인 공동의 약속을 코딩 컨벤션이라 한다.

2021년 5월 24일
·
0개의 댓글
post-thumbnail

[jQuery - 실습] Changing element position with Scroll

스크롤을 트리거로 요소의 좌표를 특정 구간동안 제어하는 로직을 통해 window.scrollY, .offset() 등 요소의 좌표를 반환하거나 제어하는 메서드를 심화학습한다.

2021년 5월 21일
·
0개의 댓글
post-thumbnail

[SASS - 문법]

SASS(Syntactically Awesome StyleSheets)는 CSS 전처리기 (pre-processor)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.

2021년 5월 18일
·
0개의 댓글
post-thumbnail

[jQuery - 실습] Making a Scroll Trigger

원페이지 웹사이트를 만들다 보면 스크롤이 내렸을 때 진행되는 애니메이션을 구현해야 할 때가 있다.

2021년 5월 15일
·
1개의 댓글
post-thumbnail

[jQuery - 실습] Making a Accordion Menu

아코디언 메뉴(Accordion Menu)란 컨텐츠를 담는 방식 중 하나로 네비게이션을 클릭하면 컨텐츠를 담은 컨테이너가 열리고 다른 네비게이션을 클릭하면 열려있는 컨테이너는 닫히고 클릭한 컨테이너가 열리는 구조이다.

2021년 5월 14일
·
0개의 댓글
post-thumbnail

[JavaScipt - Plugin] Making a slider with Swiper

자바스크립트로 무한으로 루프하는 슬라이더를 구현해봤으니 플러그인을 이용해 슬라이드를 간단하게 만들 수 있는 방법에 대해 알아보자!

2021년 5월 13일
·
0개의 댓글
post-thumbnail

[JavaScipt - 실습] Making a infinite loop slider

HTML + CSS JavaScript

2021년 5월 12일
·
0개의 댓글
post-thumbnail

[TIL] HTTP와 JSON

HTTP(Hypertext Transfer Protocol)는 HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜이다.

2021년 5월 10일
·
0개의 댓글
post-thumbnail

[Jquery - 실습]counter animation

지정해둔 숫자까지 카운팅되는 애니메이션을 animatie()메서드를 이용해 구현하는 것을 통해 animatie()와 관련 속성을 학습한다.

2021년 5월 9일
·
0개의 댓글
post-thumbnail

[CSS] mediaquery 대응 navbar 만들기

웹페이지를 만들때 첫번째 고비는 GNB 즉 navbar를 만드는 것이고 두번째 고비는 mediaquery를 이용해 모바일 기기에 대응하는 레이아웃으로 만드는 것이다.

2021년 5월 8일
·
0개의 댓글
post-thumbnail

[TIL] jQuery를 이용하여 체크박스 전체선택하기

학습목표 체크박스의 라벨이 여러개일 경우 편의를 위해 전체선택 버튼도 함께 만드는 경우가 많다. 이 경우 jQuery를 이용하면 전체선택 버튼을 쉽게 만들 수 있는데, 이번 포스팅에서는 .click() .on() .prop() 메서드를 이용하여 전체선택 버튼을 구현하

2021년 5월 7일
·
0개의 댓글