사용중인 session storage size는 다음과 같이 확인이 가능합니다. // Get the session storage object const sessionStorage = window.sessionStorage; // Get the current amount of space used by session storage const usedSpace = JSON.stringify(sessionStorage).length; // Log the used space in bytes console.log(`Session storage used space: ${usedSpace} bytes`);
owl carousel 사용배경 owl carousel을 적용했는데 부트스트랩이 아닌 carousel를 사용해보고 싶은 마음이 들었다. 그리고 html 상에 carousel 코드 적용이 간단해서 적용해보기로 했다. issue 사항 1 - 마우스휠 적용 문제 owl carousel 적용시 마우스휠 demo를 사용했다. 여기서 마우스휠을 위로 하던지 아래로 하던지 계속 같은 방향으로 이미지가 넘어가는 issue 였다. 해결방안 stackoverflow에서 정답을 찾았는데, jquery를 사용하고 있어서 e.deltaY가 안될 수 있다는 것이었다. jquery에서는 e.originalEvent.deltaY와 같이 사용해야 적용이 된다. console.log(e.deltaY)를 찍어보면 undefined라고 나..
웹페이지에서 모달창을 사용하는데 있어 문제점들을 해결하고 이 내용을 다시 정리해보았다. 1. 모달창 활성화시 바디 스크롤 방지 모달창에서 마우스 휠을 사용하면 바디 스크롤이 같이 움직이는 경우가 있었다. 웹페이지 모달창에 사용한 carousel이 작동하기 어려워서 모달창이 열렸을 때만 바디 스크롤이 없어지도록 했다. 여러 가지 방법이 있지만 가장 간단한 방법은 바디 스크롤이 적용된 구간 의 상위 태그를 모달창 활성화시 overflow:hidden 처리하는 것으로 해결했다. css는 .addClass()로 적용했다. 2. 모달창 비활성화시 바디 스크롤 (1의 반대) 반대로 모달창이 비활성화 되었을 때는 바디 스크롤이 작동해야 하므로 1번에서 addClass() 한 것을 다시 반대로 해제하기 위해 .remo..
0. Jquery 사용하기 Jquery 홈페이지에서 다운받아 사용하거나, Jquery UI 에서 view source 를 클릭해서 적용할 수 있다. (이하 Jquery 사용은 JS 와 비교해서 다른 부분을 중심으로 정리했다.) 1. function JS 와 달리 Jquery 에서는 실행되는 부분을 $(function(){}) 이나 $document.ready(function(){}) 를 사용한다. JS 에서 .getElementsId() 대신에 css 방식과 유사하게 $("div#id") 와 같은 방식으로 선택자를 잡을 수 있다. 선택자 지정한 것이 반영되지 않을 때는 $(document).on("event", "선택자", function(){}); 를 사용해보자. 2. Jquery 이벤트 핸들링 hid..
1. HTML 파일 내 설정 위치와 문서확인법 별도 파일을 생성하지 않고 html 에서 파일 생성시 자바스크립트는 css 와 마찬가지로 임베디드 방식의 태그 내에서 처리할 수 있다. 마찬가지로 별도 파일을 생성하는 경우 link 를 통해 연결하면 된다. window.onload=function(){} 을 사용해서 웹 브라우저가 열렸을 때 어떤 것을 실행해서 보여줄 것인지를 확인한다. 웹의 뼈대는 태그 내에 HTML 로 구성하고 추가로 자바스크립트에서는 .html() 등을 사용해서 태그를 넣을 수 있다. + 작성을 하면서 원하는 결과 값이 나오는지 확인하는 과정이 필요하기에 console.log() 또는 alert() 를 띄워서 확인한다. 오류 발생시에는 실행된 웹페이지에서 F12 를 보면 개발자도구 so..
1. CSS 적용 우선순위 ① !important 1 2 3 4 5 div { color: red; border: solid 5px blue; background-color: #cce6ff !important; } Colored by Color Scripter cs ② 해당 태그에 직접 준 것 → 인라인 방식 1 Hello, world cs ③ HTML 파일에서 준 style 태그 → 임베디드 방식 1 cs ④ 외부 css 파일 1 cs 2. 태그의 display 방식 display 방식은 대표적으로 block 과 inline 방식이 있다. block 방식 태그는 inline 방식 태그는 정해져있는 태그의 display 방식은 변경가능하며, block-inline 방식과 float 속성으로 변경가능하다...
| 의사코드 HTML, CSS, JS --- W3C 웹표준 Cross browsing 동일한 사용자경험 웹접근성, 정보통신기기 웹개발 에디터 > VS code 기본 작성시, !+tab키 오픈소스와 라이센스 opensourcing.org | -------------- empty tag, self closing tag 대체택스트 필요 부모요소와 자식요소 문자인코딩 방식 기타 모든 정보 DTD Document type definition HTML5 CSS ----- 외부 embeded 방식 JS ----- | CSS 선택자 selector -------- 태그이름 or 클래스 .main-text(별명) margin padding (시계방향, 위아래 좌우) 요소내부여백..
- gradle build
- 노마드코더
- filezila
- AWS
- 실용주의프로그래머
- JIRA
- 웹페이지만들기
- java
- 호스팅영역
- jdbc
- intellij
- 정보처리기사
- SQLD
- git연동
- putty
- 정보처리기사 필기
- ubuntu
- 북클럽
- EC2
- 기술블로그
- 노개북
- 오늘의코딩
- gradle
- LifecycleException
- 배포
- 개발도서
- IT 5분 잡학사전
- spring
- 정보처리기사 실기
- 독서후기
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |