728x90 반응형 웹퍼블리셔30 [CSS] overscroll-behavior: contain의 역할 기본적으로 한 박스 안의 스크롤이 끝나면 부모 요소의 스크롤로 넘어간다. 이 것을 scroll chaining 스크롤 체이닝이라고 한다. 이 스크롤 체이닝을 막고싶은 경우 사용하는 속성이 바로 overscroll-behavior이다. 스크롤 박스에만 적용되는 속성이다. 기본 상태에서는 이렇다. 박스 안에서 스크롤이 끝나면 다음 스크롤로 넘어간다.overscroll-behavior: contain;을 적용하면이렇게 박스 안에서 스크롤이 끝나도 더 이상 스크롤이 되지않고 머무른다. (부모 요소에 커서를 대고 스크롤 하면 당연히 스크롤 됨) overscroll-behavior: none;도 부모요소의 스크롤을 제한하여 contain과 같은 효과를 낸다. 사실은 서로 다르다고하는데 외적으로는 큰 차이를 느끼기 .. 2023. 6. 18. 반응형 웹사이트 미디어쿼리 브레이크포인트 잡을 때 참고사항 반응형 웹에 흔하게 쓰이는 브레이크포인트를 챗GPT에게 물어봤다. 통계적으로 3개의 최고의 브레이크포인트가 몇이냐 물어봤더니 자기는 실시간 통계를 알지못하지만 업계에서 통상적으로 쓰이는 것이라며 알려주었다. 그런데 개인적으로 요즘은 1920x1080 PC가 대부분이며, 아이패드 프로는 1366x1024 (아마도?), 갤탭은 그보다 높은 해상도도 있다. 딱 세가지로만 나누기엔 웹 뷰포트가 너무 다양화되었다. 768도 아이패드미니 해상도임. 아이패드 에어는 820이라는 점. 2023년 전세계 데스크톱 해상도 통계를 살펴보자 https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide Desktop Screen Resolution Stats Wor.. 2023. 6. 1. [HTML/CSS] DIV 안에 이미지 가득 차게 중앙 정렬하기 같은 비율의 이미지만 사용한다면 수직, 수평 중앙정렬이 어렵지않겠지만 클라이언트들은 보통 제각각의 이미지를 사용하잖아요?그래서 이미지 박스를 작업할 때는 어느 비율의 이미지든 박스에 풀로 채워지며 센터 정렬이 되게 해야한다. 이런 세로 이미지를 박스에 풀로 채운다고 치자이미지 중앙 정렬은 크게 두가지의 CSS로 맞추는데 display: flex,나 position: relative;가 있다.왼쪽(1번)은 flex로 센터 정렬 (object-fit: cover;를 안넣으면 이미지 원본 비율이 깨진다.),.box1 { display: flex; align-items: center; justify-content: center; img { width: 100%; height: 100%; .. 2023. 5. 23. [javascript] 커스텀 스타일링 SELECT 박스 만들기 HTML, CSS를 수정해서 셀렉트박스를 꾸밀 수도 있지만 한계가 있다. select 태그 자체를 꾸민다해도 option 박스는 기본 디자인에서 크게 벗어나지 못하며, 모바일에서는 폰 자체 UI가 적용되기때문이다. 웹디자이너분이 넘기는 시안은 보통 커스텀 셀렉박스인데 사실 나는 코딩하는 입장에서 귀찮기때문에 웬만하면 복잡한 스타일링을 지양하고싶긴하다ㅎㅎ 아무튼 기본 UI에서 벗어나기 위해 자바스크립트를 이용해 스타일링을 해보자. 옵션값이 중복으로 들어가는 다소 귀찮은 코드이다. 그래도 모바일에서 꾸며진 모습이 깔끔해 맘에 든다. See the Pen Custom select box by sel (@wimmwell) on CodePen. 코드펜의 콘솔을 열어서 확인해보면 옵션 값을 선택할때마다 값이 찍히는.. 2023. 5. 22. [chatGPT] 챗지피티한테 코딩 배우기 2탄 (실패) ~지난 이야기~ '마우스 포인터를 따라서 그라디언트 blob (방울)이 움직이는 애니메이션이다. 그런데 코드펜 코드는 100vh 풀스크린을 기준으로 작성되어서 긴 페이지에도 적용되게 코드를 수정해보고싶었다. 그러나 100vh를 풀고 그냥 컨텐츠 길이를 늘려봤더니 스크린 높이 안에서만 방울이 움직였다.' . . 그리하여 챗지피티를 통해 풀스크린 페이지가 아닌 경우에도 이 효과를 사용하기 위한 챗지피티 여정이 시작되었다. https://selinak.tistory.com/61 여러분 그거 아십니까? 정답은 멀리 있지않습니다. 존나 멀리있습니다. 넝담..이고 정답은 등잔밑에 있었답니다. 챗지피티한테 물어가며 열차례 넘게 질답을 반복하며 코드 시행착오(라 부르고 삽질이라 읽음)을 거쳤는데 아무리 해도 내가 원하.. 2023. 5. 10. [CSS] 스크롤바 scrollbar CSS 스타일링 수정하기 스크롤바는 스크롤바의 부모 요소::-webkit-scrollbar {}를 통해 수정할 수 있다. 예를 들어 페이지 전체의 스크롤바면 body::-webkit-scrollbar{}이다. 스크롤바 선택자는 세부적으로 ::-webkit-scrollbar — 스크롤바 전체. ::-webkit-scrollbar-button — 스크롤바의 버튼 (한 번 누를 때마다 위아래로 한 줄씩 오르내리는 위아래 화살표). ::-webkit-scrollbar-thumb — 드래그할 수 있는 스크롤 손잡이. ::-webkit-scrollbar-track — 흰색 막대 위에 회색 바가 존재할 경우의 스크롤바의 트랙(진행 표시줄). ::-webkit-scrollbar-track-piece — 손잡이에 의해 덮이지 않은 트랙(진행 표.. 2023. 4. 20. [ChatGPT] 챗지피티한테 코딩 시키기 - 탭 메뉴 https://chat.openai.com/ 챗지피티야 tabs 코드 만들어줄래? chatgpt: 물론이지 HTML, CSS, JAVASCRIPT 나눠서 코드 복사까지 가능하게 나온다. 이 코드를 코드펜에 그대로 복붙해봤다. 완벽하진 않지만 잘 작동한다. 세상 참 좋아졌다. AI가 코딩도 대신 해주고.... 이러다 내 직업 없어지는거 아냐ㅠㅠ? See the Pen Tabs by ChatGPT by sel (@wimmwell) on CodePen. 그런데 말입니다 이 코드 W3SCHOOL에 나와있는 탭 코드랑 일치함 https://www.w3schools.com/howto/howto_js_tabs.asp How To Create Tabs W3Schools offers free online tutorial.. 2023. 4. 19. [HTML/CSS] ul li에 이미지 사용할 경우 list-style 들여쓰기 맞추기 ul li 구조로 마크업을 하면 li의 텍스트가 여러줄이 되도 들여쓰기가 (지금 이 문단처럼) 자동으로 들어간다. list-item의 마커 타입이 disc,square 등 꽤나 다양하다고 해도 한계가 있기 때문에 보통은 ul {list-style: none;}으로 초기화 시키고 커스텀 이미지를 li 태그 안에 사용할 때가 많다. 이 경우 아래 이미지의 파란선처럼 텍스트 들여쓰기가 맞지않다. 한줄이면 상관없지만 여러줄이면 들여쓰기가 맞지않아 거슬린다. 특히 기관 홈페이지 작업하면 십중팔구는 들여쓰기 맞춰달라고 요청이 들어온다. ul의 list-style에 url을 이용하여 마커를 이미지로 변경할 수도 있지만 사이즈나 위치 등 자유로운 수정이 어렵다. 그래서 이렇게 li 태그 안에 img를 넣어 사용하게 된.. 2023. 4. 18. [javascript] HTML요소(div, p, span)의 텍스트를 클립보드로 복사하기 버튼 - Copy Text to Clipboard 자바스크립트를 이용하여 텍스트 복사 버튼을 구현해보자 function copy(id) { var r = document.createRange(); r.selectNode(document.getElementById(id)); window.getSelection().removeAllRanges(); window.getSelection().addRange(r); document.execCommand('copy'); window.getSelection().removeAllRanges(); } 위 copy 함수를 onclick 이벤트에 넣어 실행해주면 된다. (id)에 복사하려는 대상 요소의 id를 넣어주면 된다. 안녕하세요 텍스트 복사 "안녕하세요"가 복사될 것이다. codepen 코드 See the Pen C.. 2023. 2. 22. 이전 1 2 3 4 다음 728x90 반응형
