728x90 반응형 전체 글43 [codepen] 코드펜에 제이쿼리(jQuery) 넣기!! 안녕하세요~ 코드펜으로 간단한 코드를 테스트해 보는 경우가 자주 있습니다. 특히 저는 요즘 포스팅을 작성하면서, 테스트용으로 코드펜을 사용하고 있는데요~ js 코드를 입력할 때 순수 자바스크립트 사용이 가능하지만, 셀렉터를 빨리 잡기 위해 제이쿼리(jQuery)를 이용해 코드를 작성하기도 합니다. 이럴 때! 코드펜에 제이쿼리를 넣어서 테스트하고자 하는 분들을 위해서 이번 포스팅에서는 코드펜에 제이쿼리 플러그인을 추가하는 방법을 소개합니다~ 코드펜에 제이쿼리 플러그인 추가하는 방법 1. 코드펜 접속 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development .. 2022. 4. 7. [MacOS] Dock(독) 노출 딜레이 없애기 및 애니메이션 속도 조절 Dock(독) 노출 딜레이 없애기 및 애니메이션 속도 조절 안녕하세요~ 이 포스팅을 보고 계신 분들은 PC 사용하는 OS가 어떻게 되나요?? 저는 MacOS를 사용하고 있는데요~ MacOS를 사용하시는 분들은 기본으로 적용되어 있는 화면 하단의 dock(독)을 자주 사용하실 겁니다 저도 독에서 애플리케이션 이동이 쉬워 자주 사용하고 있는데, 화면을 더 넓게 사용하기 위해 독을 자동 숨김 기능으로 사용하고 있습니다 다만, 숨김 기능으로 다시 노출시킬 때 애니메이션 효과로 인해 딜레이가 있어 빠르게 나타나지 않는 모션을 보셨을 겁니다. 애니메이션이 들어가면 시각적으로는 예쁘지만, 사실 빠르게 무언가 작업하기 위해서는 상당히 답답한 부분이 있습니다. 이번 포스팅에서는 맥의 독을 숨겨놓고 사용할 때, 마우스 h.. 2022. 4. 7. [Google] 구글 Chromium 기반 제로데이(zero-day) 취약점 주의 구글 Chromium 기반 제로데이(zero-day) 취약점 주의 안녕하세요~ 며칠 전, 노마드 코더에 올라온 유튜브를 시청하고 구글 chromium 기반 브라우저들의 zero-day 취약점에 대해 정보를 얻게 되었습니다! 우선 현재 크롬 버전 99.0.4844.84을 사용하고 계신 분들은 업데이트부터 하고 아래의 글을 확인해주세요!! 우선 zero-day는 무엇을 의미하는 걸까요? 제로데이는 컴퓨터 소프트웨어의 취약점을 공격하는 것을 말하는데요. 여기서 중요한 점은 취약점에 대한 해결방안이 나오지 않은 상태에서 공격을 하는 것입니다. 그러니 매우 중요한 뉴스겠죠! 현재 크롬 브라우저만의 문제는 아니라고 합니다.문제는 Chromium의 V8 JavaScript 엔진에 있어서,엣지, 브레이브, 웨일, 삼성.. 2022. 4. 6. [javaScript] Top버튼 스크롤 하단 붙이기 Top버튼 스크롤 하단 붙이기 안녕하세요~ UI 모션 개발을 할 때, 컨텐츠가 긴 경우를 대비해서 보통 우측 하단에 상단으로 이동할 수 있는 일명 Top버튼을 많이 적용하고 있습니다. Top버튼을 적용시킬 때 여러가지 기능이 있을 수 있습니다. 단순히 우측하단에 Top버튼 위치시키기 디폴트로 Top버튼 숨겨져 있고, 스크롤 이벤트가 발생했을 때 우측 하단에 Top버튼 보이기 - 단점 : 푸터와 겹치게 됨 디폴트로 Top버튼 숨겨져 있고, 스크롤 이벤트가 발생했을 때 우측하단에 Top버튼 보이기 - 장점 : 푸터와 겹치지 않음 - 단, 스크롤이 푸터에 닿기 전에 Top버튼은 푸터 바로위에 위치시키기 위의 3가지 경우 중에서 마지막 3번째 경우에 대한 모션구현을 해보았습니다. 디폴트로 Top버튼 숨겨져 있고.. 2022. 4. 6. [CSS] 첫 번째 자식 요소와 마지막 자식 요소 제외시키기 첫 번째 자식 요소와 마지막 자식 요소 제외시키기 안녕하세요~ 첫 번째 자식 요소와 마지막 자식 요소를 제외시킬 때 어떻게 CSS style을 작성하시나요? 예를 들어, list를 만들 때 첫 번째 요소에는 margin여백을 넣지 않고 다른 요소들에게는 margin을 넣고 싶을 때! 아래의 코드처럼 작성하고 계신가요? ``` ``` 첫번째 두번째 세번째 네번째 ``` 이렇게 작성하게 되면, li에 margin-left:10px 스타일이 적용되고 난 후에 li:first-child에 의해 margin-left:0으로 오버 라이딩(overriding)되게 됩니다. :last-child를 사용해도 첫 번째와 마지막의 차이이지 동일하게 오버라이딩이 됩니다. 첫 번째 li 요소에 별도의 클래스를 추가도 오버라이딩.. 2022. 4. 4. 웹 접근성 향상을 위한 HTML에서 사용 가능한 WAI-ARIA ( + 웹 접근성 사이트 ) 웹 접근성 향상을 위한 HTML에서 사용 가능한 WAI-ARIA 안녕하세요~ 웹(web)분야에서 일하고 계신 분들이 라면, 어느 포지션에 작업하시던 웹 접근성에 대해 들어보거나 웹 접근성을 고려하며 작업을 하고 계실 거라 생각됩니다. 웹 접근성(Web Accessibility)은 비장애인뿐만 아니라 장애인 분들도 웹사이트를 원활하게 사용할 수 있도록 웹사이트를 개발하는 것을 말합니다. 흔히, "웹 접근성을 맞춘다."라고 많이 표현되고 있습니다. 웹 접근성은 어느 한 포지션에서만 사이트의 웹 접근성을 위해서 신경 써서 작업하는 게 아닌, 웹사이트를 제작하는 모든 협업 포지션에서 신경 써야 할 부분이라고 생각됩니다. 각각의 포지션에서 웹 접근성을 위한 작업이 필요하기 때문입니다. 그중에서, 이번 포스팅에는 .. 2022. 4. 3. 1초만에 티스토리 작성글 시간만 숨기기! (쉬움주의) 안녕하세요~ 블로그 시작한 지 얼마 안돼서 블로그 꾸미기에 한창인 여니노트입니다 😁 티스토리 관리메뉴에서 하단 쪽을 유의 깊게 보신 적 있나요? 이것저것 구경하던 중에 사용하다 궁금할 땐 > 스킨가이드 메뉴가 제 눈에 띄었습니다 👉 스킨가이드 링크 : https://tistory.github.io/document-tistory-skin/ 소개 · GitBook 티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토 tistory.github.io 때마침 저는 포스팅 글에서 년/월/일/시간까지 디테일하게 나오는 부분이 살짝(?) 거슬렸었습니다. 포스팅 글의 작성 시간만 제거하는 방법이.. 2022. 3. 31. [카카오뷰] 채널 홍보도구 간편만들기!! - 2탄 카카오뷰 채널 홍보도구 간편만들기!! 안녕하세요~ 이전 포스팅에서 카카오뷰 채널 추가하기 버튼을 블로그에 추가하는 방법을 알려드렸는데요~ 안보신 분들은 이번 포스팅을 보기 전에 먼저 보고 와주시면 이해하기 빠르실겁니다! (👉 카카오뷰 채널 추가하기 버튼을 블로그 : https://yeony-list.tistory.com/11) 보시는 것 처럼, ch+ 채널 추가로 보이는 것 보다는 버튼이 내 채널명으로 보이고 싶다!!! 하시는 분들이 계실겁니다~ 물론 개인적으로 디자인툴을 사용해 예쁘게 버튼이미지를 만들어서 적용할 수도 있지만! 카카오에서 아주 편리하게 내 채널명으로 이미지를 만들 수 있게 제공해주고 있습니다~ 한번 알아볼까요? 정말 쉬우니까 잘 따라오세요!! 1. 카카오 뷰 창작센터 → 설정 → 창작채.. 2022. 3. 31. [Xcode] ios Simulator(시뮬레이터) 디버깅 방법 안녕하세요~ 아이폰과 동일한 기기 환경에서 web화면을 확인을 위해 Xcode를 많이 사용하고 계실 텐데요~ Xcode로 web화면을 확인에서 끝나지 않고, Simulator를 통해 디버깅까지 할 수 있습니다! 그 방법을 알려드립니다! 💡 Xcode는 MacOS 환경에서만 사용할 수 있는 점 참고해주세요!! 1. Xcode 실행 → 메뉴 Xcode 클릭 → Preferences... 클릭해주세요 2. 원하는 ios 버전별 Simulator 체크 후, 다운로드해주세요 3. Simulator 실행해주세요 Xcode 실행 → 메뉴 Xcode 클릭 → Open Developer Tool → Simulator 4. 확인할 ios 버전의 기기 실행해주세요 Simulator 실행 → Open Device → iOS .. 2022. 3. 30. [카카오뷰] 채널추가하기 버튼 블로그에 추가하는 방법 - 1탄 카카오뷰 채널 추가하기 버튼 블로그에 추가하는 방법!! 안녕하세요~ 카카오뷰 라고 다양한 시선으로 큐레이션 된 콘텐츠를 발견할 수 있는 카카오에서 새롭게 선보인 서비스입니다! https://view.kakao.com/ 카카오 뷰 콘텐츠를 보는 새로운 시선 카카오 뷰 view.kakao.com 많이들 알고 계실 텐데, 모바일 카카오톡 내에서 중앙 하단에 눈 모양 메뉴를 클릭하면 뷰 콘텐츠를 확인할 수 있습니다~ 카카오뷰 채널에 티스토리가 연동되어 편리하게 블로그 글을 큐레이션 할 수 있습니다. 반대로, 카카오에서 자바스크립트를 이용한 티스토리 블로그에 카카오뷰 채널 친구 추가할 수 있도록 채널 추가하기 버튼을 제공하고 있어서 해당 방법을 공유드립니다! 정말 쉬우니까 잘 따라오세요!! 1. 카카오 뷰 창작센.. 2022. 3. 29. [코로나 검사] 인천 서구 뉴성민병원 선별진료소 검사 정보 안녕하세요!! 요즘 코로나19가 델타, 오미크론, 스텔스까지 계속해서 변화하고 있습니다ㅠ 지금까지 잘 버티고 있었는데.. 가족 중에 동생이 양성 확진을 받아 가까운 뉴성민병원 선별진료소에서 PCR검사를 받게 되었습니다. 갑작스럽게 검사를 알아보려고 하니, 정부지침도 계속해서 바뀌고 있고 보건소, 선별진료소, 병원 등등 다 다르게 되어있더라구요!ㅠ.ㅠ 그중에 가깝게 갈 수 있는 뉴성민병원 선별진료소로 가게 되었습니다 위치는 뉴성민병원 신관에서 응급실 건물로 가는 방향 사이에 선별진료소가 위치해 있습니다 뉴성민병원 선별진료소 운영시간은 일요일, 공휴일 제외한 평일과 토요일에 운영하고 있습니다 평일(월~금) : AM 9:00 ~ PM 12:00, PM 1:30 ~ 5:00 토요일 : AM 9:00 ~ PM 1.. 2022. 3. 27. [javaScript] 스크롤 여부에 따른 버튼영역 하단에 붙이기!! 안녕하세요! 웹사이트를 제작할 때, 스크롤 여부에 따라 버튼 영역을 푸터 하단 쪽에 붙이는 기능이 필요할 때가 종종 있습니다. 다른 작업에서도 이와 같은 유사한 기능을 작업 할 수 있기 때문에 히스토리 차원으로 코드 남깁니다!! 유사한 작업을 하시는 분들께 도움이 되었으면 합니다~ 💡html과 css 코드는 동일! 💡jQuery로 구현한 경우와 javaScript로 구현한 경우! 1) 제이쿼리로 구현한 코드 1-1) 브라우저 화면보다 컨텐츠 내용이 짧아, 스크롤 발생 안 한 경우 HTML 삽입 미리보기할 수 없는 소스 1-2) 브라우저 화면보다 컨텐츠 내용이 길어, 스크롤 발생했을 경우 HTML 삽입 미리보기할 수 없는 소스 2) 자바스크립트로 구현한 코드 2-1) 브라우저 화면보다 컨텐츠 내용이 짧아,.. 2022. 3. 25. 이전 1 2 3 4 다음 728x90 반응형
