whatisthis?

CSS 포지션(Position) 모든 태그들은 position: static이라는 디폴트 상태를 갖는다. 차례대로 왼쪽>오른쪽, 위>아래로 쌓인다. position static default relative static을 픽셀만큼 이동시킴 (top,right,bottom,left 속성 有) absolute static이 아닌 포지션의 조상을 기준으로 정렬 (없을시 body) fixed 스크롤을 내려도 위치 고정되게 relative 태그의 위치를 살짝 변경하고 싶을 때, position: relative를 사용한다.이제 top, right, bottom, left 속성을 사용할 수 있다. relative는 각 방향을 기준으로 태그 안쪽 방향 으로 이동한다.(바깥쪽으로 이동하고 싶다면? 음수의 값을 주자.)..

CSS part 1 - (1) 박스 모델(Box Model) content > padding > border > margin 순으로 바깥으로 뻗어나간다. 또한 각 값은 left, right, top, bottom으로 나눠져서 값을 따로 지정해줄 수 있다. 예> border-right : 20px; img cr : https://www.geeksfo.. mywebproject.tistory.com 이전에 업로드한 CSS의 박스 모델에 대한 개정판 포스팅입니다. HTML 태그들은 모두 박스모델(Box-model)을 가지고 있다. 브라우저에서 개발자도구를 켜서 Elements 탭에서 아무 태그나 눌러보면 position, margin, border, padding, content 순으로 나오게 된다. 이것이 ..

HTML/DOM. Form Data 보통은 AJAX로 폼(form) 전송을 할 일이 거의 없다. 주로 JSON구조 (key-value)값 데이터를 전송함. But. 이미지를 AJAX로 업로드 할때 폼 전송이 필요함. >> input type="file" ___ - HTML: Hypertext Markup Lan.. mywebproject.tistory.com formData에 이미지를 담고 싶다면 formData.append('img', document.getElementById('파일 인풋').files[0]) 과 같이 해주고, 서버로 formData 자체를 보내면 된다. (파일이 여러개라면? > 반복문을 사용해서 append를 해줌. 단, 키값은 같아야함.) 키값이 같아야 여러 파일이 같은 키로 업로..

보통은 AJAX로 폼(form) 전송을 할 일이 거의 없다. 주로 JSON구조 (key-value)값 데이터를 전송함. But. 이미지를 AJAX로 업로드 할때 폼 전송이 필요함. >> input type="file" ___ - HTML: Hypertext Markup Language | MDN file 유형의 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다. developer.mozilla.org 파일 입력 칸의 value 특성은 선택한 파일의 경로를 나타내는 DOMString을 담습니다. 사용자가 여러 개의 파일을 선택한 경우 value는 파일 목록의 첫 번째 파일을..

index.html undo redo pencil app.js (function($) { var tool; var canvas = $('paint'); var ctx = canvas.getContext('2d'); var history = { redo_list: [], undo_list: [], saveState: function(canvas, list, keep_redo) { keep_redo = keep_redo || false; if(!keep_redo) { this.redo_list = []; } (list || this.undo_list).push(canvas.toDataURL()); }, undo: function(canvas, ctx) { this.restoreState(canvas, ctx..

Cascading Style Sheets(CSS) - HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어 - 프로그래밍 언어도 아니고, 마크업 언어도 아님. 📌 HTML 문서에 CSS 적용 1 / inline 방법 css 적용 - 수정하기 힘듬 2 / style태그 이용 (head 내) - 이 또한 페이지가 많아진다면 수정 힘듬. 3 / link:rel 이용 - 권장 👍 📌 Rule Set CSS의 전체 구조를 rule set 이라고 한다. (=rule) 선택자(selector) rule set 맨 앞에 있는 HTML 요소의 이름. 꾸밀 요소(대상)을 의미함. 선언(declaration) color: red와 같은 단일 규칙. 꾸밀 대상, 즉 선택자의 속성을 명시함. 속성(p..

local storage와 session storage는 HTML5에 추가된 저장소로, 간단한 key와 value를 저장할 수 있는 key-value storage의 형태이다. Local Storage 사용자가 지우지 않는 한 계속 브라우저에 남아있음. (영구성) 예> 자동 로그인 정보 ❗ 비밀번호는 저장하면 안됨. (클라이언트에 저장하는 거라 털릴수 있음) Session Storage 윈도우나 브라우저 탭을 닫을 경우 소멸됨. 예> 일회성 로그인 정보 쿠키(Cookie) - 브라우저에 있는 저장소 역할. - 만료 기한이 있는 key-value 저장소 - 4kb 용량제한 有. - 매 서버 요청마다 서버로 쿠키가 같이 전송됨. document.cookie; document.cookie를 하면 현재 쿠키 정..

Geolocation API - 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API ** API = 다른 서버와 이야기(소통)할 수 있는 방법을 의미. - 개인 정보를 위해 브라우저는 위치정보 제공하기 전, 사용자에게 위치정보 권한 확인을 받음. https://mywebproject.tistory.com/161 (Private) 이전 포스팅중 momentum 클론코딩을 할 때 한번 사용해봤었다. 🔻🔻🔻 REVIEW 🔻🔻🔻 더보기 function onGeoOk(position) { console.log(position); } function onGeoError() { alert("Can't find you. No weather for you."); } navigator.geolocat..

HTML 기본 태그 총정리 (hyperlink O) - 2022.02.04 수정 INDEX 메인 루트 메타 데이터 컨텐츠 구획 (sectioning) 텍스트 컨텐츠 인라인 텍스트 시멘틱 멀티미디어 내장컨텐츠 스크립트 테이블 양식(Form) 대화형 웹 컴포넌트 기본 구조

HTML 기본 태그 총정리 (hyperlink O) - 2022.02.04 수정 INDEX 메인 루트 메타 데이터 컨텐츠 구획 (sectioning) 텍스트 컨텐츠 인라인 텍스트 시멘틱 멀티미디어 내장컨텐츠 스크립트 테이블 양식(Form) 대화형 웹 컴포넌트 기본 구조