FRONT-END/JAVASCRIPT31

• 

  [JS] - 자바스크립트란? 웹페이지에 생동감을 불어 넣기 위해 만들어진 프로그래밍 언어 객체지향, 함수형 프로그래밍 스타일에 적합한 동적 인터프리터 언어이다. 자바스크립트로 작성된 프로그램 ➜ Script. 웹페이지를 로드할때 스크립트가 자동으로 실행 컴파일 없이 문자 형태로 작성/실행 가능 웹브라우저 뿐만 아니라 서버에서도 실행 가능 JS는 인터프리터언어 이다. 즉, 프로그래밍 언어의 소스 코드를 바로 실행 한다. 01. JS 엔진 1. 클라이언트 JS - [브라우저에서 작동하는 방식] 웹브라우저 자체에 JS 엔진이 내장 되어있음. 페이지 로드➜ 브라우저가 버튼/레이블 등 요소를 DOM이라는 데이터 구조로 변환 ➜ JS엔진이 JS코드를 Bytecode(이진 표현법)로 변환( JS - 기계 중개자 역할) ➜ EventListene.. FRONT-END/JAVASCRIPT 2023. 1. 18.

• 

  [CSS + JS] 스켈레톤 로딩(Skeleton Loading) - 컨텐츠 모자이크 CSS와 JS를 사용하여 웹 페이지가 로딩될 때 스켈레톤 로딩화면(콘텐츠 모자이크)을 구현하는 방법에 대해 알아보겠습니다. Skeleton Screen 스켈레톤 스크린은 페이지 콘텐츠가 완전히 렌더링 되기 전에 나타나는 시각적 자리 표시자입니다. 스켈레톤 스크린은 최종 콘텐츠가 제자리에 로드되기 전에 페이지 구조의 윤곽을 나타내는 연한 색상의 배경, 선 및 텍스트로 구성됩니다. 스켈레톤 로딩을 사용하고 있는 사이트 스켈레톤 스크린(스켈레톤 로딩)은 유튜브 사이트에서 쉽게 볼 수 있습니다. DEMO 스켈레톤 로딩 화면을 구현하기 전 데모 페이지를 확인해볼 수 있습니다. https://skeleton-animation-js.netlify.app/ 스켈레톤 로딩 구현 이제 이 스켈레톤 로딩을 구현해보도록 하겠.. FRONT-END/JAVASCRIPT 2022. 9. 16.

• 

  [JS] JQuery 윈도우 Event Methods JQuery Event Methods jQquery 에서 사용되는 윈도우 이벤트 종류에 대해 알아보겠습니다. 이벤트란? 웹 페이지가 응답할 때 발생하는 작업을 이벤트라고 합니다. 이 이벤트는 어떠한 일이 발생하는 정확한 순간을 의미합니다. 예를 들어 아래와 같은 이벤트를 사용할 수 있게 됩니다. 특정 요소에 마우스 Focus 요소 클릭 로딩이 끝난 후 작동 등... 일반적인 이벤트 종류 일반적으로 많이 사용되는 이벤트의 종류에 대해 알아보겠습니다. 문서 로딩 이벤트 ready() : 문서 로딩 - html의 문서가 로딩되었음을 알린다. (이미지, 동영상 등은 영향을 끼치지 않음) $(document).ready(function() { }); $(function() { }); 위 코드를 사용하게 되면 bo.. FRONT-END/JAVASCRIPT 2022. 9. 15.

