object-oriented programming의 약자이다.객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수

dl - Definition List 의 약자로 용어 정의할 때 사용합니다. 내부에 2개의 태그를 포함해서 사용하게 되는데 dt 와 dd 가 있습니다. dt : Definition Title 약자로 제목을 나타내고 dd : Definition Data 로 용어의 설명

영역마다 무슨 태그를 써야하는지 생각하는 게 귀찮고 그냥 다 div 태그를 써버리면 되는데 뭐하러 시맨틱 태그를 사용하나? 라고 생각이 들 수도 있겠지만, 시맨틱 태그를 사용하는 것과 아닌 것에 차이점이 있다.검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할

값을 저장 및 사용하기 위해 메모리 공간(주소)를 생성하는 것입니다. 변수 선언은 3가지 방법으로 가능합니다.var x = 42와 같이 \[var] 키워드로 변수를 선언할 수 있습니다. 이 구문은 실행 맥락에 따라 지역 및 전역 변수를 선언하는데 모두 사용될 수 있습니

미디어 쿼리를 사용하여 화면의 크기를 사용하고 유연한 이미지와 그리드로 화면의 크기의 변화에 그에 맞는 크기가 된다.서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여 그 디바이스에 최적화된 마크업을 호출한다.장점: 하나의 템플릿만을 사용해 다양한 사용자와 기기에 대

📚 Summary 사이트명 : MMCA 국립현대미술관 (반응형, Renewal) 작업 기간 : 23.03.20 ~ 23.03.23 (4일 소요) 사용언어: HTML, CSS, Jquery, Gsap, JS 유형 : 반응형, 리뉴얼 특징 : gsap를 활용해 다양한

익숙한 변수 설정 const 태그를 입력하다가 문득 차이점이 궁금해져 포스팅을 해 보았습니다. ES2015(ES6)에서 반짝이는 새로운 기능들이 많이 등장했다. 2020년이 된 지금, 많은 퍼블리셔 뿐만 아니라 JavaScript 개발자들이 그 기능들을 사용하기 시작했

사이트명 : MMCA 국립현대미술관 (반응형, Renewal)작업 기간 : 23.03.13 ~ 23.03.16 (4일 소요)사용언어: HTML, CSS, Jquery, Gsap, JS유형 : 반응형, 리뉴얼특징 : gsap를 활용해 다양한 스크롤 이벤트를 구현한 동적인

JavaScript, API, Markup를 근간으로 하는 JAM stack이 모던 웹 개발 트렌드입니다. 이에 따라, 예전처럼 서버 단에서 대신 API를 호출해주기 보다는 클라이언트 단에서 직접 API를 호출하는 경우가 많아지고 있습니다. 원격 API를 간편하게 호

📚 Summary 사이트명 : 미미즈 작업 기간 : 23.03.06 ~ 23.03.09 (4일 소요) 라이브러리 : swiper, json 유형 : Mobile 적응형, renewal 특징 : 탭 메뉴, swiper슬라이드와 json데이터 통신을 접목시킨 페이지

웹 접근성을 준수하는 마크업을 만들어보면서 제가 그동안 웹 접근성에 대해 오해를 하고 있었다는 생각을 하게 되었고, 예상하지 못했지만 웹 접근성을 준수하면서 개발하면 따라오는 장점들에 대해 알게 되었습니다.이번 포스팅에서는 웹 접근성의 정확한 정의와 함께, 웹 접근성을

📚 Summary 사이트명 : iPad Apple 작업 기간 : 3일 소요 라이브러리 : gsap, jquery 유형 : PC 적응형, 리뉴얼 특징 : gsap를 활용해 다양한 스크롤 이벤트를 구현한 동적인 페이지입니다. ✔️ Main Point 스크롤에 따른 텍

jQuery의 each() 메서드는 배열, Map, 그리고 객체를 매개변수로 받아, 마치 반복문처럼 그 요소들을 검사하고 반복할수 있도록 하는 함수입니다.each() 메서드는 크게 다음의 세가지 방법으로 사용할 수 있습니다.이때 callback은 콜백 함수를 의미합니다

자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어다.다른 객체지향 프로그래밍 언어는 클래스를 기반으로 동작하지만 자바스크립트는 프로토타입을 기반으로 동작한다. 프로토타입은 객체지향 프로그래밍의 중요한 개념 중 하나인 상속과 밀접한 관련이 있다.다음과 같이 Anim

웹 사이트들의 메뉴를 보면 마우스를 올리거나 클릭하면 메뉴가 촤라락 하고 내려오는 메뉴형태를 많이 볼 수 있습니다. 보통 jQuery의 slideDown, slideUp을 많이 이용하는 것 같은데 그 외에도 여러가지 방법을 이용해 구현할 수 있을 것 같아 정리해 보았습

"Ctrl + C" 단축키와 같은 기능 또는 블로그에 새로 추가한 "코드 복사" 기능을 웹 상에서 구현하기 위해서는 특정 텍스트를 클립보드에 추가시켜줘야 합니다.코드클립보드와 상호작용하는데 가장 많이 사용되는 document.execCommand() 방법을 사용하여 쉽

ex & chex와 ch 단위는 현태 폰트와 폰트 사이즈에 의존한다는 점에서 em 그리고 rem과 비슷합니다. em과 rem과 다른 점은 이 두 단위가 font-family에 의존한다면 다른 두 단위는 폰트의 특정 수치에 기반한다는 점입니다. ch 단위, 또는 글꼴 단

video 태그의 loop 속성은 비디오의 재생이 끝나면 자동으로 또다시 재생됨을 명시합니다.loop 속성은 불리언(boolean) 속성입니다.불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가

css의 position에는 다양한 종류의 다양한 속성이 있습니다. 이 글에서는 static 속성과 fixed 속성의 특징을 동시에 갖고 있는 position sticky속성의 특성에 대해서 알아보겠습니다.또 sticky 속성이 동작하지 않을 때 확인해야할 것들에 대해

flex 코딩에서 흔히 볼 수 있는 1 1auto 속성앞에서flex-grow, flex-shrink, flex-basis 에 대해서 설명했었는데요이 3가지를 한꺼번에 표현한 것입니다.flex-grow는 0보다 큰 값을 세팅하면 Flexible 박스로 변하면서 남은 여백