개인공부 (206) 썸네일형 리스트형 이벤트 위임 어몽 1 어몽 2 어몽 3 이벤트 위임이란 button을 누르면 동작해야 할 때 img , span을 누르게되면 동작이 되지않는 상황에서 부모 노드로 위임을 해서 문제를 해결 할 수 있다. 물론 CSS 속성에서 pointer-evnets : none; 을 사용해서 비슷한 효과를 낼 수 있지만. 만약 동적으로 활당받은 노드에 대해서는 css속성을 입히기는 쉽지가 않다. 따라서 현재노드가 menu-btn이 아닌경우 부모 노드의 포인터를 따라올라가는 방법으로 구현 할 수 있다. let elem = e.target; while (!elem.classList.contains('menu-btn')) { elem = elem.parentNode; if (elem.nodeName == 'BODY') { elem = n.. CSS : 움직임, 클릭리스너 적용 .stage{ overflow: hidden; position: relative; /* vw : viewport width */ /* vh : viewport height */ width: 100vw; height: 75vw; /* 4:3비율 */ background-color: yellow; } @keyframes moving{ from { transform: translateX(0); } to{ transform: translateX(90vw); } } .among{ position: absolute; width: 100px; height: 100px; background-repeat: no-repeat; background-position: 50% 50%; background-size: contai.. CSS : relative 와 absolute 정복 아래와 같은 간단한 예제로 여러가지 실험을 해보자.. 1. relative를 위쪽에만 주었을 경우. .layout1{ position: relative; top: 20px; left: 20px; width: 200px; height: 200px; background-color: tomato; } .layout2{ width: 200px; height: 200px; background-color: skyblue; } layout1에는 top 20px, left 20px를 주었다. 당연히 현재를 기준으로 오른쪽 ,아래쪽으로 20px만큼 이동한다. layout2는 그대로이지만 겹치는 이유는 기준점이 되는 애가 relative인 녀석의 이동하기 전이 기준이 된다. 또한 layout2가 layout1에 먹히는 모.. 의미론적 태그 의미만 잇는 태그. 하지만 html을 작성할 때 의미를 중점으로 코딩해야 나중에 재사용가능성이 높아진다. article 본문 aside 광고와 같이 페이지의 내용과는 관계가 적은 내용들 details 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의 figure 삽화나 다이어그램과 같은 부가적인 요소를 정의 footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의 header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의 main 문서에서 가장 중심이 되는 컨텐츠를 정의 mark 참조나 하이라이트 표시를 필요로 하는 문자를 정의 nav 문서의 네비게이션 항목을 정의 section 문서의 구획들을 정의 (참고) time 시간을 정의 HTML 기술소개 기본문법 하이퍼텍스트.. caching 하루종일 인성 면접을 준비하다가 너무 심심하다... 캐싱에 대해서 간단한 예제와 학습을 할려고한다. Redis 나 Memcach를 사용하지만 아직까지 ehcaching을 사용하는 곳도 있다고 한다. 캐시라는 기술은 OS와 똑같이 속도가 빠른 시스템과 느린 시스템사이에서 자주 호출할것 같은 데이터를 미리 저장하고 사용하는 기술이다. Web에서 사용하는 캐시는 자주 등장하는 문구나, CSS 파일같은 것들을 웹브라우저 상에서 관리한다면 아주 빠를것이다. 어쨋든. 의존성 org.springframework.boot spring-boot-starter-cache org.springframework.boot spring-boot-starter-test test cache를 사용하고 싶은 프로젝트에 @EnableCa.. Redis 기본 사용법 여러 서비스들에서 Redis를 많이 사용한다. (사용하는 이유는 In Memory Database이기 때문에 빠르다는 점, Disk 에 저장하므로 서버 장애시 대처가능, No SQL 여러장점) 기본적으로 Redis를 사용하기 위해서 Redis를 다운로드해야한다. Local에서 테스트하기위해서는 현재 피씨에 다운로드 해야한다. github.com/MicrosoftArchive/redis/releases Releases · microsoftarchive/redis Redis is an in-memory database that persists on disk. The data model is key-value, but many different kind of values are supported: String.. HTTP 1.1 / HTTP 2.0 HTTP/1.1 vs HTTP/2.0 HTTP는 Hyper Text Transper Protocol 인것은 알고.. 당연히 버전 높은게 더좋겠지??(2013 나, 2020 나 가 더좋은 것처럼... 아닌가!?) https://www.popit.kr/나만-모르고-있던-http2/ 나만 모르고 있던 - HTTP/2 | Popit 자그마치 15년여의 시간을 웹 통신 프로토콜의 절대권좌의 자리에 올라 꿋꿋이 버텨오던 HTTP/1.1에 대한 문제점과 HTTP/2 프로코톨의 특징에 대해 살펴 보겠습니다. www.popit.kr 자그마치 15년여의 시간을 웹 통신 프로토콜의 절대권좌의 자리에 올라 꿋꿋이 버텨오신 당신의 똥고집에 세삼 존경심 마져 듭니다. 하지만 이제 그 자리를 내려 놓으셔야 겠습니다. 드디어 우리에.. MVC1 MVC2 MVC 패턴은 알지만 MVC1 과 MVC2의 차이점은 정확히 몰랐다. 오늘은 이것에 대해서 정리해보고자 한다. MVC1 패턴 MVC1패턴은 JSP가 View와 Controller의 기능을 담당한다. 따라서 이러한 구조는 쉽게 생각할 수 있고 로직을 한군데에서 처리하다보니 빠르게 개발이 가능하다는 장점을 가지고있다. Model은 JDBC Interface이고 DB를 조작할때 사용한다. MVC2는 내가아는 MVC패턴과 비슷해보인다. 웹 브라우저에 대한 요청들을 Controller에서 처리하고 화면은 View(JSP)가 담당하는 구조로 개발자와 디자이너의 구분이 확실한 구조이다. MVC2 는 MVC1보다 이해하기 어렵다고하는데.. 글쎄 이거는 개인적인 차이일것 같고 3계층으로 분리하는순간 분담으로 개발할 수 .. 이전 1 ··· 6 7 8 9 10 11 12 ··· 26 다음
