퍼블리싱75 [html,js,css] ai 클로드 활용, 플러그인 없이, 스와이프 슬라이드 만들기 슬라이드를 넣고 싶을때, 주로 플러그인을 활용하지만 종종, 간단한 슬라이드가 필요할때가 있습니다. 그래서 모바일에서 터치 슬라이드로 활용할 수 있는 슬라이드를 만들고자,클로드 ai를 활용해서 슬라이드를 제작해 봤습니다. 코드 생성은 클로드 https://claude.ai/ 를 활용했습니다. 클로드 ai 요청 명령어" html 과 css 만으로 모바일에서 좌우로 스와이프 되는 기능이 있는 슬라이드를 만드려고해. 오른쪽이나 왼쪽으로 스와이프 하면 다음이나 이전 페이지로 넘어가는거야. 각 페이지에는 정중안에는 h3의 텍스트가 위치해 있어. 페이지는 무한정으로 생산 가능하게" 1. html 첫번째 슬라이드 .. 2025. 3. 12. 리액트 네이티브, <br> 태그 줄바꿈 하기 리액트 네이티브에서는 HTML의 태그를 직접 사용할 수 없습니다.대신 다음과 같은 방법들로 줄바꿈을 구현할 수 있습니다: 개행 문자 사용 {`2024.06.21 13:00 \n ~ 2024.06.21 14:00`} 여러 Text 컴포넌트 사용 2024.06.21 13:00 {"\n"}~ 2024.06.21 14:00 줄바꿈이 필요한 부분을 분리 2024.06.21 13:00 {"\n"} ~ 2024.06.21 14:00 이 중 첫 번째나 두 번째 방법이 가장 간단하고 일반적으로 사용됩니다.\n은 줄바꿈 문자로, 텍스트를 새 줄로 나눕니다. 2025. 2. 4. [웹폰트 사용방법] 웹에 최적화된포맷 - woff2 웹사이트 성능을 최적화하는 방법: 가벼운 웹폰트 포맷 선택하기! 웹폰트 종류가 여러개 인데, 무엇을 선택 해야 할지 확실히 잘 모르는 경우가 있어요. 폰트 선택은 웹사이트 로딩 속도와 사용자 경험에 직접적인 영향을 미치기에 중요합니다! 예를들어 저는 pretendard 서체를 사용하려고 하는데, 홈페이지에서 제공하는 폰트의 포맷 종류가 아래와 같이 여러개 입니다. 출처 : https://cactus.tistory.com/306?category=1007051 폰트 포맷 종류.otf, .ttf: 고품질이지만 무겁고, 웹에서는 비효율적..woff, .woff2: 웹에 최적화된 경량 포맷. 특히 .woff2는 파일 크기가 작아 로딩 속도가 빠름..woff2 포맷의 이점파일 크기 작고, 압축률 높아 .. 2024. 8. 29. [CSS] 변수를 음수로 변환하는 방법 CSS 변수를 사용하면 여러 스타일 속성 값을 쉽게 재사용할 수 있어유지보수가 편리하고 코드의 가독성도 향상됩니다. 종종 CSS 변수 값을 음수로 변환해야 할 때가 있습니다. 예를 들어 아래 처럼 마진 값을 주었을 때, 위 아래 마진이 40px이 되어 버리죠.리액트나 next js 처럼 모듈이나 컴포넌트를 활용하는 경우, 마진 병합이 일어나지 않게 되어 해결 방법으로 같은 변수를음수로 적용하기로 했습니다. 1. CSS 변수 정의CSS 변수를 정의합니다. 공통 마진 20px 변수로 지정합니다. :root { --margin_20: 20px;} 2. calc() 함수를 사용하여 변수 값을 음수로 변환하기CSS에서 음수 값을 적용하려면 calc() 함수를 사용해야 합니다.calc() 함수는 CSS 변수.. 2024. 8. 2. [Javascript, css] 스크롤 내리면 카운팅 시작 되는 소스 안녕하세요! 카운팅 숫자의 업그레이드 버전을 알아보겠습니다. 우선 구현이 어떻게 되는지 결과 부터 보시죠!스크롤을 내려 주세요! Result Html Count number 사용자 명 방문자 명 대기시간 분 대기문서 건 JavaScript function animateValue(id, start, end, duration) { var range = end - start; .. 2024. 6. 25. [CSS]마우스 호버시 아이콘 모양 변경(사이드바 보기/감추기역할) 주로 사용된 csstransform:hover 1. html 2. CSS.arrow { z-index: 999; top: 50%; left: 0px; position: fixed; transform: translateX(100px) translateY(-50%) rotate(0deg) translateZ(0px); transition: transform .3s ease-out; cursor: pointer !important;}.arrow .icon-wrap { justify-content: center; align-items: center; width: 2rem; he.. 2024. 6. 19. [Javascript, css] 라이트모드/다크모드 설정 day night mode 요즘 사이트들은 대부분 낮/밤 모드가 있습니다.이 부분을 구현하는 방법은 여러가지가 있는데,저는 아래와 같은 방식으로 구현해 봤어요. 다크모드 설정 방법 1. 다크모드 버튼 클릭시 dark 클래스 추가 - 스크립트로 제어 2. 다크모드 버튼 아이콘 이미지는 백그라운드 이미지로 제어 - 클릭 시 css로 아이콘 변경 가능 3. root 속성으로 작성된 css를 활용 - 다크모드에서 일괄 수정 4. 아이콘 이미지의 경우(SVG) 반전 효과 사용 : css의 filter:invert(1) 속성 활용 위의 사항들을 순서로 하여 마크업과 CSS 제작을 진행해 봅니다. 최종 view 모습 (하단에서 확인) 라이트 모드 다크모드 HTML .. 2024. 6. 14. [jQuery]셀렉트박스+제이쿼리, 셀렉트 선택 시 내용 보여지게 셀렉트 박스에서 선택 시 해당 내용으로 이동하게 하는 제이쿼리 소스 입니다. 별도 페이지 생성이 필요 없으며 id 값으로 해당 내용을 감추거나 보여줍니다. 적용 이미지 위 디자인과 같이 책보는 느낌처럼 활용도 가능한 소스 입니다. 탭과 유사한 기능이라고 보시면 됩니다. HTML 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text Chapter 2 : Select another text Chapter 3 : Selet third text box 1. Step1 : Lorem Ipsum is simply dummy text Chapter 1 : Lorem Ipsum is simply dummy text.. 2024. 2. 22. [jQuery] mouseenter , mouseleave 마우스 호버 효과 - 마우스 엔터 마우스 호버효과처럼 보이지만 조금 다른 mouseenter/mouseleave 효과 입니다. 마우스가 특정 요소 위에 들어오거나 벗어날 때만 반응하므로 드롭다운 버튼이나 툴팁 등의 UI에서 주로 사용됩니다. 주로 사용되는 부분 드롭다운 버튼 인풋 박스 HTML KR KR EN CN CSS #Lang > * { display: inline-block; vertical-align: middle; } #Lang .lang_list { position: relative; width: 50px; text-align: center; font-size: 14px; } #Lang .lang_list > a { display: block; width: 100%; height: 40px; line-height:2.5; f.. 2024. 1. 31. [javaScript] 클릭 시 클래스 명 변경 되는 자바스크립트 클릭시 자동으로 아이콘의 클래스 명이 변경되게 하는 소스 입니다. 아이디 저장 과 같은 기능뿐 아니라, 클래스 명이 토글 형태로 변경 되어야 하는 부분에 사용할때 가능 합니다. *방법 : 폰트 아이콘의 클래스명을 제어해서 아이콘 모양을 변경해줍니다! html 아이디 저장 css .login_save{ margin:3em } .login_save i{ font-size: 26px; padding-right:3px; cursor:pointer; font-weight:400; color:#999; letter-spacing: -1px; } .login_save i.xi-check-circle{ color:#000 } JavaScript const logo = document.getElementById("sta.. 2023. 11. 29. [js/css] 스크롤바 커스텀 디자인 mCustomScrollba, 스타일 플러그인 mCustomScrollbar는 사용이 간편해서 많이 사용되는 커스텀 스크롤바 중 하나 입니다. 사용하다 보니 자꾸 손이가는 플러그인중 하나라서 사용법과, 자료를 함께 공유하고자 합니다.🙆 특징 다양한 디자인이 있다. 컨텐츠에 가로값에 영향을 주지 않는다. 가로스크롤 생성이 가능하다 사용방법 css / js 소스를 불러온다 사용할 div에 클래스를 추가해준다 스크립트를 작성해 준다 1. 소스불러오기 2. class 추가 하기 ............. 3. 스크립트 작성 이 스크롤바의 최대 장점인 다양한 디자인 적용입니다. 아래 사이트에 들어가시면 여러가지 디자인을 확인할 수 있습니다. https://manos.malihu.gr/repository/custom-scrollbar/demo/examples/s.. 2023. 11. 24. [css]구글 아이콘 웹폰트 사용방법 저는 웹 퍼블리싱을 할때 주로 웹폰트아이콘을 사용합니다. 아이콘 이미지 보다도 사용성이 무척 좋기 때문인데요. 사용방법 구글 웹아이콘(바로가기 url) 로 들어가서 사용하고자 하는 아이콘 선택 fillter 옵션에서 - fill / weight / 등 옵션 선택하기 경로 및 복사 하기 **별도로 저장해서 이미지로도 사용이 가능합니다. 1. 아이콘 선택 (원하는 스타일로 맞춤) 2. 스타일 링크 복사 3. 스타일 css 복사 4. html로 적용 home check_box toggle_off download_for_offline result 라인스타일(line icon) 꽉찬스타일(fill) https://fonts.google.com/icons?icon.set=Material+Symbols 다음엔 폰트 .. 2023. 11. 23. [css] 말줄임 표시 방법 , 1줄 or 2줄 일때 말줄임표는 정말 자주 쓰입니다. 스크립트로 처리하기도 하지만 Css로도 처리가 가능합니다. 사용된 css - white-space:nowrap; 자동줄바꿈방지 - overflow-x:hidden; 넘어가는 것 안보이게 - text-overflow:ellipsis; 넘어서 안보이는 텍스트 ... 표시 *주의 : width값 지정 필요 html 텍스트가 길어지면 말줄임표가 자동으로 생깁니다. 텍스트가 길어지면 말줄임표가 자동으로 생깁니다.텍스트가 길어지면 말줄임표가 자동으로 생깁니다.텍스트가 길어지면 말줄임표가 자동으로 생깁니다. css body{ color:#555; } .wrap{ display: flex; align-items: center; height: 200px; justify-content: c.. 2023. 11. 22. [css] white-space 여백 공백 처리 속성(pre, pre-wrap,pre-line) , br 태그 먹을까? html에 내용을 넣을때, white-space 속성을 사용하는 경우가 있습니다. 여백과 공백을 다루는 white-sapce 속성에 대해서 조금더 자세히 알아봤어요! 줄바꿈 부분이 각 속성마다 다르기에 문득,, br 태그를 통해 줄바꿈이 가능한지 궁금 했습니다. 공백과 들여쓰기 줄바꿈 normal 공백 여러개가 있어도 1개만 적용 자동 줄바꿈 nowrap 공백 여러개가 있어도 1개만 적용 줄바꿈 없음 pre 공백 있는 그대로 표시 줄바꿈 없음 pre-wrap 공백 있는 그대로 표시 자동 줄바꿈 pre-line 공백 여러개가 있어도 1개만 적용 자동 줄바꿈 break-spaces 공백 있는 그대로 표시 자동 줄바꿈 pre / pre-wrap / pre-line 속성을 각각 비교해 보기로 했습니다. - 같은.. 2023. 11. 21. [Css] 배경 blur 버튼 만들기 (애플 공식 홈 st. 글래스모피즘버튼 ) 버튼 뒤쪽에 blur 효과가 적용되어 버튼을 좀더 도드라져 보이게 합니다. 공식 애플 웹사이트를 방문했다가 위와같은 스타일의 버튼이 적용되어 있는 것을 보고 만들어 봤어요! 사실 이 스타일은 글래스모피즘 이라고 불립니다. 사용되는 css backdrop-filter 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다. 요소 "뒤"에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게는 설정해야 합니다. 적용 방법 backdrop-filter: blur(2px); 버튼으로 만들기 결과 css .btn_blur { backdrop-filter: blur(4px); background-color: rgb(66 66 69/70%); border-radius:.. 2023. 11. 13. 모바일에서 input 태그, number 숫자 자판(키패드) - 안드로이드/아이폰 모바일 퍼블리싱 - 인풋 타입에서 숫자 자판 나오게 하기 input type 으로 숫자, number을 지정할 때 일반 자판이 아닌 숫자 자판을 나오게 하려면 아래와 같이 지정해 주면 됩니다. 안드로이드 아이폰, IOS 위처럼 적게 입력하면 Android OR IOS 모두 숫자키패드가 나옵니다. 참고 : https://stackoverflow.com/questions/25425181/iphone-ios-presenting-html-5-keyboard-for-postal-codes 2023. 10. 16. CSS 애니메이션 타이밍 효과 비교 (linear, ease, ease-in, ease-in-out) 주 사용 요소 animation-timing-function, 대표적인 설정값 linear : 일정한 속도로 진행 ease : 천천히 시작되고 속도가 줄어들면서 끝난 ease-in : 천천히 시작 ease-out : 빠르게 시작 ease-in-out: 빠르게 시작되어 평균속도 유지 Result 각 버튼을 클릭하면 속도확인 가능합니다. Html 기본값 linear ease ease-in ease-out ease-in-out Css div{ margin:50px auto; display:block; vertical-align: top; width:100px; height:100px; background:#202228; border-radius:6px; text-align:center; line-height:.. 2023. 8. 2. [Css 활용] 말풍선 위 아래로 움직이는 효과, 키프레임 주 사용 CSS - animation - keyframe + animation-timing-function + flex - 정가운데 배치 Html Css .wrap { height:100vh; display:flex; align-items:center; justify-content:center; } .moving { animation: move 0.7s ease-in 0s infinite alternate; margin-top: 0; width:80px } @keyframes move { 0% {margin-top: 0px;} 100% {margin-top: 10px;} } Result *result 클릭해 주세요. 2023. 8. 1. [웹 디자인/퍼블리싱] 디자인시 PC 화면 사이즈 정하기(+미디어쿼리 분기점) 웹디자인/ 퍼블리싱 디자인 할 때 화면 크기를 어느정도로 잡아야 할지 정확히 잘 모를때가 있다. 가로값 기본은 1980이라면 높이값의 경우 모니터 사이즈인 1080이 아닌 약 1053 으로 해야 한다(상단URL 부분등 제외) 디자인 작업할때 자주 쓰는 해상도와 높이값 1. 1920 x 1080일명 FHD(Full High Definition)라고 불리는 해상도24인치 데스크탑, 보편적인 모니터 크기의 해상도XD 나 figma 에서 작업시 뷰포트는 1053px💡 브라우저의 상단 부분의 URL 과, 북마크 등의 높이값을 빼고 작업을 한다. viewport는 약, 1053px 정도로 설정 2. 1536 x 864FHD 노트북의 해상도1920 x 1080에 125% 배율을 적용한 해상도노트북 폰트 사이즈 기본 .. 2023. 7. 6. css background 속성 / 단축 속성 / 주의점 css 상에서 백그라운드로 이미지를 넣을 때 주로 꽉찬 배경 이미지를 넣고자 할때 쓰인다. 자주쓰지만 또 자주 헷갈리는 속성중에 하나. 속성명이 길기 때문에 단축 속성으로 적어 주는게 좋다. 특히 단축 속성엔 유의해야할 몇가지를 잘 알아두면 좋을 듯 하다! 1. css background 속성 종류 background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment 2. Css 단축 속성 background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cli.. 2023. 6. 26. 모달팝업, 모달창, 이미지 슬라이드 제이쿼리 플러그인 - 무료(MIT) Super Box - 단순한 모달 창 기능 - MIT 라이센스 https://bpier.re/projects/jquery_superbox/ jQuery SuperBox! The english version of this page has been generously translated from french by Anna Mondeteguy. jQuery Superbox! is a script which allows you display windows with the lightbox effect. This script is a plugin for jQuery (1.3.x). The minified version of Supe bpier.re ColorBox - 영상팝업 가능 - iframe 팝업 가능 - 슬.. 2023. 6. 16. [CSS 활용] css로 블러 효과(포토샵 blur 효과 주기) HTLM Whereas disregard and contempt for human rights have resulted Go ahead, resize me. CSS @import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Permanent+Marker&display=swap'); body { background: url("https://images.unsplash.com/photo-1593418270780-4c6e6b7eb5af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80") no-repeat ce.. 2023. 6. 15. 크리스마스, 눈 내리는 효과 만들기 (자바스크립트) 자바스크립트로 자연스럽게 내리는 눈 효과 만들기 Html css body,div{ margin:0; padding: 0; } .snow{ width:100%; height: 100vh; background-image: url(https://images.unsplash.com/photo-1491002052546-bf38f186af56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2200&q=80); background-size:cover; } JS function Snowy() { function t() { window.requestAnimationFrame(t), $.clearRect(0, 0.. 2022. 12. 22. CSS 이미지사이즈 맞추기 - object-fit & background 비교 CSS를 이용해 아래처럼 이미지를 가득 채워 넣는 방법으로 object-fit 과 background-size를 활용하는데 결과는 거의 유사하다 코드의 간결함과 호환성 부분을 체크한 뒤 활용 하면 될 듯. object-fit 장점 : 코드가 간편, 이미지나 비디오 적용 가능 단점 : IE 미지원 html object-fit: fill object-fit:contain object-fit: cover css .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } background-size 고정된 이미지라면 css 속성에서 background-imag 에다 넣어주고 서버에서 받아올 경우 아래처럼 이.. 2022. 12. 21. [css] flex로 간단하게 수직&수평 가운데 정렬 로그인 페이지나 로딩 페이지 등을 제작할 때 페이지 전체의 수직, 수평으로 요소를 배치하는 경우가 많다. 보통 margin: 0 auto 로 수평 정렬을 쉬이 되나 수직정렬을 쉽지 않다. css flex를 사용하면 좀더 손쉽게 수평, 수직 정렬이 가능하다. 결과 HTML Download CSS body{ height: 100vh; background: #f5f5f5; } .flex_container{ height: 100%; display:flex; justify-content:center; align-items:center; } .flex_item{ margin-top:-20px; text-align:center; } .flex_item p{ font-size: 16px; color: #999; mar.. 2022. 12. 20. [JS 활용] 제이쿼리, 상단으로 자연스럽게 가는 버튼만들기, scrollTop, fadeIn, fadeOut 클릭시 최상단으로 자연스럽게 올라가게 해주는 제이쿼리 소스 사이트 내용이 길 경우 가급적 추가해 주면 좋은 요소 결과 화면 *스크롤 해보세요 1. 처음엔 안보여짐 2. 스크롤을 일정부분 내리면 보여지게함 3. 상단으로 자연스럽게 이동 4. 상단에서 다시 안보여지게 함 html Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen boo.. 2022. 12. 8. 모바일 가로(수평) 스크롤 제거 하기 모바일 가로, 수평 스크롤 없애기 웹으로 작업하다가 모바일로 보면 체크하지 못한 부분중에 하나 숨어있는 영역까지 모바일에서는 보여지게 된다. CSS 추가 및 수정 html, body { max-width: 100%; overflow-x: hidden; } 그 외의 방법 위처럼 메타 태그를 수정하거나 추가하는 방법도 해결 방법중의 하나인데 내 경우에는 Css 추가 만으로 해결 되었다. 2022. 12. 8. [노션] 아이프레임으로 노션 넣기 노션페이지 iframe 으로 embed 하기 노션으로 어떤 문서를 만들고, 그 내용을 홈페이지에 넣고 싶었다. 그래서 아래처럼 링크 주소를 따서 홈페이지에 아이프레임으로 넣어 보았다. 결과 화면 노션에서 아이프레임을 지원하지 않는건가.. 구글 검색을 해보니 해당과 관련한 답변이 있었다. Q. 노션을 홈페이지에 아이프레임으로 임베드 하는 방법 I recently had the same issue, it looks like Notion doesn't allow iframes, it blocks the requests. I found this tool online: www.notioniframe.com to generate an embeddable URL and the iframe HTML code to i.. 2022. 12. 6. [book]Do it 자바스크립트 입문, 책 요약 코딩과 프로그래밍의 차이 코딩은 소스코드를 작성하는 행위 프로그래밍 : 문제를 분석하고 논리적으로 해결할 수 있는 방법을 찾아 코딩하는 과정까지 포함하는 넓은 개념 자바스크립트로 할 수 있는 일은? - 웹사이트를 동적으로 만듬 - 웹 브라우저에서 실행되는 프로그램을 만듬 - 서버를 구성, 서버용 프로그램을 만들 수 있음 (노드제이에스 자바스크립트 프레임 워크를 사용하면 서버 프로그램을 쉽게 개발 가능) 자바스크립트의 특징은? - 모든 웹 브라우저에서 작동 - 웹브라우저에서 실행결과를 즉시 확인 가능 - 다양한 용도의 프로그램을 만듬 - 다양한 자바스크립트 공개 API 사용가능 - 다양한 라이브러리와 프레임 워크 사용 + 라이브러리 : 제이쿼리 +프레임워크 : 리액트, 앵귤러, 뷰 자바스크립트 소스 작성 .. 2022. 12. 3. 패럴렉스 parallax-scroll 플러그인 https://parallax-scroll.aenism.com/ Parallax-Scroll by Aen Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if their background-attachment property is between scroll and fixed, similar to the parallax scrolling effect you see on Spotify and is loosely based on Peder Andr parallax-scroll.aenism.com 2022. 11. 16. 이전 1 2 3 다음 728x90 반응형
