nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/Loves

1, 2월쯤 되면 여기저기서 연말정산으로 난리입니다. 하지만 이제 막 노예, 아니 근로생활을 시작한 꼬꼬미들에겐 너무 낯선 말입니다. 저도 처음으로 날아온 연말정산 안내 메일을 봤을 때 동공이 진도 7.0으로 흔들린 기억이 있네요. 그래서 한 번 정리해봤습니다. 이 글은 연말정산을 하는 방법 대신, 연말정산이 도대체 뭔가!!!에 대한 궁금증을 풀기 위해 정리한 글입니다. 가볍게 읽어보세요 :-) 아무튼 우리는 세금을 냈어요 소득이 있으면 소득에 따른 세금을 내야 합니다. 그런데 저 같은 쪼렙은 소득이 하나밖에 없어요ㅠㅠ 회사 다니면서 버는 월급이 다입니다. 그래도 이 월급에 대한 소득세를 내야 해요. "앗? 저는 따로 소득세란 걸 낸 적이 없는데요?" 라는 생각이 들 수도 있지만, 우리는 꼬박꼬박 세금을..

2020. 2. 21.

Blog/Design

일러스트레이터 튜토리얼 (2019.11) Retro Text Style 20.02.02 (링크) 더보기 ⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼ 패턴이 될 이미지를 swatch(견본)에 넣어두면 손쉽게 사용할 수 있다. 텍스트 스타일을 그래픽 스타일에 넣어두면 다른 문자에도 쉽게 적용할 수 있다. ⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼⎼

2020. 2. 2.

Blog/CSS

프롤로그 레이아웃을 구현할 때 flexbox를 쓰면 참 편합니다. 플박만으로 레이아웃을 구현하는 데 큰 문제는 없지만, 보다 정교하고 복잡한 레이아웃에는 그리드가 좋다는 소문(?)을 들었거든요. 그래서 이번에는 grid를 배워서 좀 더 업그레이드를 해보려고 합니다. 아, 당연하지만 구 버전 IE에 대한 지원은 눈물을 머금고 포기해야 합니다. caniuse에 따르면 IE 11부터 부분 지원하고 있는데요, 그냥 Edge부터 잘 먹겠구나~ 라고 보면 될 것 같아요. 파이어폭스(특히 Developer Edition)는 개발자도구에서 CSS 그리드를 더 잘 나타내주고 있으니 학습에 참고하시면 좋겠습니다. 그리드, 일단 써봅시다 display 플렉스박스를 display: flex; 으로 선언하여 썼던 것처럼, 그리..

2020. 1. 29.

Blog/Design

20.01.26 디자인 원본 목업 출처 Pier Sans, spinwerad, lowan Old style 더보기 금방 끝날 줄 알았는데 생각보다 또래오래 걸렸ㄷr...✰ 일러로 해야하는지 포토샵으로 해야하는지 조금 막막했는데, 툴에 익숙해지는 시간이 필요할 것 같다. 튜토리얼도 좀 더 찾아봐야지 허허허 20.02.02 디자인 원본 Tahoma Bold, Myriad Variable Concept

2020. 1. 26.

Blog/JavaScript

이래나 저래나 원페이지가 많은 가운데, 여기에 쓰이는 스크롤 효과도 참 많습니다. 그중에 가장 유명(?)하고 대중적인 건 스크롤 할 때 요소가 페이드인 되는 효과인 듯 합니다. 그래서 이걸 직접 구현하려고 했..으나 이 효과를 이해하기 위해서는 우선 스크롤과 관련된 속성을 알아야 합니다. 아하 그래서 어려운 거군요 ＼(Ｔ∇Ｔ )／ 후새드... 눈물 닦고 테스트용 페이지를 만들어 봅니다. 아이템 4개로 이루어진 페이지인데, 각 아이템의 높이는 500px입니다. .item { width: 100%; height: 500px; } 마진과 패딩이 하나도 없다고 할 때, 이 문서의 총 높이는 500*4 = 2000이 되겠군요. 그리고 윈도우의 높이는 딱 500px이라고 합시다. 그럼 첫번째 아이템만 보이는 상태겠..

2019. 12. 5.

Blog/JavaScript

요소의 크기 1. 요소의 크기 알아내기 여기, 이렇게 생긴 요소가 하나 있습니다. 이 아이가 가진 CSS 속성은 아래와 같습니다. .box { width: 100px; height: 100px; padding: 50px; border: 50px solid #F16B6F; margin: 50px; } 만약 이런 CSS 속성을 모르거나, 속성이 유동적으로 바뀌는 상황에서 요소의 크기를 알아내고 싶다면 어떻게 해야할까요? 네, 그냥 콘솔에 찍으면 됩니다. var box = document.querySelector(".box"); console.dir(box.getBoundingClientRect()); 이럴 때 쓰라고 있는 게 getBoundingClientRect() 입니다. [MDN 링크] 이름이 어려운데..

2019. 12. 3.

Blog/Loves

12월 첫째주 일요일!! 이었던 어제 JLPT N1급을 치르고 왔습니당 ✍️ 원래 시험은 실력대로 보는 거라면서요? 그래서 정말 실력대로 보고 왔습죠... 것도 엄청 처참하게..... 첫장부터 모르는 단어만 나오기 있기 없기^^? 갑자기 웬 일본어 시험이냐면 제 전공이거든요. 거의 방구석에 쳐박아 둔 덤벨 만큼이나 의미가 쪼그라든 전공이지만요 허허허헣ㅎㅎㅎ 졸업 전에 부랴부랴 시험을 봤던 게 얼마 안 된 거 같은데 벌써 4년 전 일이 됐습니다. 그게 4학년 1학기였는데..... 저 언제 이렇게 늙었죠............? 홈페이지에서 옛날 성적까지 조회해볼 수 있는데, 구 JLPT 시절 성적도 나오더라고요ㅋㅋㅋㅋㅋ 이건.. 내가 마치 호랑이 담배피던 시절에 존재했던 느낌.... 솔직히 합격할 자신이 없..

2019. 12. 2.