Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

2018/09 6

웹 프로그래밍
ajax ( Asynchronos Javascript And Xml )를 사용해보자!

ajax는 언제 사용될까? 🤔http프로토콜의 특성 중 하나로 원하는 웹 페이지를 요청하면 서버에서 응답을 해준 뒤 연결을 끊어버린다 ! 이러한 특징 때문에 계속해서 데이터가 변경 되어 웹 페이지에 보여주어야 할 경우에 ( 채팅처럼 ) 우리는 데이터를 변경하기 위해 웹 페이지를 새로고침 해야할 것이다. 😕이런 문제점을 해결해주는 친구가 ajax다...나는 우측 상단에 있는 변경 메뉴를 클릭시 해당 태그의 내용을 바꿔주는 작업을 할 때 ajax를 사용했다.( 변경 메뉴 클릭 후 변경할 문자 입력 > 서버에 전송하여 데이터 베이스에 저장 > 서버에서 웹 페이지로 완료 신호 받고 변경 내용 적용 )가게명 변경을 기준으로 설명하겠다. 우선 첨부한 부분은 메뉴 부분이고, 내용이 바뀔 태그에는 class="sett..

2018.09.29 ﹒ 11:19
웹 프로그래밍/공부일지
웹 페이지의 랜더링 과정 2편

1편 - [Web Programming/Frontand Challenge] - 웹 페이지의 랜더링 과정 1편참고 블로그 : http://12bme.tistory.com/140 1편에서 웹 페이지의 랜더링 순서를 1단계부터 5단계 까지 알아보았다. 이번 2편에서는 리플로와 리페인트에 대해 알아보겠다...레더링이 모두 완료된 상태에서 ( 페인트까지 끝낸 상태 ) 스타일이 바뀌거나새로 나타나는 노드가 있다면...? 또는 데이터 변경으로인해 ( ex. AJAX ) 다시 표시해 주어야하는 일이 생긴다면?아마 다시 스타일을 적용하고 ( 랜더 트리 작업 ) 페인트 해주어야 할 것이다.이럴 경우에 발생하는 것이 리플로와 리페인트이다. 리플로 ( Reflow )란?변경이 생긴 랜더 트리에 대해 유효성 확인을 하고 노드의..

2018.09.25 ﹒ 12:06
웹 프로그래밍/공부일지
웹 페이지의 랜더링 과정 1편

참고 블로그 : http://12bme.tistory.com/140 참고 블로그에 워낙 잘 설명되어 있어서 따라 포스팅을 쓰지 말까 하다가 그래도 내가 정리한 글이 더 기억에 남기에 글로 써본다. 🙏 우선 렌더링이란, 사전에서는 아직은 실제로 제품화되어 있지 않은, 계획 단계에 있는 제품을 전문가가 아니어도 그것의 외관을 이해할 수 있도록 실물 그대로 그린 완성 예상도 라고 설명하고, 블로그에서는 "논리적인 문서의 표현식을 그래픽 표현식으로 변형 시키는 과정" 이라고 되어있다. 뭔가 딱딱한 문장에 처음엔 음..? 하다가 그냥 내가 생각해서 쉽게 풀어서 설명하자면html, css등 글로 ( 코드로 ) 적어 논 것이 웹 사이트에 나타나게 되는 과정이다. 렌더링은 총 5단계 로 이루어 진다.( + html을 ..

2018.09.23 ﹒ 19:18
웹 프로그래밍
SVG ( Scalabe Vector Graphic ) 이미지를 사용해보자!

/* Di it! 프런트엔드 웹 디자인 입문 책을 참고로 작성한 글입니다.*/ 매번 이용하는 아이콘 사이트에는 PNG뿐만 아니라 SVG도 있었는데드디어 무슨 친구인지 알아냈다. 😠별로 어려운 것도 아닌데 왜 알아볼 생각을 안했지... 우선 SVG는 Scalabe Vector Graphic의 약자로 역시 직관적으로 느낌이 온다.확장을 해도 깨지지 않는 친구구나! SVG는 아래와 같은 장점을 가지고 있다.* 스타일 수정이 쉽다.* XML 기반의 문서다.* 애니메이션이나 CSS3효과를 적용할 수 있다. 필자는 XML을 안드로이드 스튜디오를 사용하면서 많이 접해봤는데 여기서도 활용이 되는구나 알았다. 그렇다면 SVG는 어디에서 사용 이 될까?요즘 웹 트랜드인 반응형 웹을 만들다보면 로고나 아이콘 이미지를 축소했..

2018.09.22 ﹒ 10:57
웹 프로그래밍/공부일지
캐러셀 ( carousel ) 만들기 / 반응형 슬라이드 만들기

[Web Programming] - [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기[Web Programming] - [ jQuery ] 슬라이드 배너 만들기 2편 이전에는 플러그인을 써서 만들어봤다면드디어 슬라이드(캐러셀)를 만들어봤다. 내가 생각한 알고리즘은 아래와 같다. 처음 슬라이드에서는 0번째 친구만 보여지고 나머지 친구들은 1번다음에 쌓여서 대기하고있다.그다음 슬라이드가 왼쪽으로 이동하는데 현재 인덱스와 ( 0 ) 그다음 나타날 인덱스 ( 1 )이 왼쪽으로 이동한다.그리고 나서 지나간 0번의 친구가 다시 대기 중인 영역에 와서 기다리고있는 것! Colored by Color Scriptercshtml은 위와 같이 간단하다, bxSlider을 참고로 div안에 목록태그를 사용해서 틀을..

2018.09.19 ﹒ 17:51
웹 프로그래밍
[ HTML / CSS ] 배경 고정 스크롤

결과물 ▼ 다른 웹 퍼블리셔를 꿈꾸시는 웹 포트폴리오에도 스타벅스에도 가보면위와 같이 되어 있는걸 보고 사람들에게 신박함을 줄 수 있겠다 해서 찾아서 해봤다.모를때는 진짜... 레이아웃을 여러개 쓴건가? 자바스크립트로 했나? 싶었는데한줄만 적어주면 되는것...;; ( 너무 허무.. ) background-attachment: fixed; 이 속성 한줄이면 된다...^^... 그래도 처음 보는 속성이니 좀더 자세히 알아봤다.참고 사이트 : https://www.w3schools.com/cssref/pr_background-attachment.asp 우선 attachment는 영어로 '부착물'이란 뜻을 가지고 있다.background-attachment는 배경을 어떻게 붙일지, 고정할지 설정 하는 친구다. ..

2018.09.02 ﹒ 12:16