• 

  [JS] Input이 활성화 될 때, 커서 자동 Focus 하는 방법 Auto Focus Display:none인 태그가 포함된 요소가 JS를통해 나타나게 해줬을때 커서가 자동으로 input에 foucs 되게 하는 방법에 대해 알아 보겠습니다. Input 생성 우선 텍스트를 입력할 수 있는 태그를 생성해줍니다. 버튼 클릭 시 input 보이기 위에 만들어놓은 태그를 display:none으로 없애준 뒤에, 특정 버튼을 누르면 다시 이 보이도록 자바스크립트를 통해 코드를 작성합니다. $(document).ready(function () { var target = $('.container'); $(document).on('click', '.showInput', function (e) { $('.showInput').hide(); target.fadeIn(100).addClas.. FRONT-END/JAVASCRIPT 2022. 9. 15.

• 

  [JS] 닫기버튼을 만들어 부모 태그 없애기 (display: none) 복잡한 자바스크립트 없이 HTML의 button을 사용하여 클릭 한 번 만으로 부모클래스를 사라지게 하는 방법에 대해 알아보도록 하겠습니다. Close button 버튼을 만드는 방법은 다양한데 이번에는 태그를 사용하여 구현해볼까 합니다. HTML 속성 추가 HTML에 임의의 Container를 생성하고 그 안에 button 태그를 입혀보겠습니다. × Javascript button태그 안의 onclick에 자바스크립트를 직접 넣어준 형태인데, 살펴보자면 아래와 같습니다. this : "자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수" parentElement : "노드의 부모 요소를 반환하는데, 부모가 없거나 부모가 DOM 요소가 아니라면 null을 반환한다" style : ".. FRONT-END/JAVASCRIPT 2022. 9. 13.

• 

  [JS] 오프스크린 이미지를 지연(Lazyload) 로드 - lazysizes Lazysizes JS를 사용하여 웹 사이트 이미지에 오프스크린 이미지 지연(lazyload)를 적용시킬 수 있습니다. Lazy loading lazy loading은 페이지를 읽어 들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술입니다. 대신에 이 중요하지 않은 리소스들은 필요할 때 로드가 되어야 합니다. 이미지와 관련된 경우에는 중요하지 않은 리소스들은 "off-screen"와 함께 동기화가 됩니다. 누군가가 웹페이지(이미지, 비디오 등)에 리소스를 추가할 때, 리소스는 small placeholder를 참조합니다. 사용자가 웹페이지를 검색할 때 실제 리소스는 브라우저에 의해 캐시 되고 리소스가 사용자 화면에 표시될 때 placeholder를 대체합니다. 예를 들어, 사용자가 웹페이지를 .. FRONT-END/JAVASCRIPT 2022. 9. 12.

• 

  [JS] 로딩이 될때 요소의 텍스트를 변경하는 방법 HTML 안에 있는 특정 요소의 텍스트를 변경하는 것이 아닌, 스크립트로 로드가 된 후에 요소가 등장하고 그 안에 텍스트를 JS를 통해 변경해야할 때는 단순히 .innerHTML 속성을 통해 변경이 불가능 합니다. 오늘은 로딩이 될때 요소의 텍스트를 변경하는 방법에 대해 알아보도록 하겠습니다. 로딩이 될 때 요소의 텍스트를 변경하는 방법 간단하게 말해서 값을 설정하려는 시점에 요소가 존재하지 않다면 특정 요소, 예를 들어 가 DOM(Document Object Model)에 추가된 후에 변경 메서드를 호출해야 합니다. 이 스크립트 누구인가? See the Pen innerHTML onload by 서근 (@seogun95) on CodePen. 만약, 웹사이트가 로드 되고 N초 뒤에 .innerHTML을.. FRONT-END/JAVASCRIPT 2022. 9. 11.

• 

  [JS] 애드센스 디스플레이 광고 반응형 광고 2개 삽입하는 방법 애드센스 광고 2개 삽입하는 방법 애드센스 디스플레이 반응형 광고를 2개 삽입하는 스크립트에 대해 알아보고 적용해보도록 하겠습니다. 디스플레이 광고 생성 우선, 당연히 애드센스 승인된 계정이 필요합니다. 애드센스 홈페이지 ➜ 광고 ➜ 광고 단위 기준 ➜ 디스플레이 광고 ➜ 반응형 광고 생성 이것을 두 번 반복해서 자신의 data-ad-slot와 data-ad-client 아이디를 복사 또는 기억해줍니다. data-ad-client는 애드센스 고유 넘버이기 때문에 한 번만 사용하면 되지만, data-ad-slot은 광고를 생성할 때마다 새로운 번호가 생성되기 때문에 두 개를 복사해 두셔야 합니다. HTML에 스크립트 추가 이제 HTML 내부에 원하는 부분을 정하고 아래 스크립트를 추가해줘야 합니다. 아래 .. FRONT-END/JAVASCRIPT 2022. 9. 11.

• 

  [JS] 페이지 로딩시 스크롤 막는 방법 페이지 로딩 시 스크롤 막는 방법 페이지가 로딩될때 스크롤을 막아야 하는 경우가 있는데, 오늘은 로딩시 스크롤을 막는 방법에 대해 알아보겠습니다. body overflow hidden 우선 Html의 body 부분의 스크롤을 막아주는 스타일을 입혀야 합니다. CSS에 다음과 같이 코드를 추가해줍니다. body.no-scroll { overflow: hidden !important } 코드 네임의 .no-scroll은 사용자가 원하는 네임으로 변경해도 됩니다. body class 추가 body에 .no-scroll이라는 class를 추가해주겠습니다. Javascript 추가 body에 클래스를 추가해줬다면 이제 모든 페이지에서 스크롤이 작동되지 않습니다. 왜냐하면 CSS에 body의 overflow를 hi.. FRONT-END/JAVASCRIPT 2022. 9. 10.

• 

  [JS] 함수 Function JAVASCRIPT 함수 개념에 대해 알아보겠습니다. 함수 Function function add(a, b) { return a + b; } //함수 정의 add(1, 2); //함수 호출 function - 함수 정의 키워드 add - 함수 이름 (a, b) - parameter 매개 변수, 인자 return - 결괏값 반환 add(1, 2) - 함수 호출 중요 Point 함수 단위로 작은 단위의 일들을 묶어야 한다. 수행하는 일을 잘 나타낼 수 있는 이름을지어야 한다. 매개변수 이름도 의미 있게지어야 한다. 함수도 객체(object)이기 때문에 메모리 상에 Hip에 주소가 할당되게 된다. function add(a, b) { return a + b; } const sum = add; 함수의 이름은 함.. FRONT-END/JAVASCRIPT 2022. 9. 8.

• 

  [JS] 내부링크를 현재 창으로 열도록 해주는 방법 웹 사이트에 설정되어있는 링크들중에 만약 로컬 페이지의 링크라면, target="_balnk"로 설정되어 새창으로 열리는 링크를 강제로 현재창으로 바꿔주는 스크립트에 대해 알아보겠습니다. 내부 링크와 외부 링크 SEO 최적화 중에 내부 링크와 외부 링크를 사용하는 것은 조금 구별된다고 합니다. 내부 링크: 내 사이트 내의 다른 글로 연결되는 링크 외부 링크: 타 사이트로 연결되는 링크 외부 사이트로 연결되는 링크를 걸면 내 사이트의 평판 일부를 해당 사이트로 넘겨주게 되므로, SEO 모범 관행 중 하나는 권위 있는 사이트가 아니거나 내가 제어할 수 없는 사이트로 링크를 걸 때에는 target="_blank" rel="nofollow" 속성을 추가합니다. 외부 링크를 현재 창으로 열리도록 설정하면 방문자가.. FRONT-END/JAVASCRIPT 2022. 9. 7.

• 

  (JS) 이미지의 src를 변경하는 방법 자바스크립트로 src 주소 변경 HTML에서 Img 태그에 src로 지정된 이미지 주소를 자바스크립트를 사용하여 바꾸는 방법에 대해 알아보도록 하겠습니다. Html html의 img 태그 src 주소는 example.svg 입니다. 이제 자바스크립트로 다른 주소를 할당해주도록 하겠습니다. Javascript $img = document.querySelector(".img-container > img"); $img.src = `./imgaes/another.svg`; JQuery JQuery를 사용해 위에 코드를 한 줄로 작성할 수 있습니다. $(".img-container > img").attr({ src: "./images/blog-logo.svg" }); 클래스를 추가하려면 아래와 같이 코드를 작성해.. FRONT-END/JAVASCRIPT 2022. 8. 23.

• 

  [JQuery] 원하는 위치에 요소 삽입 - insertBefore(), insertAfter(), prependTo(), appendTo() JQuery 요소 이동 원하는 위치에 어떠한 태그를 삽입해야 하는경우가 종종 있는데 오늘은 JQuery를 사용하여 위치 이동을 시켜보도록 하겠습니다. 이동시킬 요소 위 코드에서 onerror는 src의 이미지가 오류가 났을 때, 대체해주는 태그입니다. 삽입될 요소 이동시킬 요소를 만들었으니, 이제 이동이 이뤄질 위치 태그를 만들어 줍니다. 자바스크립트 div나 특정한 요소 안에 id를 만들고 자바스크립트를 이용해 이 div안에 방금 만든 img 태그를 넣어주기만 하면 됩니다. $(".target").insertBefore("source"); 그럼 아래와 같이 사용하면 되겠네요! $(".img").insertBefore("#comment-blog-img"); 여기서 .insertBefore은 요소의 삽입 .. FRONT-END/JAVASCRIPT 2022. 8. 23.

• 

  (JS) 카운트 후, 특정 요소 나타나는 스크립트 Button을 누르면 카운터가 진행 된 후, 숨겨놓은 요소가 나타나게 해주는 방법에 대해 알아보도록 하겠습니다. 카운트 후, 특정 요소 나타나는 스크립트 html container요소는 display: none으로 처리 하고, click-link를 누르면 li-title의 text가 지정한 문구로 바뀌며 카운트 다운 후, container 요소가 나타나게 됩니다. 버튼을 클릭하면 링크가 나타납니다. 버튼 보여질 div 요소 JS 이제 javascript로 해당 이벤트를 구현하면 됩니다. button에 onclick 이벤트 대신에 자바스크립트 안에 직접 넣어주고 id만 사용하여 구현될 수 있도록 해줬습니다. 그리고 countDownDate 변수 10초 후 container의 display가 flex로 바뀌.. FRONT-END/JAVASCRIPT 2022. 8. 19.

• 

  [JS] Lottie Animation 사용 방법 Lottie Animation을 Json 형태로 가져와 벡터 이미지를 Web에 뿌려줄 수 있습니다. 오늘은 Lottie Animation 사용하는 방법에 대해 알아 보도록 하겠습니다. Lottie Animation LottieA Animation은 에어비앤비에서 개발한 라이브러리입니다. After Effects로 추출한 애니메이션 데이터(json)를 Bodymovin(오픈소스)를 이용하여 html, webflow, android, iOS 환경에서 이용할 수 있습니다. Lottie Animation은 벡터 기반의 애니메이션인데 즉, SVG로 저장됩니다. TIP 벡터 이미지란? 벡터 이미지는 png, jpg등과 다르게 용량이 적고 해상도 저하가 일어나지 않는다는 장점이 있습니다. Lottie 사용 방법 lo.. FRONT-END/JAVASCRIPT 2022. 8. 16.