728x90 Front-end49 [HTML/javascript] 간단하게 만드는 0.5단위 별점 인풋 input[type="range"] 개인프로젝트 웹에 별점 기능을 추가하려고 Star rating 예제를 찾다가 직접 만들었습니다검색하면 흔히 나오는 label과 input[type="radio"]를 쓰는 방식은 HTML 코드가 너무 길었고,챗지피티한테 간단한 코드를 부탁했더니 HTML은 간단한 반면에 동작 스크립트가 장황했습니다동작 방식이 마음에 들지 않았어요 내가 원하던 이 UI는 위 방식들로 하는 게 맞지만 뭐 정형성을 좀 벗어나면 어떤가~ input range 타입을 step 0.5로 쓰면 별점 0.5 단위로 매길 수 있고, 서버에 값 넘기기도 쉽고, 동작 방식도 단순할 거라 코드펜에서 토독토독 만들어 봤습니다 코드펜 예제See the Pen Simple input star rating by S.KIM (@wimmwell) on.. 2025. 10. 14. [Thymeleaf] 타임리프 레이아웃 적용하기(Spring Boot) - 레이아웃 의존성 필요X 우선 레이아웃이 적용된 index.html 결과물 스프링부트에서 타임리프 템플릿 레이아웃을 구현한 코드를 깃헙 레포지토리로 올렸습니다제가 타임리프 레이아웃이 헷갈려서 검색할 때 보니 참고할만한 레퍼런스를 찾기 어렵더라고요언젠가 누군가에겐 도움이 되겠거니 기대합니다 이 방법은 layout dialect 의존성이 필요하지 않습니다기본 타임리프 의존성만 있으면 됨 org.springframework.boot spring-boot-starter-thymeleaf 그리고 application.properties에 thymeleaf prefix를 따로 설정하지 않았습니다원래 명시 안해도 자동으로 적용이 된다고 합니다 타임리프 템플릿엔진은 기본적으로 src/main/resources 하위의 templates 경로.. 2024. 11. 14. [HTML/SCSS] Swiper 썸네일 갤러리 with 텍스트 슬라이더 메인 슬라이더와 연동되어 동작하는 작은 썸네일 슬라이더 (설명이 이상하네요 간단한 말로 뭐라 하지?) 레이아웃을 여기저기서 많이 보셨을 것입니다. Swiperjs에서는 Thumbs Gallery라는 이름으로 해당 기능 데모를 제공하고 있습니다. 데모 코드를 응용해 아래와 같은 슬라이더를 만들어 보았습니다. 우선 두 개의 Swiper가 필요합니다. 메인으로 사용할 슬라이더와 썸네일 갤러리로 만들 슬라이더(thumbsSlider)입니다. 스크립트에도 두 개의 Swiper를 정의해야 합니다. var swiperMini = new Swiper(".swiper-mini", { spaceBetween: 10, slidesPerView: 4, watchSlidesProgress: true, }); var swiper.. 2024. 2. 29. [HTML/SCSS] Swiper 하나에 여러 pagination(fraction+progressbar) 커스텀 적용하는 방법 이전에 Slick 슬라이더로 https://selinak.tistory.com/74 [javascript] Slick 슬라이더 페이징, 커스텀 내비게이션, 진행바 달기 - slick slider custom navigation Swiper는 페이징, 내비게이션, 프로그레스바 기능들이 이미 있지만 Slick은 호락호락하지 않다. 근데 Slick을 써야할 경우가 있을 수도 있잖아요,, Slick은 기본적으로 dots, arrows가 있는데 dots는 슬라이 selinak.tistory.com 다양한 Pagination을 만든 적이 있습니다. 이번엔 더 활용도가 높은 Swiper에서 다양한 Pagination을 만들어보겠습니다. Swiper는 기본 API와 CSS만으로 충분히 원하는 시안을 구현할 수 있을만큼.. 2024. 2. 23. [HTML/SCSS] Swiper로 만드는 자연스러운 슬라이드 이동 효과 Swiper 슬라이더를 활용한 부드러운 애니메이션 Swiper 슬라이더에서 현재 슬라이드에는 'swiper-slide-active' 클래스가 추가됩니다. 참고: https://swiperjs.com/swiper-api#parameters 이 swiper-slide-active 클래스에 스타일을 주면 현재 액티브된 슬라이드에만 스타일을 적용할 수 있습니다. 각 슬라이드의 item div에 padding-top을 주고 흑백 필터(grayscale)를 적용했습니다. .item { width: 100%; height: 100%; padding-top: 2.5rem; filter: grayscale(0.8); } position: absolute;로 자식 요소들을 원하는 레이아웃대로 꾸며 위와 같이 만들었습니다... 2024. 1. 29. [HTML] HTML Entity 코드로 특수문자 입력하기 📍HTML Entity 코드란? HTML 문서에서 특정 문자는 특별한 의미를 가지거나 렌더링 되지 않을 수 있습니다. 이런 경우에 HTML 엔터티를 사용하여 해당 문자를 나타냅니다. 예를 들어, ''와 같은 기호는 HTML에서 태그를 나타내는 데 사용되므로 이러한 문자를 일반 텍스트로 표현하려면 HTML 엔터티를 사용해야 합니다. -챗GPT- 즉, entity 코드는 일부 특수문자가 HTML에서 오류를 일으키거나 렌더링이 안될 때 사용하는 코드입니다. 대표적으로 공백 코드인 가 있습니다. 📍HTML코드와 HTML Entity 코드의 차이 HTML코드는 마크업 언어입니다. 일반적으로는 HTML코드에 특수문자를 직접 넣으면 되지만, 기능을 갖는 일부 특수문자는 Entity 코드를 사용하여 나타냅니다. 이렇듯.. 2023. 12. 7. [CSS] VSCODE emmet(에밋) 기능 더 빠르게 사용하기 요즘 컴퓨터 바꾼 후로 에밋 적용 속도가 좀 느려졌다고 느꼈다. 탭키나 엔터를 누르면 바로 챡 완성이 되어야하는데 살짝 기다렸다가 completions(완성 텍스트 박스?)가 뜬 후 눌러야 적용이 돼서 답답했다. 답답해! 0.1초도 기다리기싫어! 구글링ㄱㄱ https://stackoverflow.com/questions/66994447/vs-code-emmet-being-very-slow 아하 탭으로 트리거 체크? 1. VSCODE에서 command palette을 연다. (F1 또는 Command+Shift+P) 2. setting을 검색해 Open User Settings에 들어간다. 3. 세팅 검색창에 emmet을 검색한다. 검색결과에서 Emmet: Trigger Expansion On Tab 을 .. 2023. 11. 30. [CSS] filter:drop-shadow()와 box-shadow의 차이점 둘 다 그림자 효과를 준다는 공통점이 있지만 요소에 적용되는 범위가 다르다. box-shadow: 요소의 상자에 그림자를 추가하여 뒷면에 그림자 효과를 생성합니다. filter: drop-shadow(): 요소 전체에 드롭 셰도우 효과를 적용하며, 이는 요소의 상자에만 국한되지 않고 내부의 투명하거나 반투명한 부분에까지 확장됩니다. div { display: flex; width: 50px; height: 50px; border: 1px solid gray; margin: 1rem; align-items: center; justify-content: center; } .drop {filter: drop-shadow(0 0 5px rgba(0,0,0,.5));} .box {box-shadow: 0 0 5p.. 2023. 11. 28. [CSS] Hover 하면 현재 배경 색상에서 어두워지게/밝아지게 하는 CSS Trick 버튼에 각각 오버할 때 현재 색상에서 어두워지게 하고 싶은 경우, 아래 코드처럼 따로 색상 hover를 주고 계신가요? /* 예시 */ .btn--red {background-color: brown;} .btn--red:hover {background-color: #62191b;} .btn--green {background-color: green;} .btn--green:hover {background-color: #074d09;} background-image 속성을 이용하면 한번에 현재 색상에서 어두워지게 할 수 있습니다. background-image: rgba(0,0,0,.4); 검은 색상(0,0,0)에 40%의 투명도를 준 값이죠. hover에 위와 같이 값을 주면 각각 현재 색상에서 40%만큼.. 2023. 10. 25. 이전 1 2 3 4 ··· 6 다음 728x90
