퍼블리싱69 [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]형광펜효과- 가상클래스활용 형광펜 효과는 텍스트를 강조하기 좋은 스타일 이예요. 가상클래스를 활용해서 간단하게 원하는 곳에 형광펜 효과를 줄 수 있습니다. 사용된 CSS - 형광펜 효과 : 가상클래스 : before - 서체 변경 : 웹폰트 - 그래디언트 컬러 배경 : background:linear-gradient (to right, yellow 0%, lightblue 100%) - 여백 활용 : white-space : pre-line html 정호승 / 수선화에게 울지마라 외로우니까 사람이다 살아간다는 것은 외로움을 견디는 일이다 공연히 오지 않는 전화를 기다리지 마라 눈이 오면 눈길을 걷고 비가 오면 빗길을 걸어가라 갈대 숲에서 가슴 검은 도요새도 너를 보고 있다 가끔은 하느님도 외로워서 눈물을 흘리신다 새들이 나뭇가지에.. 2023. 11. 20. [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. [css 활용] 하이라이터, 형광펜 효과 주기 주 사용 CSS 요소 - 가상 선택자 : before, hover - background: linear-gradient - transition html 마우스를 글자에 올리면 형광펜이 그어지는 효과예요. 그라디언트 컬러를 줄수도 있어요! :-) css body{ background-image:url(https://images.unsplash.com/photo-1601662528567-526cd06f6582?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=830&q=80); background-size:cover; background-position:center center; } .wrap{ mar.. 2022. 11. 3. [JS 활용]한글, 타이핑 효과 주기 타이핑 효과는 여러 모로 쓰임이 많습니다~ 이전에 찾은 오픈 소스를 찾아 활용했는데, 기존 오픈소스에는 뒤에 깜빡임 커서가 없어서 추가 해주었어요! Html반짝이는 하루, 그게 오늘이야. intervalType:80 , 숫자가 높을수록 타이핑 속도가 빨라짐 Css @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap'); body{ background-image:url(https://images.unsplash.com/photo-1567653418876-5bb0e566e1c2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&.. 2022. 10. 31. 한글 타이핑 효과 라이브러리 (오픈소스) 한글 타이핑 효과를 만드신 분이 계시다..(감사하게도😂) 외국 타이핑 효과는 한글에 적용하면 어색해 져서 아쉬움이 가득했는데, 이 라이브러리를 만드신 분은 한글의 특징을 살려 타이핑 효과를 주었다. 한글 타이핑 효과 라이브러리 한글 두벌식 자판에서 한 글자씩 타이핑되는 과정을 보여줄 수 있는 라이브러리입니다. https://sduck4.github.io/type-hangul/#home type-hangul: ⌨️ 한글 타이핑 효과 라이브러리 한글 두벌식 자판에서 한 글자씩 타이핑되는 과정을 보여줄 수 있는 라이브러리입니다. sduck4.github.io 라이센스 type-hangul by SDuck4. The source code is licensed MIT. *MIT 라이센스 - MIT 라이센스란 수.. 2022. 10. 26. sass란? 개념 및 사용 방법 Sass란? Css 전처리기(Css Preprocessor) 그렇다면,,, Css 전처리기는 뭐지? 말그대로 전에 처리해 버린다는 뭐 그런 뜻인 듯 왜 써야 할까? 👉 Css의 단점을 해소 Css 단점 - 불필요한 반복 - 가독성이 나쁨- 기타 등등... Css 장점 - 웹브라우저가 읽을 수 있다. - 사용하기 쉽다. Sass 처리 프로세스 Sass 장단점 Sass 장점 - 변수의 사용 → css 속성 통일 - 조건문과 반복문 사용 → 동적 css 관리 등등,, Sass vs Css /* Sass */ .circle $size: 100px width: $size height: $size border-radius: $size * 0.5 /* Css */ .circle { width: 100px; heigh.. 2022. 10. 26. [CSS 활용]헤더가 고정 되는 테이블, html css 버튼 클릭 -> 지정한 내용 복사 (해시태그내용 복사) 사용되는 요소 이미지 맵 태그안에 usemap 속성 / 제이쿼리 소스 html 헤더 헤더02 헤더03 111111111 222222222 333333333 444444444 111111111 222222222 333333333 444444444 제이쿼리 소스.tableWrapper { border-top: 3px solid #168; width: 400px; height: 300px; overflow: auto; position: relative; } #userListTable { height:600px; } #userListTable th { width: 400px; position: sticky; top: 0px; } .bluetop { bord.. 2022. 4. 8. [JS 활용] 탭 영역 만들기 - 자바스크립트, css , html5 활용 다양하게 활용이 가능한 탭 부분 디자인 및 코딩 소스 제이쿼리로도 되지만, 스크립트로도 구현이 되는 부분이라 서칭 해서 정리 해 봄. 홈페이지 구성할때, 50% 이상 사용되는 디자인 및 기능이 아닐까 싶다. 네이버 메인 HTML 문의 사항 고객 문의 첫번째 탭 영역 문의 사항 등이 표기 되는 부분 두번째 탭 영역 고객 문의 등이 표기 되는 부분 CSS.wrap { padding: 10px; } .tab { border-top: 1px solid #E2E2E1; border-right: 1px solid #E2E2E1; width: 400px; } .tab .tabitems { width: 100%; position: relative; } .tab .tabitems .item { display: inlin.. 2022. 3. 29. 이전 1 2 3 다음 728x90 반응형
