당신은 주제를 찾고 있습니까 “로딩 페이지 – 로딩중 효과 만들기 + 제이쿼리 스크립트 fadeOut 효과 /*코딩강좌*/ [HTML+CSS{코남}]“? 다음 카테고리의 웹사이트 https://you.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://you.maxfit.vn/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 코남 이(가) 작성한 기사에는 조회수 10,212회 및 좋아요 254개 개의 좋아요가 있습니다.
로딩 페이지 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 로딩중 효과 만들기 + 제이쿼리 스크립트 fadeOut 효과 /*코딩강좌*/ [HTML+CSS{코남}] – 로딩 페이지 주제에 대한 세부정보를 참조하세요
#로딩 #웹디자인 #코딩강좌 #코남 #loading
안녕하세요 HTML과 CSS로 비쥬얼 아트 코딩을 지향하며 코딩하는 남자 | 코남입니다.\r
\r
이번 컨텐츠는 웹페이지를 이용할 때 페이지 용량이 커서 불러오는데 시간이 걸릴 때 안정적인 사이트 이용을 위해 사용할 수 있는 로딩효과입니다.
[W3스쿨즈]에서 제공되는 기본 예제를 활용해서 로딩아이콘을 html요소로 만들어서 제이쿼리 스크립트를 적용해 페이지의 리소스를 다 읽으면, 로딩영역이 천천히 사라지는 효과를 만들었습니다.
링크 : https://www.w3schools.com/howto/howto_css_loader.asp
요즘 코로나사태로 인해 마스크구매할 때 많이 보이는 효과라 생각되어 준비해 보았습니다. 이게 사용하게되면 부드러운 전환효과를 얻을 수 있긴한데 사이트 이용의 루즈함을 갖고 올 수 있기때문에 적절한 컨텐츠에 맞게 설정하면 될 것 같습니다.
직접 코드를 확인해볼 수 있는 예제파일은 2가지로 업로드 해 두겠습니다. 하나는 로딩아이콘만 나타나는 효과이고, 다른 하나는 블록형태로 전체를 가리우는 로딩형태로 준비하겠습니다 ~
앞으로 더 좋은 컨텐츠를 준비해 보도록 하겠습니다.
관심가져주셔서 감사합니다 ; )
–
background music : https://www.bensound.com
-\r
본 강좌가 도움이 되셨다면\r
좋아요와 구독하기 부탁드립니다.\r
문의사항은 이메일로 보내주셔도 됩니다.\r
-\r
B/블로그 : https://blog.naver.com/co-nam/221999074211
E/이메일 : [email protected]
로딩 페이지 주제에 대한 자세한 내용은 여기를 참조하세요.
[Javascript] 로딩중 화면 만들기 – 네이버블로그 – NAVER
(HTML/Javascript) 화면 로드시, 다른 페이지로 이동 시 로딩 화면 띄우기, 로딩 페이지 만들기. DB를 많이 활용하거나, iframe/AJAX등을 활용하게 될 …
Source: blog.naver.com
Date Published: 12/3/2021
View: 5883
[웹프로그래밍] HTML 페이지 데이터 로딩 화면 구현하기
들어가며 웹페이지를 구현하다 보면 데이터를 비동기 식으로 호출할때가 있습니다. 데이터를 요청하는 호출 이후에 페이지는 로딩은 됬는데, 데이터가 …
Source: xzio.tistory.com
Date Published: 8/24/2021
View: 5050
[웹프로그래밍] HTML 페이지 데이터 로딩 화면 구현하기 – 불로
로딩 페이지 (loading-page.html). 아래는 로딩 페이지를 구현한 html파일입니다. div 태그로 loader, container를 생성을 합니다. loader는 위 그림과 …
Source: ourcstory.tistory.com
Date Published: 9/9/2021
View: 8280
[티스토리] 로딩화면 만들기 / 글 로딩 시 로딩창 띄우기
이번 포스팅에서는 글이 실행될 때 글과 이미지가 전부 실행이 되는 동안 로딩화면을 만드는 방법에 대해서 알아보겠습니다!
Source: crazykim2.tistory.com
Date Published: 5/1/2021
View: 413
[JQuery] 로딩창 설정 방법 (+LoadingOverlay사용법)(영상 有)
오늘은 프로젝트에서 로딩시에 화면을 나타내는 로딩 페이지를 이야기해보겠습니다. 스크립트 함수나 AJAX 사용 시, 로딩시간이 있는 경우, …
Source: chobopark.tistory.com
Date Published: 11/10/2021
View: 8662
[Tistory] 티스토리 로딩 화면 구현하기 – 까망 하르방
페이지 로딩 시간 확보가 필요하다고 생각한다. HTML 적용해제 하지 않았으면 본 포스팅에서도. 새로고침시 로딩 화면을 볼 수 있을 것이다. 로딩 이미지 …
Source: zoosso.tistory.com
Date Published: 8/20/2022
View: 3291
웹 페이지 로딩 과정 이해하기 – IMQA 기술 블로그
실제 웹 페이지 로딩 시간을 측정하는 에이전트를 개발해야 하는 IMQA 팀에서 웹페이지 성능 최적화에 대한 노하우를 전달해 드리겠습니다. 모바일 앱 …
Source: blog.imqa.io
Date Published: 4/7/2021
View: 245
로딩 페이지 | chino-snc
AR-PLATE · Hi-Mn.
Source: www.chino-steel.com
Date Published: 8/26/2021
View: 3381
[css/js] 로딩화면 만들기
로딩화면을 만드는 방법 간단하게.. #1 먼저 css 로 로딩중에 보여줄 화면을 만듭니다. 보통 화면을 덮어서, 만듭니다.
Source: www.webpaper.kr
Date Published: 2/24/2021
View: 3456
주제와 관련된 이미지 로딩 페이지
주제와 관련된 더 많은 사진을 참조하십시오 로딩중 효과 만들기 + 제이쿼리 스크립트 fadeOut 효과 /*코딩강좌*/ [HTML+CSS{코남}]. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
![로딩중 효과 만들기 + 제이쿼리 스크립트 fadeOut 효과 /*코딩강좌*/ [HTML+CSS{코남}]](https://i.ytimg.com/vi/_ScD4ipBXC0/maxresdefault.jpg)
주제에 대한 기사 평가 로딩 페이지
- Author: 코남
- Views: 조회수 10,212회
- Likes: 좋아요 254개
- Date Published: 2020. 3. 15.
- Video Url link: https://www.youtube.com/watch?v=_ScD4ipBXC0
[Javascript] 로딩중 화면 만들기
악성코드가 포함되어 있는 파일입니다.
{FILENAME}
백신 프로그램으로 치료하신 후 다시 첨부하시거나, 치료가 어려우시면
파일을 삭제하시기 바랍니다.
고객님의 PC가 악성코드에 감염될 경우 시스템성능 저하,
개인정보 유출등의 피해를 입을 수 있으니 주의하시기 바랍니다.
[웹프로그래밍] HTML 페이지 데이터 로딩 화면 구현하기
Google Translator
Adsense
Calendar 2022.8 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
RSS Feed https://xzio.tistory.com/rss
Links Click to move… Lifelong Study Game Life You Only Live Once 모바일 코딩
Counter Today
1,518 Yesterday
1,927 Total
564,164
08-10 18:10
[웹프로그래밍] HTML 페이지 데이터 로딩 화면 구현하기
반응형
들어가며
웹페이지를 구현하다 보면 데이터를 비동기 식으로 호출할때가 있습니다. 데이터를 요청하는 호출 이후에 페이지는 로딩은 됬는데, 데이터가 채워지지 않는 경우가 있습니다. 그렇기 때문에 사용자들에게 데이터를 호출하고 있는 상태입니다. 라는 페이지 로더를 구현을 해야합니다. 아래와 같은 그림 회전을하고, 데이터가 전부 로딩이 완료가 되면 로더는 화면에서 사라지고, 내가 사용자애들에게 보여주고자 하는 페이지를 보여주면 됩니다. 아래 예제는 html파일, css파일, 그리고 javascript파일을 작성했습니다. 참고해서 사용하고 싶은 곳에 로더를 구현해보세요.
로딩 페이지 (loading-page.html)
아래는 로딩 페이지를 구현한 html파일입니다. div 태그로 loader, container를 생성을 합니다. loader는 위 그림과 같이 회전하는 그림을 보여주는 뷰이고, container에는 내가 추가하고자 하는 즉, 호출을 통해 불러온 데이터를 표시하는 뷰입니다. 현재는 style=display:none의 값으로 화면에 표시되지 않습니다.
css 파일 (style.css)
위에 로더를 그려주는 css 파일입니다.
javascript 파일 (loading-page.js)
loader와 container를 디스플레이에서 보여주는 시점을 지정해주시면 됩니다. loader의 경우에는 기존에 화면에 보여주고 있기 때문에 css의 함수를 통해 display에 none을 넣고, container에는 display block의 값을 넣어주므로서 뷰가 교차되서 보여집니다. css(‘property’, ‘value’)
[참고] http://www.w3schools.com/반응형
[티스토리] 로딩화면 만들기
반응형
안녕하세요
블로그에서 글을 읽을 때 이미지가 많은 경우 이미지가 출력이 되지 않은 상태로 계속해서 글들을 확인할 수 있습니다
그러면 블로그에 쓴 글이 전부 불러왔는지 알 수가 없는데요
이번 포스팅에서는 글이 실행될 때 글과 이미지가 전부 실행이 되는 동안 로딩화면을 만드는 방법에 대해서 알아보겠습니다!
이미지 다운로드
먼저 로딩이미지를 받아야합니다
가지고 있는 이미지가 있다면 그 로딩이미지를 쓰면되지만 로딩이미지가 따로 없다면 아래의 링크에서 다운받으면 됩니다
로딩 이미지만 전문으로 다운 받는 사이트입니다
icons8.com/
사이트에 들어가서 밑으로 내리면 이미지들이 보입니다
맘에 드는 이미지를 선택하고 “Download”버튼을 누르면 이미지가 다운로드됩니다
로딩창 구현 방법
다운받은 이미지를 바탕으로 로딩창 구현하는 방법에 대해서 알아보겠습니다!
로딩창을 구현하기 위해서는 블로그의 HTML을 편집해야합니다
블로그 관리자의 “꾸미기”탭의 “스킨 편집”메뉴로 이동합니다
스킨 편집의 오른쪽 상단의 “html 편집”버튼을 눌러 html 편집으로 이동합니다
1. “추가”버튼을 클릭하면 이미지를 블로그에 업로드할 수 있습니다
-> 다운받은 이미지를 선택하여 블로그에 로딩바 이미지를 업로드합니다
2. 이미지 업로드가 완료되면 “적용”버튼을 눌러 로딩바 이미지 업로드를 완료합니다
1.
사이에 로딩 화면 코드를 복사해넣습니다로딩창 코드는 이미지 아래를 참고바랍니다
2. “적용”버튼을 눌러 로딩창 적용을 완료합니다
로딩창 화면 코드 입니다!
이걸 복사해주시면 됩니다
이제 정상적으로 로딩창이 뜨는지 테스트만 하면 완료입니다!!
정상적으로 적용이 됐으면 아래처럼 로딩창이 뜨는 것을 확인할 수 있습니다
여기까지 티스토리 블로그의 로딩창을 구현하는 방법에 대해서 알아봤습니다!
반응형
그리드형
[JQuery] 로딩창 설정 방법 (+LoadingOverlay사용법)(영상 有)
반응형
안녕하세요. 오늘은 프로젝트에서 로딩시에 화면을 나타내는 로딩 페이지를 이야기해보겠습니다.
스크립트 함수나 AJAX 사용 시, 로딩시간이 있는 경우, 사용자 입장에서 화면이 움직이지 않을 경우 문제가 있다고 생각할 수도 있기 때문에 코드가 도는동안 화면에 로딩이라는 표시를 해줘야합니다.
제가 만든 프로젝트를 예를 들어보겠습니다.
(2021년 8월 25일 하단에 LoadingOverlay plugin 사용방법을 추가하였습니다.)
박스안에 정보를 클릭을하면 함수가 돌아가는데 정보량이 많다보니 시간이 좀 걸립니다..
그래서 아래와 같은 로딩창이 필요한 이유입니다.
크게 로딩실행함수와 종료함수 두가지로 나뉩니다.
로딩실행함수
해석하자면
문서의 높이와 바디부분의 넓이를 변수에 담습니다.
그리고 mask에 로딩창의 검은색 배경화면을 설정하여 display:none처리로 숨겨줍니다.
loadingImg 변수에는 스피너파일(로딩파일) 을 담아줍니다. (img에 경로에 맞게 설정하시면 되요~)
해당 스피너 파일 (다른이름으로 저장하신다음 사용하시면 됩니다.)
바디부분에 mask 변수를 추가하합니다.
mask을 처음 선언했던 높이와 넓이를 적용해줍니다.
그리고 mask를 보여주고
원하는 부분뒤에 로딩창 div를 append로 추가한 다음 show를 통해 보여주면 나타나게 됩니다.
function Loading() { var maskHeight = $(document).height(); var maskWidth = window.document.body.clientWidth; var mask = “
“; var loadingImg =”; loadingImg +=”
“; loadingImg +=”“; loadingImg += “
“; $(‘body’) .append(mask) $(‘#mask’).css({ ‘width’ : maskWidth, ‘height’: maskHeight, ‘opacity’ :’0.3′ }); $(‘#mask’).show(); $(‘.loadingImg’).append(loadingImg); $(‘#loadingImg’).show(); }
저같은 경우 원하는 부분을 map에 class명 loadingImg을 붙여서 사용했습니다.
로딩창 닫는 부분
로딩창 닫는 부분은 간단하게 mask와 loadingImg의 id값으로 설정된 div를 hide으로 숨겨주면됩니다.
저는 확실히하기 위해 remove를 한번 더 선언해서 지워줬습니다.
function closeLoading() { $(‘#mask, #loadingImg’).hide(); $(‘#mask, #loadingImg’).remove(); }
그리고 함수가 자동으로 시작되는 부분에서
아래와 같이 테스트를 하면 로딩창이 뜨고 settimeout함수로 인해 3초뒤에 닫히는 걸 확인한 수 있습니다.
$(function() { Loading(); setTimeout(“closeLoading()”, 3000); });
LoadingOverlay 사용방법
작업을 하다가 LoadingOverlay 플로그인을 알게 되어 공유드리고자 합니다.
위에 방법보다 훨씬 간편하더군요..수정하면서 윗글을 보니 고생이 많았구나 생각이 드네요…ㅎㅎ
우선 LoadingOverlay를 사용하기 위해선 두가지가 필요합니다.
1. LoadingOverlay의 js 파일
2. 스피너 파일을 나타낼 bootstrap의 icons의 css 파일
loadingoverlay.min.js 0.01MB icons.css 0.04MB
해더부분에 경로에 맞게 스크립트를 선언해줍니다.
그리고 전 confirm 메세지 후에 LoadingOverlay를 나타나게 아래 코드를 붙여줬습니다.
그럼 끝입니다…
그리고 ajax를 사용하여 안보이고 싶을 경우, 아래와 같이 hidn처리를 해주면 됩니다.
$.LoadingOverlay(“hide”);
잘 나옵니다… 플로그인 참 간편하네요 하하하핳ㅎ핳ㅎ하핳…
반응형
[Tistory] 티스토리 로딩 화면 구현하기
반응형
포스팅 내용이 크지 않으면
짧은 시간에 모든 내용이 문제없이 로딩된다.
하지만 기본 이미지를 포함해서 GIF 파일과 같이
내용이 무거운 경우 몇 초의 시간이 필요하다.
자칫하다 방문자가 비어있는 이미지를 보고 넘어갈 수 있다. 😅
구글 애드센스 광고 로딩을 위해서라도
페이지 로딩 시간 확보가 필요하다고 생각한다.
HTML 적용해제 하지 않았으면 본 포스팅에서도
새로고침시 로딩 화면을 볼 수 있을 것이다.
로딩 이미지는 구글 검색하면
무료로 다양한 이미지를 구할 수 있다.
📌 icons8.com/preloaders/
다운로드 받은 이미지를 티스토리에 업로드 해야 한다.
이때 파일명을 「loading」으로 변경하였다.
(파일명은 아무거나 해도 상관없지만 HTML 코드와 Sync 되어야 한다.)
Tistory 관리창에서 좌측탭에서 [스킨 편집] 선택
📌 [Tistory] 블로그 스킨 편집
스킨 편집 선택 우측에서 [html 편집] 선택 html 편집 선택 [파일 업로드]에서 [+추가] 이미지 추가 방법 추가된 이미지가 정상적으로 업로드 되었는지 확인한다. 이미지 목록 확인
태그가 시작되는 부분 아래에태그를 생성한다. 업로드한 이미지를 보여주는 HTML 태그이다. (라인 넘버는 개인에 따라 다를 수 있다.) HTML 코드 적용
태그가 끝나는 지점 위에 JavaScript 코드를 추가한다.
웹페이지가 로딩되면 이미지 파일이 서서히 사라진다. (Fade Out)
광고 로딩을 위해 0.4초 (= 400 ms) 여유 시간을 두었는데
포스팅 주제에 맞춰서 시간 조정하면 된다.
(라인 넘버는 개인에 따라 다를 수 있다.)
JavaScript 코드 적용 [CSS] 탭으로 이동 CSS 탭 선택 제일 아래에 CSS 코드 추가 (라인 넘버는 개인에 따라 다를 수 있다.) CSS 적용 코드 /* loading 화면 CSS Start */ #loadDiv { width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: flex; background: white; z-index: 999; opacity: 0.9; } #loadDiv > img { display: flex; width: fit-content; height: fit-content; margin: auto; } /* loading 화면 CSS End */ [적용] 후에 모바일 웹을 포함해서 로딩 화면을 확인할 수 있다. 완성된 로딩 화면 브라우저마다 HTML/CSS 적용 정도에 따라 결과가 다를 수 있으니 (주요 유입 경로가 되는 브라우저 확인해보세요 😁 뉴스 기사에 따르면 로딩시간이 2초~3초 이내라면 접속자가 “무난”하게 받아들인다고 한다. 3초를 넘어가면 포스팅 내용을 줄여보세요! 📌 함께 보면 좋은 포스팅 • [Tistory] 링크 클릭 시, 새 탭 띄우기 설정 • [Tistory] TOP 버튼 생성하기 • [Tistory] 카테고리 URL 제거
반응형
웹 페이지 로딩 과정 이해하기
웹 브라우저에서 어떻게 웹 페이지가 로딩될까요? 실제 웹 페이지 로딩 시간을 측정하는 에이전트를 개발해야 하는 IMQA 팀에서 웹페이지 성능 최적화에 대한 노하우를 전달해 드리겠습니다.
모바일 앱 종류가 웹/하이브리브 앱인 경우 위 차트를 많이 보셨을 텐데요. 바로 웹뷰 화면 로딩시간의 히트맵과 웹 리소스 분석 차트랍니다.
이렇듯 IMQA MPM(모바일 모니터링 솔루션)은 앱의 네이티브 성능뿐만 아니라, 삽입된 웹뷰의 성능까지 보여줍니다. 웹뷰의 성능을 웹뷰 화면 로딩시간 / 웹뷰 화면 응답시간 구분하여 제공하고 있으며, 웹 사이트에 접속했을 때 요청 과정들을 보기 쉽게 지표로 나타냅니다. 평소 웹 성능을 모니터링하시거나, 관심이 있으시다면 끝까지 읽어보시길 추천드립니다!
1단계 서버와 연결하기
• 서버 주소 찾기 – DNS(Domain Name System)
• 컴퓨터들 간 소통 방법 – TCP/IP 모델
• 서버와 소통 준비하기 – TCP(Transmission Control Protocol)
2단계 서버에 요청하기
• 서버와 소통하는 방법 – HTTP(Hyper Text Transfer Protocol)
3단계 응답 파일 해석하기
• DOM 생성하기
• CSSOM 생성하기
• JavaScript 실행하기
• Render Tree로 합치기
4단계 웹 페이지 그리기
• 크기와 위치 계산하기 – Layout (Reflow)
• 화면에 색칠하기 – Paint (Repaint)
• 레이어 합치기 – Composite
들어가기 앞서
웹 페이지는 하나의 웹 서버에서 동작합니다. 주소창에 imqa.io를 입력하면, 컴퓨터는 IMQA 웹 서버로 연결하고 요청을 보냅니다. 그리고 IMQA 웹 서버가 응답을 주면, 컴퓨터의 브라우저가 그 응답을 해석해서 웹 페이지를 그립니다.
웹 페이지 로딩 과정
위 다이어그램은 웹 페이지가 로딩되는 전반적인 과정입니다. 크게 서버에 요청하는 부분과, 브라우저가 해석하고 페이지를 그리는 과정으로 나눌 수 있습니다. 이러한 과정이 어떻게 일어나는지 좀 더 자세히 살펴보겠습니다.
1단계 서버와 연결하기
주소창에 입력한 imqa.io로, 어떻게 웹 서버를 찾을 수 있을까요?
Domain과 IP의 관계
인터넷에서 다른 컴퓨터를 찾기 위해서는 IP(Internet Protocol)이라는 통신 규칙을 사용합니다.
IP : 인터넷상에서 내 컴퓨터 위치를 나타낼 수 있는 통신 규칙, 192.168.0.0 같이 숫자 주소 형태
: 인터넷상에서 내 컴퓨터 위치를 나타낼 수 있는 통신 규칙, 192.168.0.0 같이 숫자 주소 형태 Domain : 사용자가 기억하기 쉽도록 IP를 문자로 바꾼 것
: 사용자가 기억하기 쉽도록 IP를 문자로 바꾼 것 프로토콜(protocol): 컴퓨터들(또는 통신 장비) 간 정보를 주고받는 방법을 정리한 하나의 규칙
Domain은 imqa.io 같이 사용자가 기억하기 쉬운 문자로 이루어져 있는 주소를 말하는데요. 이 Domain을 숫자로 이루어진 IP로 변환을 해야, IMQA 서버의 실제 주소를 찾을 수 있습니다. imqa.io 같은 Domain을 IP로 변환하는 작업은 Domain Name System이라는 프로토콜을 활용해서 할 수 있습니다.
서버 주소 찾기 – DNS(Domain Name System)
DNS는 Domain을 IP 주소로 변환하는 작업을 수행합니다. 인터넷의 전화번호부라고도 표현하죠. 그리고 이 DNS를 운영하는 서버를 DNS 네임 서버라고 합니다. DNS 네임 서버는 통신사(ISP), 구글, cloudflare 등 많은 회사들이 운영하고 있는데요. 심지어 로컬(내 컴퓨터)에도 존재한답니다.
imqa.io의 IP를 찾기 위해서 컴퓨터의 운영체제가 DNS 네임 서버에 ‘질의’를 합니다. 그리고 DNS 네임 서버가 imqa.io 도메인에 해당하는 IP를 반환하면, DNS 질의 과정은 끝납니다. 반환된 IP는 나중에 또 쓸 수 있도록, 로컬 DNS(내 컴퓨터) 캐시에 저장해둡니다.
다음 과정을 설명하기 전에, 브라우저와 서버 간의 소통 과정을 이해하기 위해서 네트워크가 어떤 식으로 동작하는지 알아보겠습니다. 먼저 네트워크 모델에 대해 알아볼까요?
컴퓨터들 간 소통 방법 – TCP/IP 모델
TCP/IP 4 Layer
네트워크 모델은 OSI 7계층 모델과 실질적으로 많이 쓰이는 TCP/IP 모델이 있습니다.
인터넷을 할 때 한 가지 프로토콜만 쓰는 것이 아닙니다. 네트워크(TCP/IP 모델)의 세계는 4가지의 계층(Layer)으로 이루어져 있고, 각 계층마다 사용하는 프로토콜이 있는데요. 컴퓨터의 브라우저, 운영체제, 하드웨어 등 많은 요소에서 여러 프로토콜이 쓰인답니다.
TCP/IP 모델의 4가지 계층
응용 계층 (Application Layer)
전송 계층 (Transport Layer)
인터넷 계층 (Internet Layer)
인터페이스 계층 (Interface Layer)
TCP/IP 모델은 4가지 계층으로 이루어져 있는데 각 계층은 독립적인 것이 아니라 서로 밀접하게 연결되어 있습니다. 응용 계층에서 정보를 만들면, 전송 계층과 인터넷 계층에서 통신 정보를 추가하고, 인터페이스 계층에서 전기적 신호로 변환하여 상대방 컴퓨터에게 실제로 전달하는 방식입니다.
또한 위에서 언급한 것처럼 계층마다 사용하는 프로토콜이 있는데, 우리가 평소 인터넷을 할 때는 전송 계층에서 TCP/ 응용 계층에서 HTTP가 사용됩니다. 이외에도 UDP, QUIC, FTP 등 많은 프로토콜이 있는데요. 위에서 잠시 살펴본 DNS도 응용 계층에 해당하는 프로토콜(UDP 기반)이랍니다! (TCP/IP 프로토콜에 대한 자세한 내용은 여기서 확인해 보세요.)
서버와 통신 과정을 이해하기 위해서, 잠시 네트워크의 전반적인 모델을 살펴보았습니다. 이제 네트워크 모델을 바탕으로 다음 과정은 어떻게 이루어지는지 알아볼까요?
서버와 소통 준비하기 – TCP(Transmission Control Protocol)
서버에 요청을 보내기 전 먼저 서버에 내 컴퓨터(송신자)의 존재를 알려주는 과정이 필요한데, 여기서 TCP(전송 계층)가 사용됩니다. TCP는 데이터를 전송할 때 어떻게 서버와 연결하고 데이터를 안정적으로 잘 보낼지 고민하는 연결 지향 프로토콜입니다. 통신하기 전 연결 관계를 만들고 전송 방식을 제어하는데 초점이 맞춰져있는데요. 이름부터 데이터(패킷)의 ‘전송을 제어’ 한다는 것을 알 수 있죠.
TCP의 가장 중요한 키워드는 ‘안정성’, ‘연결성’ 그리고 ‘신뢰성’입니다. 안정성과 신뢰성을 보장하기 위해 서버와 처음 인사할 때 3-way Handshake라는 기법으로 데이터가 확실히 도착하도록 준비합니다. 또한 데이터가 잘못 갔을 경우, 이걸 캐치해서 다시 보내는 재전송도 수행합니다.
TCP 통신 과정
송신자 측은 데이터를 보내기 전, 먼저 서버에게 보내도 되냐는 요청을 합니다. 서버가 요청을 수락하면 데이터를 보내고, 또 데이터가 잘 도착했는지 서버에게 추가적인 확인도 받습니다. 만약 데이터가 유실돼서 서버에게 데이터 도착 확인이 오지 않으면, 송신자는 데이터를 다시 보내게 됩니다. (TCP의 자세한 동작 과정은 이 글을 참고해 보세요!)
이렇게 TCP를 사용해서 IMQA 웹 서버랑 소통 준비를 하고, 안정적으로 연결합니다.
이제 연결도 무사히 마쳤으니, 웹 페이지 파일을 달라고 요청을 해야겠죠?
2단계 서버에 요청하기
컴퓨터 간 데이터를 주고받을 때 HTTP, FTP 등 많은 프로토콜을 사용할 수 있습니다. 위에서 TCP/IP 모델을 살펴봤듯이 이 프로토콜들은 ‘응용 계층’에 해당되는데요. 이것은 여러분의 브라우저, 즉 어플리케이션 단에서 사용하는 프로토콜입니다. 응용 계층 프로토콜에서 만든 데이터가 전송 계층 → 인터넷 계층 → 인터페이스 계층으로 전달되어 정보가 추가되고, 상대 컴퓨터에게 보내는 방식입니다.
웹 페이지의 가장 중요한 구성 요소인 HTML 파일을 IMQA 웹 서버에 요청해 보겠습니다. 여기에 특화된 프로토콜이 바로 HTTP인데요. 주소창에서 흔하게 볼 수 있는 ‘http://xxx.xxx’의 http가 이 프로토콜을 뜻합니다.
서버와 소통하는 방법 – HTTP(Hyper Text Transfer Protocol)
HTTP: Hyper Text Transfer Protocol의 약자로써, Hyper Text를 전송하기 위한 프로토콜
여기서 Hyper Text란 웹 페이지를 구성하는 언어인 HTML을 의미합니다.
송신자가 요청(request)를 보내면 수신자가 응답(response)하는 통신 구조를 가지고 있는데, 이 하나의 사이클을 HTTP 트랜잭션이라고 부릅니다. 또한, HTTP는 수신자가 응답하면 더 이상 HTTP 연결을 유지하지 않고 끊어버리기 때문에 비연결성 프로토콜이라고도 합니다.
웹 페이지 https://imqa.io를 만들기 위해, IMQA 웹 서버에 HTML 파일을 HTTP 프로토콜로 요청합니다.(HTTPS는 HTTP보다 보안이 강화되어 더 안전합니다.) IMQA 웹 서버가 HTML 파일을 응답해 주면, 길고 길었던 네트워크 통신 과정이 끝납니다.
네트워크 통신 과정
지금까지 네트워크 통신 과정에서 브라우저가 IMQA 웹 서버를 찾는 방법, 그리고 연결하고 요청하는 방법을 살펴보았습니다. 사용자가 URL을 입력하면 DNS으로 웹 서버의 IP를 찾고 TCP로 연결하는 과정이 있었습니다. 그 후 브라우저가 웹 서버에게 HTTP 요청을 하여 HTML 파일을 받아 왔습니다.
이렇게 받은 HTML 파일을 브라우저는 어떻게 처리할까요?
3단계 응답 파일 해석하기
DOM 생성하기
모든 브라우저는 서버에서 HTML을 응답받으면 먼저 브라우저가 이해할 수 있는 방식으로 나눕니다. 이런 과정을 파싱이라고 하는데요. 웹 페이지를 로딩하는 가장 첫 번째 과정입니다.
브라우저는 HTML을 쪼개서 Document Object Model(DOM)이라고 불리는 트리를 만듭니다. DOM은 브라우저가 웹 페이지를 표현하는 뼈대이며 JavaScript를 통해 동적으로 변경할 수 있는 API를 제공하기도 합니다. DOM을 다 만들었다면 브라우저는 DOMContentLoaded라는 브라우저의 이벤트를 발생시킵니다. 이 이벤트를 최대한 빨리 발생시키는 것, 즉 DOM을 최대한 빨리 만드는 것이 좋은 웹 성능을 위한 조건입니다.
그런데 웹 페이지는 HTML만 있는 것이 아닙니다. imqa.io 같이 화려한 웹 페이지는 HTML 말고도 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당하는 CSS와 복잡한 로직을 수행하는 JavaScript(JS)라는 파일도 있습니다.
브라우저에서는 일단 HTML 파일 하나만 응답을 받지만 이 HTML 안에는 CSS와 JS가 있습니다. 따라서 브라우저는 HTML뿐만 아니라 DOM을 만드는 도중에 만나는 CSS와 JS까지 처리해야 imqa.io 같은 웹 사이트를 만들 수 있는 것입니다.
CSSOM 생성하기
보통 CSS는 브라우저가 HTML을 파싱하면서 태그를 만나면 요청되는데요. HTML의 DOM과 마찬가지로 CSS도 브라우저가 이해할 수 있는 형식으로 바꿔야 합니다.
브라우저는 CSS를 만나면 CSS를 파싱하면서 CSSOM(CSS Object Model)이라고 불리는 트리를 만듭니다. 위에서 살펴본 DOM 생성 과정은 거의 비슷합니다.
DOM이 웹 페이지의 기본 뼈대였다면, CSSOM은 웹 페이지를 꾸미는 스타일들의 집합이라 할 수 있습니다. 색상, 크기, 위치, 배치 방법 등을 결정하는 정보들이 있으며, CSSOM 생성은 별개의 스레드에서 이뤄져서 DOM 생성 과정을 방해하지 않습니다.
JavaScript 실행하기
JS(JavaScript)는 브라우저가 HTML 파싱 중
#2 로딩으로 보여줄 div 를 화면에 넣습니다.보통 body 바로 담에 넣으면 됩니다.#3 페이지가 로드되었을 때 로딩화면을 감춥니다.이렇게하면, 일단 페이지가 로드되면 하얀 loading div 가 보이고,페이지가 로드되면, 그 div 가 사라집니다.
키워드에 대한 정보 로딩 페이지
다음은 Bing에서 로딩 페이지 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 로딩중 효과 만들기 + 제이쿼리 스크립트 fadeOut 효과 /*코딩강좌*/ [HTML+CSS{코남}]
- html
- css
- 코딩
- 코남
- 코딩하는남자
- 애니메이션
- 모션
- 효과
- 웹디자인
- 퍼블리셔
- 퍼블리싱
- 로딩
- publisher
- 키프레임
- 로딩효과
로딩중 #효과 #만들기 #+ #제이쿼리 #스크립트 #fadeOut #효과 #/*코딩강좌*/ #[HTML+CSS{코남}]
YouTube에서 로딩 페이지 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 로딩중 효과 만들기 + 제이쿼리 스크립트 fadeOut 효과 /*코딩강좌*/ [HTML+CSS{코남}] | 로딩 페이지, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.