IT 공부방

브라우저 저장공간위치 : 크롬 개발자도구의 Application 탭Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능)Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능)Cookies (유저 로그인정보 저장공간)Cache Storage (html css js img 파일 저장해두는 공간)Local Storage / Session Storage 는문자, 숫자만 key : value 형태로 저장가능하고5MB까지만 저장가능합니다.Local Storage는 브라우저 재접속해도 영구적으로 남아있는데 Session Storage는 브라우저 끄면 날아갑니다.유저가 브라우저 청소하지 않는 이상 반영구적으로 데이터저장이 가능합니다.로컬스토리..

자바스크립트는 HTML를 조작하는 언어인데, 자바스크립트는 HTML 태그를 직접 해석이 불가능자바스크립트가 HTML 조작을 하기 위해서는HTML를 자바스크립트가 해석할 수 있는 문법으로 변환한 것이 DOM 입니다.예)Hello World위와 같은 HTML을 발견하면 브라우저가 document = {}에 담아 줍니다.var document = { div : { style : {color : 'blue'} innerHTML : 'Hello World' }}브라우저가 DOM을 생성해주고 document.div.innerHTML = ‘안녕’ 과 같이 자바스크립트를 이용해서 HTML 조작이 가능해 집니다.

html Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping csstab-button을 클릭 시 현재 클릭만 tab-button에 orange클래스를 추가tab-content에 show 클래스 부착ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc;}ul.list::after { content: ''; display: block; clear: both;}.tab-button {..

html 테스트 예제var products = [{ id: 0, price: 70000, title: 'Blossom Dress' }, { id: 1, price: 50000, title: 'Springfield Shirt' }, { id: 2, price: 60000, title: 'Black Monastery' } ];동적으로 html 만들기 위한 템플릿 함수function 템플릿(data) { data.forEach((a, i) => { var 템플릿 = ` ..