쓰윔's
FootballManager
https://swimfm.tistory.com/
그외
해당되는 글 102건
코드펜(codepen) 사용법과 저작권을 알아봅시다.
[**코드펜**]은 프론트엔드 개발자들이 코드들을 공유하거나 테스트할 때 사용하는 사이트입니다. 거기에 추가하자면 저처럼 잘 모르는 초보가 공부를 하러 가는 곳이기도 하고, 소스코드가 필요한 유저가 가서 얻어오는 곳이기도 합니다. 굉장히 잘 만든 사이트지만 자세히 살펴보지 않으면 몇몇 유용한 기능들을 그냥 지나칠 수도 있습니다. 그래서 이번 시간에는 코드펜 사이트를 사용하는 방법을 알아볼까 합니다. 소비자 입장 코드를 제작하진 않지만 좋은 코드를 얻기 위해 들어가시는 분들을 위한 사용 설명서입니다. 원하는 코드 찾기 원하는 글을 찾는 방법은 크게 2가지가 있습니다. 검색하기 토픽 찾아가기 아래는 코드팬 상단의 검색창을 눌렀을 때 나오는 화면입니다. 1번이 검색창, 2번이 자주 찾는 검색어, 3번이 토픽입..
스크롤 내리면 상단에 고정되는 네비 메뉴 만들기
상단 헤더쪽에 있는 네비게이션은 사용자에게 편리함을 제공하기 위해 제공하는 메뉴입니다. 제 블로그에 있는 메뉴를 예로 들면 이런 형태입니다. 모바일에서나 PC에서나 이렇게 가장 위에서 사용자를 따라다니죠. 이번 시간에는 3가지 형태의 네비 메뉴를 알아보겠습니다. 항상 고정되어 따라다니는 메뉴 일정 부분 스크롤을 내리면 고정 되어 따라다니는 메뉴 스크롤을 올렸을 때에만 고정 되어 따라다니는 메뉴 항상 고정된 채 따라다니는 네비게이션 메뉴 굉장히 간단한 작업만 해주면 됩니다. [**자바스크립트**]의 도움 없이 [**CSS**]만으로도 해결됩니다. 이 때 기억해야할 것은 2가지입니다. 네비게이션의 높이만큼의 공간을 확보할 marin-top 값 fixed로 nav를 고정하기 이해를 돕기 위해서 그림으로 가져왔..
이모지 단축키 때문에 완전히 아재가 된 것을 실감했습니다.😥
라떼는 말이야 제가 처음 인터넷을 접했을 때 감정표현을 하려면 @_@ 같은 이모티콘을 쓰거나 세련되어 보이려고 ♡♥ 같은 특수문자를 쓰곤 했습니다. 제 세대라면 다 아시겠지만 위의 특수문자들은 시프트+숫자, ㅁ+한자+숫자 조합으로 기호를 표시하곤 했습니다. 그런데 요즘은 그게 아니라더군요. 저런 특수문자를 쓰면 아재 소리를 듣는다고 합니다. 그렇다면 뭘 쓰지 싶었는데... 이모지를 쓴다고 합니다. 😆😁 예.. 저도 이모지를 알긴 압니다. 다만 존재를 알았어도 머릿 속에 이모지=복잡한 것=이모지 전용 사이트에서 복사해서 쓰는 것이라고 박혀있어서 잘 쓰지 않았죠. 그런데 인터넷을 하다가 놀라운 사실을 알게 되었네요. 이모지를 사용하는 간단한 단축키가 있었다는 겁니다. 이모지 단축키, 세월의 흐름 이모지 사용..
웹폰트를 경량화 후 로딩속도를 최적화해서 적용하는 방법
웹페이지에서 사용자가 가장 크게 체감하는 부분이 바로 글씨체입니다. 하지만 기본으로 제공되는 폰트에는 한계가 있고, 그걸 보완해주는 게 바로 웹폰트입니다. 제가 효과를 넣어서 [**굴림**]체와 웹폰트인 [**TMON소리체**]를 비교해봤습니다. 체감이 꽤 나실 겁니다. 문제는 기본폰트는 사용자의 컴퓨터에 내장되어 있기 때문에 호환이 되지만 웹폰트가 컴퓨터에 설치되어있지 않을 경우엔 다운받아야 한다는 겁니다. 그래서 웹폰트 적용시엔 웹페이지의 용량이 무거워지고, 로딩 속도가 느려지는 문제가 생기게 됩니다. 이번 시간에는 어떻게해야 웹폰트를 최적화해서 가벼운 페이지를 만들지를 알아보겠습니다. 웹폰트 고르기 당연한 이야기지만 웹폰트를 적용하려면 어떤 웹폰트를 쓸지를 먼저 결정해야 합니다. 웹폰트를 고를 때엔..
파일이름 일괄변경 프로그램 다크네이머(DarkNamer) 사용법 리뷰
수백, 수천개의 파일 이름을 변경해줘야할 때가 있습니다. 일일히 손으로 수정하려면 시간도 오래 걸리고 피곤한 노릇입니다. 이런 상황을 해결해주기 위한 프로그램이 있습니다. 바로 [**다크네이머**]인데, 프리웨어- 즉 무료프로그램이고 설치 과정 없이 파일 한개면 실행 가능합니다. 다크네이머 다운로드하기 다운로드를 받는 방법은 2가지가 있습니다. 제작자 분의 블로그로 가서 최신 버전을 받는 것과, 네이버 소프트웨어에서 구버전 다크네이머를 받는 것 입니다. 제작자분 블로그 링크: https://blog.naver.com/darkwalk77/221349401402 네이버 소프트웨어 다운링크: software.naver.com/software/summary.nhn?softwareId=GWS_000169# 두 방..
웹페이지의 로딩 속도 최적화를 해 줄 크리티컬 CSS 개념을 알아봅시다.
일전에 이 글에서 렌더링 차단 리소스를 제거하는 방법을 알아본 적이 있습니다. 그 때 언급했던 방법이 바로 [**크리티컬 CSS**]인데, 당시에 설명이 부족했던 것 같아 자세히 써보려고 합니다. 참고로 테스트 블로그에서 이 기법의 적용 전/후의 페이지 분석을 해보면 이렇습니다. 생각보다 점수 상승폭이 커서 놀랐는데, 구글이 제공하는 페이지 분석기가 미국 서버에서 측정하는 특성상 편차가 좀 있어서 이런 결과가 나온 것 같습니다. 실제로는 이것만큼 드라마틱한 개선이 되진 않습니다.[각주*원인은 모르겠지만 Larget Contentful Paint가 유독 제 블로그에선 유동적으로 나오는데, 사용 전이 최악의 경우/사용 후가 운이 좋은 경우인 것을 감안해야 합니다.*] 크리티컬 CSS란? [기본* Critic..
PageSpeed Insights의 렌더링 차단 리소스를 제거해보자.
웹페이지의 속도를 결정하는 요소 중에서 렌더링 차단 리소스가 있습니다. 최대한 사용자에게 빠르게 웹페이지의 모습을 보여주려면 이 요소는 꼭 제거해둬야 합니다. 렌더링 차단 리소스를 측정하는 방법 우선 내 웹페이지에 렌더링 차단 리소스가 얼마만큼 있는지 알아보려면 측정을 해야합니다. 크롬,파이어폭스 같은 브라우저로 접속해 개발자모드의 네트워크탭으로 가서 일일히 측정할 수도 있지만, 편리한 건 역시 [**구글**]에서 제공하는 PageSpeed Insights입니다. 여기로 접속하셔서 측정해볼 웹페이지의 주소를 입력하고 분석을 누르면 끝입니다. 그리고 위의 사진처럼 렌더링 차단 리소스가 나옵니다. 이 골치아픈 리소스를 찾았으니, 이제 이 리소스의 실체를 알아볼 때입니다. 렌더링 차단 리소스란? 사용자가 웹페..
무료 게임을 뿌리는 에픽게임즈에 가입하는 방법
한국 게이머들에겐 스팀이라는 플랫폼이 익숙합니다. 하지만 [**에픽게임스(EPIC GAMES)**]라는 업체에서 공격적인 마케팅으로 스팀의 아성을 넘으려고 하고 있습니다. 판매자에게 유리한 수수료 혜택은 물론이고, 구매자에겐 굵직한 AAA급 게임들을 무료로 제공하고 있습니다. [팁*요즘 화제인 중국자본이 들어간 서비스는 정보를 뺏긴다는 이슈가 있습니다. 에픽게임즈는 중국기업인 텐센트가 지분을 40% 가지고 있지만, 창립자인 팀 스위니라는 사람이 과반의 지분을 가지고 있기 때문에 관련이 없다고 합니다. 실제로 홍콩시위 사건때도 자유롭게 의견을 게재할 수 있었다고 합니다.*] 올해 무료로 배포한 게임만 해도 어쌔신크리드:신디케이트, 와치독스1, 와치독스2,암네시아,GTA5, 보더랜드, FM2020,문명6 등..
폴리필 (polyfill) 사용법 알아보기. feat IE11
폴리필의 개념 브라우저마다 지원하는 기능이 다릅니다. 특히 구형 브라우저일수록 최신 기능을 지원하지 않습니다. 설상가상으로 한국에서는 인터넷 익스플로러라는 구형 브라우저를 고려해야 합니다. 세계점유율이 1%대에 마이크로소프트에서도 버린 브라우저이지만 아직도 국내에선 ACTIVE X를 사용하는 관공서 사이트들 때문에 점유율이 10%라는 무시할 수 없는 수치이기 때문입니다. 조금이라도 웹개발에 몸을 담근 분이라면 이 IE가 얼마나 말썽을 일으키고 안되는 것들이 많은지 공감하실 겁니다. 자바스크립트를 예로 들면 인피니티 스크롤과 Lazy Load등에 쓰이는 Intersection Observer부터 시작해서 유용한 ES6 문법까지 IE는 싹 다 먹통으로 만들어버립니다. 그럴 때 사용하는 게 폴리필(Polyfi..»
«
