728x90 반응형 전체 글41 [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. [사이트 정보] 퍼블리셔에게 쉽게 요청하기 위한 애니메이션 사이트(coco-factory)를 소개합니다! 안녕하세요! 기획자 혹은 디자이너분들이 머릿속에서 구상하고 있는 애니메이션 모션을 UI개발자 혹은 퍼블리셔에게 쉽게 설명하기 어려움을 느낄 때가 많으실 텐데요~ 이런 커뮤니케이션에 어려움을 해소하기 위한 사이트를 소개합니다! coco-factory : https://coco-factory.jp/ugokuweb/ coco-factory라는 일본에서 제작된 사이트입니다 크롬 브라우저에서 한글 번역으로 보시면 편하게 보실 수 있습니다 [coco-factory 사용 장점] ✅ 무료 사용 가능! ✅ 글이나 말로 설명하기 어려운 표현을 시각적으로 표현 가능! ✅ 시각적으로 표현하기에 전달하는 사람과 받는 사람이 명확하게 인지 가능! ✅ 데모가 있어 구상하지 못했던 다양한 모션 확인 가능! ✅ 다른 팀과의 협업에 편.. 2022. 3. 25. [codepen] 코드펜 코드를 블로그에 넣는 방법!! 코드펜 코드를 블로그에 넣는 방법!! IT 개발자 분들은 코드펜을 많이 활용할 텐데요~ codepen에서 구현한 코드를 블로그로 불러오는 방법을 소개하겠습니다. 코드펜에 먼저 회원가입 후, 로그인되어 있는 상태에서 설명드립니다. 1. 좌측 사이드바 > CREATE > Pen 또는 우측 프로필 > New Pen 클릭! 2. 코드를 작성할 수 있는 화면이 나타납니다. 코드를 작성 후 Save 해주세요. 코드 작성 전 코드 작성 후 3. Embed 클릭해주세요! 4. Code Copy 클릭해주세요! 5. 블로그 페이지에서 더보기 > HTML블럭 클릭 또는 기본모드 > HTML 클릭해주세요. 6. 해당 영역에 codepen 코드를 붙여 넣기 해주세요. 블로그에 코드펜 넣기 완성!!👏👏 💡Tip. codepen .. 2022. 3. 24. 이전 1 2 3 4 다음 728x90 반응형
