css41 챗 GPT 에게 퍼블리싱 시켜보기(말풍선 css html) AI에게 문의하세요! 챗 지피티에게 이 이미지를 보여주고 html 과 Css 로 구현해 달라고 했을 때의 결과물?!정말이지 GPT 덕에 빨라지는 퍼블리싱... ㅎㄷㄷ 2024. 11. 14. [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. [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. [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. 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. 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. [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. CSS 선택자 연습 게임 https://flukeout.github.io/# CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io CSS 선택자 연습 2023. 1. 8. Flex 속성 연습 하기 추가 사이트 다양한 샘플을 테스트해볼 수 있는 사이트 https://codepen.io/enxaneta/pen/adLPwv Flexbox playground ... codepen.io 플렉스 게임으로 익히기 http://www.flexboxdefense.com/ Flexbox Defense Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS! www.flexboxdefense.com 2023. 1. 8. 크리스마스, 눈 내리는 효과 만들기 (자바스크립트) 자바스크립트로 자연스럽게 내리는 눈 효과 만들기 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. 모바일 가로(수평) 스크롤 제거 하기 모바일 가로, 수평 스크롤 없애기 웹으로 작업하다가 모바일로 보면 체크하지 못한 부분중에 하나 숨어있는 영역까지 모바일에서는 보여지게 된다. CSS 추가 및 수정 html, body { max-width: 100%; overflow-x: hidden; } 그 외의 방법 위처럼 메타 태그를 수정하거나 추가하는 방법도 해결 방법중의 하나인데 내 경우에는 Css 추가 만으로 해결 되었다. 2022. 12. 8. [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. 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. CSS 활용 - 라디오 버튼 커스텀 스타일 라디오 버튼 스타일 변경 하기 브라우저 별로 다르게 보이는 라디오 버튼 디자인 - 리셋하고 다시 스타일 주기! HTML 커스텀스타일1 커스텀스타일2 CSS .checks { position: relative; height: 20px; padding: 30px; line-height: 20px; } .checks label { font-size: 16px; color: #666; margin-right: 10px; vertical-align: middle; } .checks input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, .. 2022. 3. 23. [CSS 활용] 화살표, css로 만들기 화살표 모양 이미지가 아닌 CSS 로 그리기 보통은 PNG 이미지로 사용하거나, 아이콘폰트를 사용하는 경우가 많지만, CSS 가상선택자를 이용해서 만들게 되면 사이즈, 컬러 등을 자유롭게 바꿀 수 있다. 위와 같이 단순한 선형태의 방향키 디자인이라면 CSS를 통해 만들어서 제어하는것이 편한것 같아서 종종 사용 하고 있다. HTML CSS .wrap { position: absolute; vertical-align: middle; top: 100px; left: 10px; } .wrap .arrow { position: relative; display: inline-block; width: 30px; height: 30px; overflow: hidden; vertical-align: middle; } ... 2022. 3. 17. 스크롤매직- 애플 홈페이지 구현하기 위한 플러그인 스크롤 매직 ScrollMagic은 사용자의 스크롤 위치에 반응하여 효과가 나타나게 함. 스크롤 하면 이미지가 나타나거나, 사라지거나 하는등의 효과를 구현할 수 있게 해주는데 대표적으로 애플 홈페이지 같은 느낌 만들기에 필요한 플러그인 사용방법 홈페이지에서 플러그인 다운로드 examples 폴더내에 index.html 열기 안에 css/script 경로 확인 홈페이지에서 다운로드 받아서 샘플을 보고 필요한 요소를 찾아 쓰면 된다. http://scrollmagic.io/ ScrollMagic The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user's current scro.. 2021. 11. 29. 깜박이는 효과, on-air 라이브 중 상태 (가상요소,애니메이션효과) 깜박이는 효과 css로 나타내기 녹화중인 것 같은 상태를 보여줄 수 있게 깜박이는 점을 넣는 CSS 온에어, 라이브 방송 중.. 등과 같이 현재 상태를 나타내기에 좋은 css 효과이다. 사용되는 css 속성 가상 요소 - :after 애니메이션 - animation 키프레임 - keyframes animation 속성 상세 css @Keyframe 속성 상세 Html Live Css .on_now_tag{ font-size: 14px; color: #fd183a; padding: 2px 10px; margin-left: -7px; font-weight: 500; } .on_now_tag:after { content: ""; display: inline-block; width: 10px; height: 1.. 2021. 11. 17. CSS 디스플레이(display)속성- CSS 디스플레이 속성 기본값 display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나. 대부분의 HTML 요소는 기본적으로 둘 중 하나를 display 속성 값을 가진다. 1. 블록(block) 2. 인라인(inline) 블록(block) { display : block }은 한 라인을 다 쓴다. , , , , , 대표적인 블록(block) 요소 인라인(inlne) { display : inline } 컨텐츠를 감싸는 크기만 갖는다. block속성과 다르게 줄바꿈이 되지 않고, 연달아 쓸경우 옆으로 붙게 된다. , , , 요소는 대표적인 인라인(inline) 요소 **크기를 변화시킬 수 없다. 너비를 주고 싶다면 속성을 block 이나 inline-block 로.. 2021. 10. 10. [CSS 활용]css 활용 예제 - 라디오 버튼을 활용한 선택 버튼 디자인 라디오 버튼 태그 활용 - 버튼 디자인 CSS모바일이나 웹에서 두 가지 중 하나를 택해야 하는 선택지가 있을 경우, 라디오 버튼 보다는 버튼 형태를 많이 사용하는데 기능은 라디오 버튼 기능을 갖지만 모양은 css로 버튼 형태로 주기. HTML라디오 버튼에서, 텍스트를 눌렀을때 같이 선택되게 하려면 id속성과 label for속성을 같게 설정한다. tag label 속성 미혼 기혼 CSS 타입 선택자/인접 선택자 - input[type=radio]+label 선택자 종류 상세 .select { padding: 15px 10px; } .select input[type=radio]{ display: none; } .select input[type=radio]+label{ display: inline-block.. 2021. 10. 7. 이전 1 2 다음 728x90 반응형
