목록전체 글 (172)

Posis

[HTML,CSS] Floating Label 직접 만들기

이번 포스팅에서는 Bootstrap에 Floating Label을 직접 만들어 보겠습니다. Floating Label 위 GIF는 Bootstrap 5.0v의 Forms - Floating labels의 예시입니다. 위와 같이 똑같이 만들지는 못하지만 비슷하게 만들어 보겠습니다. HTML Our Newsletter Full Name Email Address CSS *{ margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { position: relative; padding: 70px 40px; background: #fff; borde..
HTML, CSS 2021. 10. 27. 03:27
[JavaScript] 이벤트 버블링(Bubbling)과 캡쳐링(Capturing)

이번 포스팅에서는 이벤트 버블링과 캡쳐링에 대해서 다뤄보겠습니다. 이벤트 버블링(Bubbling) 버블링이란 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 계속해서 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는 것을 말합니다. See the Pen Untitled by MinJaeHong (@jaehong94) on CodePen. 위에 예시를 클릭해보면 P 상자를 클릭할 경우: P -> DIV -> FORM -> Body -> HTML 순으로 알림 창이 뜨는 것을 확인할 수 있습니다. DIV 상자를 클릭할 경우는 DIV 부터 HTML 순으로 알림 창이 뜹니다. 이러한 현상, 클릭한 요소에서 최..
JavaScript 2021. 10. 26. 15:17
[JavaScript] Carousel.js 슬라이드

이번 포스팅은 Carousel.js의 공식 Github페이지를 토대로 작성하였습니다. DEMO: https://ryujun.github.io/demos/JavaScript/Carousel/ Github: https://github.com/RyuJun/Carousel.js 지원 chrome, firefox, while 등등의 모던 브라우저 및 ie9 버전 이상에서 지원함 ( ie9 에서는 transition이 적용되지 않아서, Motion 등이 default로 적용됨 ) 설치 및 사용방법 일반 웹 페이지 웹 페이지에서 사용하려면 html파일 ... carousel.js는 es6++문법으로 작성되어 ie에서 작동하지 않습니다. carousel.min.js는 트랜스 파일링이 완료된 파일로써 이를 사용하면 ie..
JavaScript/라이브러리 2021. 10. 25. 03:29
[JavaScript] Ajax 란?

Ajax(Asynchronous JavaScript and XML) 란? JavaScript를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 새로고침(Reloaded) 하지 않고 필요한 부분만 렌더링 하는 프로그래밍 방식을 말합니다. Ajax의 장단점 장점 페이지 이동 없이 고속으로 화면을 전환할 수 있다. 서버 처리를 기다리지 않고, 비동기 요청이 가능하다. 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다. 플러그인 없이도 인터렉티브 한 웹페이지 구현할 수 있다. 단점 Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다. HTTP 클라이언트의 기능이 한정되어 있다. 페이지 이동없는 통신으로 인한 보안상의 문제 지원..
JavaScript 2021. 10. 20. 19:45
[JavaScript] 여러 개 모달창 닫기

이번 포스팅은 여러 개 모달창 또는 대화상자같은 창들을 원하는 순서대로 제거하는 것을 구현해보겠습니다. 완성된 화면 HTML Alert1 X Alert2 X Alert3 X Alert4 X CSS .alert-box { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; border-radius: 8px; height: 80px; padding: 20px; box-sizing: border-box; } .alert-box:nth-of-type(1) { background: indianred; } .alert-box:nth-of-type(2) { background: royalblue; } .alert-b..
JavaScript 2021. 10. 19. 04:59
[jQuery] 이미지 슬라이드 만들기

이번 포스팅에서는 라이브러리 없이 JavaScript 코드만을 사용해서 이미지 슬라이드를 구현해 보겠습니다. 구현하는 방법은 무수히 많기 때문에 이 사람은 이런 식으로 구현했구나라고 참고하시면 될 것 같습니다. HTML Next Prev Bootstrap에 container만 이용했습니다. CSS .slide { overflow: hidden; position: relative; } .slide-container { width: 300vw; height: 400px; display: flex; transition: all 0.8s; } .slide-box { width: 100vw; } .slide-box:nth-of-type(1) { background: center/cover no-repeat url..
jQuery 2021. 10. 19. 03:59
이전 Prev 1 ··· 18 19 20 21 22 23 24 ··· 29 Next 다음