HTML&CSS&JavaScript(52)
-
[javaScript] LocalStorage & SessionStorage 사용법
# 데이터 추가하기 localStorage.setItem("키", "키 값"); sessionStorage.setItem("키", "키 값"); # 데이터 불러오기 localStorage.getItem("키"); sessionStorage.getItem("키"); # 데이터 삭제하기 localStorage.removeItem("키"); sessionStorage.removeItem("키"); # 전체 데이터 비우기 localStorage.clear(); sessionStorage.clear();
2021.02.11 -
LocalStorage vs SessionStorage vs Cookie 개념
# WEB STORAGE HTML5에는 웹 데이터를 클라이언트에 저장할 수 있는 WEB STORAGE라는 API가 있다. # LocalStorage - 영구저장(데이터 삭제를 하지 않는 이상 보존) - 데이터를 로컬에 저장하는 방식 - 키(key)와 키 값(value)로 저장 - 도메인과 브라우저별로 저장 - javaScript로 조작 - 용량 제한이 없음 # SessionStorage - 임시저장(세션 만료시 삭제) - 나머지 특징은 LocalStorage와 동일 # Cookie - 데이터를 매번 서버로 전송 - 단순 문자열(텍스트)만 저장 - 용량 제한이 있음
2021.02.11 -
[HTML&CSS] GASP
# GASP 웹 브라우저에서 애니메이션을 구현하기 위한 자바스크립트 라이브러리 기존 CSS Animation이나 자바스크립트 애니메이션보다 탁월한 퍼포먼스를 발휘할 수 있도록 최적화된 애니메이션 전용 라이브러리
2021.01.23 -
[HTML&CSS] Overflow
# Overflow 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성 ## 특징 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 ## 옵션 visible : 박스를 넘어가도 보여줌 hidden : 박스를 넘어간 부분은 보이지 않음 scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옴 auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옴 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속
2021.01.23 -
[HTML] Form, Input
form 태그에서 주요한 속성은 두 가지가 있다. 바로 action과 method이다. action은 데이터를 전달할 대상을 지정하고, method는 전달 방식을 정한다. action: 수신 대상, 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시, 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 함 method: 전송 방식, 입력받은 데이터를 서버에 전달할 방식을 명시 HTML에서는 다양한 타입의 input 요소를 이용하여 사용자로부터 입력을 받을 수 있다. 1. 텍스트 입력(text): type 속성값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있다. 검색할 내용을 입력하세요 : 2. 비밀번호 입력(password): ..
2021.01.11 -
[HTML&CSS] Favicon
# 개념 - 파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 작은 아이콘을 말함 - 로고의 개념과 비슷 - 확장자명은 .ico - 전통적으로 favicon.ico 파일은 16컬러 24비트 알파 투명도(alpha transparency) 포맷의 16x16 아이콘(ICO) 파일 - 최근의 파비콘은 32x32를 지원하는데, 모든 주요 인기 있는 브라우저들에서 적절하게 축소되어 이를 표현해줌처: https://webdir.tistory.com/337 [WEBDIR] # 적용 1. 원하는 이미지를 favicon generator와 같은 사이트에서 .ico파일로 변환시킨다. 2. 변환한 파일을 html이 있는 폴더에 같이 저장한다. 3. head.html에 다음과 같이 경로를 지정하고 저장한다.
2020.12.24 -
20.12.22 toastui-editor 활용 youtube plugin 추가
< Editor 1 > 에디터 뷰어 1 /* 토스트에디터-유튜브 플러그인 시작 */ .toast-ui-youtube-plugin-wrap{ max-width:500px; margin-left:auto; margin-right:auto; position:relative; } .toast-ui-youtube-plugin-wrap::before{ content:""; display:block; padding-top:calc(100% / 16 * 9); } .toast-ui-youtube-plugin-wrap > iframe{ position:absolute; top:0; left:0; width:100%; height:100%; } /* 토스트에디터-유튜브 플러그인 끝 */ console.clear()..
2020.12.22 -
[HTML&CSS] Open Graph
# 개념 오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌다. # Open Graph의 기본 태그 1. og:title - 사이트의 제목 태그 2. og:type - 사이트의 종류 스타일 예) video.movie 3. og:image - 사이트를 나타낼 대표 이미지 4. og:url - 사이트의 대표 url # 그 외 Open Graph의 태그 일부 1. og:audio - 사이트에 포함되는 오디오 파일 url 2. og:description - 사이트의 설명 3. og:..
2020.12.21 -
20.12.16 ToastUi-Editor 적용연습 - 4가지 형태의 에디터 생성
< Editor 1 > get HTML get MARKDOWN set HTML set MARKDOWN < Editor 2 > get HTML get MARKDOWN set HTML set MARKDOWN < Editor 3 > get HTML get MARKDOWN set HTML set MARKDOWN < Editor 4 > get HTML get MARKDOWN set HTML set MARKDOWN console.clear(); function Editor1(){ var editor1 = new toastui.Editor({ el: document.querySelector('#editor-1'), height:'500px', previewStyle: 'vertical',..
2020.12.16 -
[Java Script] JS 와 jQuery 1~33강 학습
1강 - codepen.io/cjy324/pen/MWjpRKV ...... 33강 - codepen.io/cjy324/pen/QWKpXod -consol.log()는 기록이 쌓인다. (consol.clear()로 이전 기록을 삭제해주어야 함) -자바, 자바스크립트는 기본적으로 c언어계열, 이름은 유사하지만 서로 관련 없음 -typeof(): typeof 함수는 인자로 입력받은 값의 "타입"을 반환(리턴)한다. -jquery에서 $는 검색 함수 -앨리먼트명에 style로 직접 넣는 것이 가장 우선순위 -!important는 절대적 우선순위 -일반적인 우선순위 !important > 앨리먼트명 내 style > 앨리먼트+클래스명 > 클래스명 > 앨리먼트명 (추가 고려 변수: 가장 아래쪽) -jquery는 s..
2020.12.16