whatisthis?

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) 대화형 웹 컴포넌트 기본 구조

- HTML에서는 특정 문자들이 예약되어있기 때문에 표기의 혼란을 막기 위해 특수문자를 숫자표현 or 문자표현으로 작성한다. 예를 들면, 공백을 &nbsp로 쓰거나, 을 가각 &lt, &gt처럼 쓴다. (그냥 막 갖다붙인게 아니고, lt = less than과 같이 의미가 다 있다.) 특수문자 숫자표현 문자표현 설명 space &%09 &%10 &%32 수평탭 줄삽입 여백 space (non-breaking space) > > greater than & & & ampersand ' ' ' (IE에서 안됨) apostrophe " " " quotation mark ‘ ‘ ‘ left single quotation mark ’ ’ ’ right single quotation mark “ “ ..