개발자 도담씨

데이터베이스의 정의통합 데이터 : 검색의 효울성을 위해 중복이 최소화된 데이터 저장 데이터 : 접근 가능한 저장 매체에 저장된 데이터운영 데이터 : 조직의 목적을 위해 존재 가치가 확실하고 필요한 데이터공유 데이터 : 여러 프로그램들이 공동으로 사용하는 데이터데이터베이스의 특징 실시간 접근성 : 사용자 응답 즉시 처리계속적인 변화 : 항상 최근 데이터를 동적으로 유지동시 공유내용에 의한 참조 : 사용자가 요구하는 데이터 내용 참조데이터의 논리적, 물리적 독립성 데이터 언어DDL ( 정의어 ) : 데이터베이스를 구축하거나 변경DML ( 조작어 ) : 데이터 처리를 위한 연산의 집합 ( 검색, 삽입, 삭제, 갱신, 연산 )DCL ( 제어어 ) : 데이터 보안, 무결성, 데이터 회복, 병행 제어데이터 베이스 ..

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

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

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

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

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

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

오랜만에 원라이프 공략(?)을 써본다.예전에는 남자친구가 알려주었지만 이젠 나도 중수정도 된다 😚대도시에서 스프 만드는걸 캡쳐해 왔다.(*도구가 모두 갖춰진 곳에서 스프를 만들었으므로 도구 만드는 방법은 없음😓*)...처음 보면 엄청 복잡게 느껴지지만 3번만 하면 마스터 한다...!우선 대도시에서라고 칭한 이유는 도끼가 있어야 하기 때문에...도구로는 그릇, 접시, 큰 통, 도끼와 작물은 호박, 콩, 옥수수🌽가 필요하다.당연히 호박, 콩, 옥수수는 키워 놓은 상태! 첫번째로 호박을 먼저 넣어야한다.캡쳐본이 없지만 다 키운 호박을 뾰족돌로 클릭하면 호박이 '둥!'하고 나올것이다.자른 호박을 우리는 접시 위에 올려한다.그다음 도끼로 호박을 찍어버리면이렇게 세모난 호박이 되어 버린다.이친구를 들고 큰통안에 넣..

어제 웹 프론트앤드의 책을 사서 읽기 시작했는데 역시 책에는 많은 소중한 정보들이 있다.. 짜릿해..😚 책 초반에 많은 디자인 종류들이 나오는데 유용한것 같아 정리해보려고 한다...첫번째, 플랫(Flat) 디자인.영어 뜻 그래도 '평평'하고 '납작'한 디자인 이다.위쪽에 있는 디자인을 말한다. 아마 흔히 볼수있는 디자인이다!(부트스트랩에서도 이런 플랫 디자인으로 버튼이 나오구..!) 두번째, 카드형 디자인. (Card-Based Design)https://www.pinterest.co.kr/종종 사용하는 사이트인데 카드형으로 이루어져 있다. 여러 콘텐츠를 목록처럼 나열하는 페이지에 적합하다. 세번째, 그리드 레이아웃.반응형 웹을 공부하면서 기본적으로 나오던 현재 가장 많이 사용하는 레이아웃 아닐까한다!요..

자바 스크립트와 jQuery와 함께 반응형 웹에 대해서도 책으로 공부하고 있다 XD 그중에서 반응형 웹과 환상의 콤비라고 불리는 플렉서블 박스(Flexible Box)에 대해 공부해봤다. 유독 어렵게 느껴지는 친구였다..😒 ▼ 책의 예제로 연습한 친구 움짤로 준비하진 못했지만 당연히 반응형...( 당연히 가로길이 %..! ) 우선 개념을 간단히 살펴 보면 부모 박스 = 플렉서블 박스, 플렉서블 박스의 자식 박스 = 플렉스 아이템 이라고 불리게 된다. 그리고 아이템의 배치 방향에 따라 주축이 결정 되며 ( 가로 주축. 세로 주축 ) 주축에 교차하는 축을 교차축이라고 말합니다. ( 주죽이 가로라면 교차축은 세로 ! ) +) 플렉서블 박스 기술 개발은 현재 진행형 입니다 :) 호환이 안되는 브라우저가 있을 수..