티스토리

nana_log

검색하기

블로그 홈

nana_log

nykim.work/m

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

구독자: 35

방명록 방문하기

주요 글 목록

[웹 성능 최적화] #1 브라우저는 어떻게 렌더링을 할까 프롤로그 면접관: “웹 사이트 성능 최적화에 대해 아는 대로 얘기해 보세요.” ???: “ㅈ..잘...? 🙄” (기술 면접에서 저 질문을 받았을 때의 짜릿함이란☆) 최적화! 왠지 중요하고 챙겨야할 거 같지만 잘 모르는 그것! 저도 어디선가 줍줍한 지식들로 대략적으로는 알고 있지만 막상 정리하려니 참 어렵게 느껴지더라고요... 사실 꼭 면접에 대비하기 위함이 아니더라도, 웹 사이트를 사용자에게 빠르고 쾌적하게 보여주고 싶은 마음을 다들 한켠에 품고 있으실 거라 생각합니다. 우리는 항상 사용자에게 좋은 UX를 남겨주고 싶으니까요! 언젠가 정리해야지 정리해야지 미루다가 더 이상 미룰 수 없다! 해서 써보는 웹 성능 최적화 글입니다. 내용이 워낙 방대해서 중구난방 시리즈가 될 거 같은데 쫌쫌따리 써보려고 합니다.. 공감수 23 댓글수 14 2023. 8. 6.
2022년 짤막한 회고 📖 [일기 모아 제본하기]도 이걸로 어느덧 네 번째! 이제 익숙해질 때도 됐는데 여전히 우당탕 헤매면서 마무리했다 (그리고 꼭 끝나야 보이는 오타... 🥹) 올해 제본 컨셉은 뭘로 할까 고민하다가 우주로 정했다. 🪐✨ 매달 회고를 할 때마다 이번 달의 한마디를 적어두는데 그때 적었던 문구 중 하나에 꽂혀서 슥 가져와 넣었다. 주변에 보여주면 '뭔 유니버스?' 물어보는데 마블 영화 시리즈에서 영감을 받은 문구가 맞다. 작년에 개봉했던 마블 시리즈 작품 중 닥터 스트레인지: 대환장… 아니 대혼돈의 멀티버스란 작품이 있는데, 내용을 다 떠나서 영화에서 말하는 멀티버스라는 개념이 무척 신선했던 게 기억이 남는다. "그렇담 수많은 유니버스가 존재하고 내가 있는 곳도 그중 하나의 유니버스?!" 라고 생각하면 꽤 흥미롭.. 공감수 16 댓글수 9 2023. 2. 4.
[React] Gatsby 찍먹해보기 - 설치부터 배포까지 프롤로그 저는 종종 로컬에서 시작해 로컬에서 끝나는 마크업 작업(aka 이메일 템플릿)을 진행하는데요, 나중에 파일을 찾으려면 하나씩 파일을 열고 닫아야 하는 수고스러움이 있었습니다. "로컬에 흩어진 파일을 한 화면에서 볼 수 있게 정리하고 싶어! 하지만 어떻게?!!!"하고 고민하던 중... 그레잇한 개츠비를 알게 되어 찍먹해봤습니다. 결론부터 말하자면 (삽질도 많았지만) 좋은 경험이었어요! 정적 사이트를 만들 생각인데 바닐라는 좀 그렇고 리액트 기반에서 뚝딱 만들어보고 싶다 하시는 분에게 맞을 것 같아요. 까먹을 미래를 위해 가볍게 정리해봅니다. 팁은 공식문서가 더 자세하니 이쪽으로 → Gatsby Documentation What’s Gatsby? React 기반의 정적 사이트 생성 프레임워크 (JA.. 공감수 13 댓글수 4 2022. 12. 20.
[아무튼 Sass] 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 프롤로그 백만 년 만의 업데이트! 이제 시리즈의 마지막 글입니다 😎 흐름제어와 함수를 통해 Sass를 더 멋진 방법으로 활용해 봅니다. 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 👈 Here! 이번 글에서 다루는 것: - @if, @each 등의 흐름제어문 - list 변수와 map 변수 - 내장 모듈이 제공하는 사용하기 - @function 로 직접 함수 만들기 1) 흐름 제어 Sass의 기본 특징들은 다 살펴봤으니 이번에는 좀더 기깔나게 활용해 볼 차례입니다. 먼저 흐름 제.. 공감수 17 댓글수 6 2022. 11. 5.
Framer-motion 라이브러리 훑어보기 프롤로그 Framer-motion은 Framer가 제공하는 리액트용 애니메이션 라이브러리입니다. NomadCoders의 를 듣던 중, framer-motion 라이브러리를 사용하는 내용이 있어 공식 문서를 슥 훑어보았는데요, 아니... 이것은... 애니메이션 총집합 선물세트?! 정말 다양한 애니메이션 모션을 제공하는 멋쟁이 라이브러리였습니다. 공식 문서 보러 들어갈 때마다 구글 번역을 쓰기 귀찮아서 일부 내용만 발췌해 쫌쫌따리 가져왔습니다. 😽 이 글은 framer-motion v.7 을 기준으로 작성되었습니다. (2022.09) 1. Introduction 🔗 Github (Star 15.4k) MIT 라이센스 요구사항: React 17+ 공식 문서는 요기로 👇 https://www.framer.com.. 공감수 48 댓글수 9 2022. 9. 8.
[아무튼 Sass] 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 프롤로그 시리즈의 3번째 글! 이런 분들이 읽으시면 좋아요. - CSS를 다룰 수 있어요 - 하지만 Sass는 잘 몰라요 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 👈 Here! 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 이번 글에서 다루는 것: - mixin - extend - 모듈화(import/use) 1) 믹스인: 찍어내기 틀 이번에는 조금 더 우리의 작업을 편하게 해줄 Sass 문법을 써봅시다! 바로 @으로 시작하는 At-Rules입니다. 기본 CSS에서도 @으로 시작하는 문법들이 몇 개 있었죠. (@font-.. 공감수 20 댓글수 15 2022. 7. 7.
[아무튼 Sass] 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 프롤로그 [아무튼 Sass] 1. 시작하기의 다음 글입니다. 두 번째 글이지만 어느덧 반년만... 😉💦 이런 분들을 위한 글입니다. - CSS를 다룰 수 있어요 - 하지만 Sass는 1도 몰라요 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 👈 Here! 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장 모듈, 함수 이번 글에서 다루는 것: - 중첩, 부모참조 선택자 - 변수, 보간 - 인라인 주석 - 출력스타일 설정 1) 중첩: 이것이 "C"SS 지난 글에서는 Sass 만 설치하고 똑 끝나버려서 '왜 굳이 이걸 설치해서 써야하지 🤔' 하는 .. 공감수 24 댓글수 14 2022. 4. 5.
CRA(create-react-app) 환경에서 절대경로 / 전역 Sass 사용하기 CRA - 리액트 프로젝트를 뚝딱 시작할 수 있게 돕는 보일러 플레이트* (*자주 쓰는 수식, 명령어 등을 미리 입력해 놓는 것) - 그래서 번거롭게 Babel, ESLint, Webpack 등을 따로 설치할 필요가 없다 CRA(create-react-app)에서 config 건드리기 절대경로 설정(alias)을 하려면 Webpack의 config를 건드려야 하지만, CRA로 생성하면 기본적으로 config 파일을 볼 수 없다. eject 하면 숨겨져 있던 config 파일을 밖으로 꺼낼 수 있지만, 이거 한 번 하면 못 돌리는 옵션인데.... 웹팩이랑 안 친한데.... 🥺 이럴 땐 CRACO(Create React App Configuration Override) 를 사용하자! eject 없이 설정을 .. 공감수 6 댓글수 0 2022. 3. 16.
[책 제본하기] 나만의 책 만들기 (2021 ver.) 프롤로그 이 글의 두 번째 글입니다. 대충 일기를 모아서 제본했다는 내용이에요 📚 (1편을 작년에 쓰고 2편을 올해 쓰다니...) 실제로 책 제본을 진행하면서 어떤 식으로 했는지 정리해봤습니다. 개인제본 하실 때 참고하세요! 1. 글 모으기 우선 책으로 만들 글을 한데로 묶습니다. 저는 노션에 적은 일기를 모아서 하나의 텍스트 파일로 취합했어요. 여기에 사진이나 그림 같은 요소를 얼마나 넣을지, 여백은 얼마나 넓게 잡을지에 따라 분량이 달라집니다. 2020년 버전: 184,034자 (총 220p / 두께 약 1.8cm) 2021년 버전: 114,910자 (총 214p / 두께 약 1.8cm) 보면 글자 수는 다르지만 두께가 비슷한데, 2021년 버전에는 사진과 여백이 더 많이 들어가 있습니다. 따라서 두.. 공감수 46 댓글수 135 2022. 3. 9.
[ReactJS] 5. 𝒘𝒊𝒕𝒉 타입스크립트 이 글은 NomadCoders의 의 내용 일부를 정리한 글입니다. 멋진 강의 감사합니다! 개인 스터디 글로, 맞지 않는 내용이나 더 나은 방법을 공유해 주신다면 복받으실 거예요 👼✨ 1) 시작하기 2) 기능 연습 & 3) 앱 만들기 4) styled-components 5) 𝒘𝒊𝒕𝒉 타입스크립트 ☀︎ 5-1. 타입스크립트 5-1-1. "타입" 스크립트? 자바스크립트는 너무나 관대(?)해서 오냐오냐 하고 넘어갈 때가 많습니다. const sum = (a,b) => a+b; 에서 a와 b는 숫자로 받을 생각이었지만, 여기에 문자열을 넘기더라도 '그런갑다~' 하고 넘어가 버립니다. 또, 존재하지 않는 프로퍼티를 읽더라도 ‘값이 없는데? 그럼 undefined 줄게’ 하고 대충 넘어가버리기 때문에 나중에 엌??.. 공감수 5 댓글수 225 2022. 2. 13.
[ReactJS] 4. styled-components 💅🏾 이 글은 NomadCoders의 와 의 내용 일부를 정리한 글입니다. 🙇🏻‍♀️ 멋진 강의 감사합니다 🙇🏻‍♀️ 개인 스터디 글로, 맞지 않는 내용이나 더 나은 방법을 공유해 주신다면 복받으실 거예요 👼✨ 1) 시작하기 2) 기능 연습 & 3) 앱 만들기 4) styled-components ☀︎ 5) 𝒘𝒊𝒕𝒉 타입스크립트 4-1. 스타일드 컴포넌트? Styled Components는 컴포넌트 단위로 스타일링하기 때문에 개별 케이스로 분리해 CSS를 작성할 수 있어요. 이렇게 분리하지 않고 스크립트 내 작성하는 방식을 CSS-in-JS 라고 합니다. CSS-in-JS 방식을 사용하는 라이브러리에는 Styled Components, emotion, styled-jsx, JSS 등이 있습니다. 여기서는 스타.. 공감수 7 댓글수 2 2022. 2. 9.
[ReactJS] 2. 기능 연습 & 3. 앱 만들기 이 글은 NomadCoders의 강의 내용을 정리한 글입니다. 넘나 좋은 강의 (게다가 무료!) 🙇🏻‍♀️ 감사합니다 🙇🏻‍♀️ 개인 스터디 글로, 맞지 않는 내용이나 더 나은 방법을 공유해 주신다면 복받으실 거예요 👼🙌 1) 시작하기 2) 기능 연습 & 3) 앱 만들기 ☀︎ 4) styled-components 5) 𝒘𝒊𝒕𝒉 타입스크립트 2. 연습하기 2-1. To-do App 지금까지 배운 걸 활용해 간단한 투두리스트를 만들어 봅니다! 우선 투두를 입력할 인풋이 있어야겠죠! /* App.js */ function App() { return ( ); } export default App; 이 인풋의 value는 state로 관리하려고 합니다. useState를 쓰윽 써줄 차례네요. const [todo.. 공감수 1 댓글수 0 2022. 2. 3.
[ReactJS] 1. 시작하기 이 글은 NomadCoders의 강의 내용을 정리한 글입니다. 넘나 좋은 강의 (게다가 무료!) 🙇🏻‍♀️ 감사합니다 🙇🏻‍♀️ 개인 스터디 글로, 맞지 않는 내용이나 더 나은 방법을 공유해 주신다면 복받으실 거예요 👼🙌 1) 시작하기 ☀︎ 2) 기능 연습 & 3) 앱 만들기 4) styled-components 5) 𝒘𝒊𝒕𝒉 타입스크립트 1. 시작하기 1-1. 작업 환경 준비 먼저 node.js 가 설치됐는지 확인! $ npx create-react-app {app-name} CLI로 프로젝트를 생성합니다. 참고로 {app-name}에는 대문자를 표시할 수 없으므로 대시(-)로 단어를 연결합시다. (🙅‍♀️ myMovie vs. 🙆‍♀️ my-movie) npx는 npm의 자식으로, npm@5.2.0 .. 공감수 2 댓글수 7 2022. 2. 1.
border: 0 vs. border: none 결론 border: 0 쓰자! 👻 보더 없앨 때 none 보다 0을 썼었는데 이유는 그게 더 치기 편하니까 🙄 (손꾸락은 소중하자나여) 그러다 어느날 앗 내가 혀를 어디다 두고 있었지! 를 자각하는 것처럼 0과 none의 차이가 뭐지!를 자각해버린 바람에 정리하는.. 그런... 글.... 일단 W3C의 문서를 촤르륵 훑어보면 border 단축 속성은 border-width, border-style, border-color 를 한번에 적용할 수 있다. 여기서 0과 none의 차이가 갈린다. border: 0; border: none; border-width: 0; border-width: medium; border-style: none; border-style: none; 즉, border-width를 0.. 공감수 12 댓글수 2 2022. 1. 17.
코어자바스크립트 - 자바스크립트 기본 자바스크립트 기본 https://ko.javascript.info/first-steps 엄격 모드 자바스크립트는 기존 기능을 변경하지 않고 추가만 하는 식으로 호환성 문제를 회피했습니다. 그런데 ES5(2009)에서 기존 기능 일부를 변경하게 되었는데요, 혹시나 싶은 문제를 피하기 위해 이 새로운 기능들은 기본적으로 비활성화 상태입니다. 새롭게 추가된 기능을 쓰고 싶다면, use strict라고 외쳐주세요. 그럼 '엄격 모드'가 됩니다. 이 주문은 주로 스크립트 최상단에서 외칩니다. 그래야 스크립트 전체가 엄격 모드로 적용되니까요. 만약 클래스와 모듈을 사용해 스크립트를 작성했다면 이미 엄격모드가 적용된 거나 다름 없어서 굳이 적지 않아도 됩니다. 기본 연산자와 수학 %(나머지 연산자): x % b 는 .. 공감수 3 댓글수 0 2022. 1. 2.
reset.css vs. normalize.css reset과 normalize가 필요한이유 브라우저에서 가장 먼저 적용되는 스타일은? User-agent Stylesheet !! 이는 브라우저에서 제공하는 기본 스타일인데 브라우저마다 그 내용이 다름다름 그래서 똑같은 태그여도 Chrome, Safari, Edge 등 브라우저마다 다르다. 이렇게 브라우저마다 차이가 있으면 당연히 작업할 때 화딱지가 남 😵 따라서 ‘사전 정의한 스타일시트’를 적용해 각 브라우저의 기본 스타일을 무효화시키는 방법이 자주 쓰인다. 바로 reset 또는 normalize! 둘이 비스무리하지만 사실은 다르다는 거 허허허 reset vs. normalize reset 모든 브라우저 스타일을 ‘초기화’ 한다. 왜냐면 처음부터 다시 그려줄 거니까! 장점: 익숙한 방법. 그냥 새하얀 .. 공감수 1 댓글수 1 2021. 12. 29.
2021년 회고 약해져야 알 수 있는 것 2021년의 끝. 매년 ‘벌써?’라며 놀라지만 올해는 더더욱 실감이 안 난다. 시간은 참 무상히 흐르지만 그렇기에 위안을 받기도 한다. 봄이 가지만, 다시 꽃피는 봄이 오는 것처럼. 해가 지지만, 다음날 또 해가 떠오르는 것처럼. 나의 작고 반짝였던 한 해. 완벽하진 않았지만 꽤 괜찮았어. 작년도 의도치 않은 상황들로 인해 참 힘들었는데, 올해도 고민으로 가득하고 눈물로 얼룩진 해였다. 나는 항상 고민이 많았다. 그리고 불만도 많았다. 항상 ‘다음’을 생각했다. 내가 있는 곳이 완벽한 곳이 아니기 때문에, 언제나 더 나은 곳을 염두에 두어야한다고 생각했다. 연초에 대리 직급을 달았을 땐 참 묘한 기분이었다. 지난주까지는 내 이름을 불러주던 사람들이 ‘대리님’이란 직급으로 부르고,.. 공감수 14 댓글수 0 2021. 12. 29.
2021년 정보처리기사 실기 3회 보고 온 후기 + 요약본 공유 "크크킄 그녀석은 기사 중 최약체지" 라는 말을 듣는 정처기지만, 아무튼 합격했습니다! 모로 가도 땄으면 된 걸로 ;) 이런저런 일로 포스팅을 미루고 있었는데, 이것도 안 쓰면 또 까먹을 거라 더 늦기 전에 써봅니다. 혹시 관련 담당자분들 지나가다 보시면 저희 수험자들의 처절한 마음 좀 알아주시길... 🥺 2021 3회차 정보처리기사 실기 후기 3개월 노가다 정처기 필기를 2021년 1회차 때 응시했지만, 공부하기 너무너무 싫어서 😵 미루고 미루다가 올해가 가기 전엔 끝내야겠다는 마음으로 3회차를 준비했습니다. 일단 전 비전공자고 직장인입니다. 와 자체 하드모드! 하지만 1트에 시험을 끝내고 싶어서 준비기간을 좀 길~~게 잡고 3개월 정도 달렸습니다. (물론 이게 다 공부 시간 아닌 거 아시죠...ㅎㅎㅎ.. 공감수 149 댓글수 69 2021. 11. 27.
일기로 나만의 책 만들기 2020 재작년에 하고 싶었던 일을 올해 8월에 끝낸 사람이 있다?!! 드디어!!!! 책으로 만들었씁니당!!! (자랑자랑) 재작년 11월부터 써온 일기를 묶어 제본했습니다 ✌️ B6 사이즈로 하드커버, 총 220 페이지입니다. 작년 회고록에도 썼지만 일기를 종이책으로 만들겠다는 의지를 불태워가며 썼었는데, 어쩌다보니 8월이 돼서야 제본을 끝냈네요 허허허 그래서 자랑할 겸 이 프로젝트를 소개하는 글을 씁니다 😚 (여러분 일기 써보새오 아주 조아요) 매일 글쓰기 이 프로젝트를 시작한 진짜 이유는 책 만들고 싶어서. 종이 책 팔랑팔랑 넘기면 기분 좋잖아요!! 하드커버 보고 있으면 예쁘잖아요!!! (책을 자주 읽는가는 차치하고) 넵, 그냥 책 한번 만들어 보고 싶었어요. 제본이야 맡기면 되니 어려운 일은 아니지만 문제는.. 공감수 29 댓글수 23 2021. 8. 7.
[아무튼 Sass] 1. 시작하기 - Sass 개념, 컴파일러 설치 프롤로그 "CSS 인생은 전처리기를 도입하기 전과 후로 나뉜다" ......이런 말은 없지만, Sass를 배우면 CSS 작성이 짱짱 편해집니다. 신입 퍼블리셔부터 스타일시트 관리를 하는 개발자까지, Sass에 대해 한번 정도 슥- 읽어두면 도움이 많이 될 거에요! 그래서 최대한 쉽고 편하게 익힐 수 있도록 시리즈물(?!)로 글을 써봅니다. 분량이 얼마나 될진 저도 몰라요 ∠( ᐛ 」∠)＿ 헿 (총 4편의 시리즈가 되었습니다 ✌️✌️) 아무튼 Sass 시리즈 1. 시작하기 - Sass 개념, 컴파일러 설치 👈 Here! 2. 기본 작성법 익히기 - 중첩, 참조, 변수, 보간 3. 더 편하게 CSS 다루기 - mixin, extend, 모듈화(import/use) 4. 더 멋지게 활용하기 - 흐름제어, 내장.. 공감수 80 댓글수 38 2021. 7. 10.
버튼에 타입을 쓰는 이유 (button type="button") 프롤로그 가끔 이렇게 type을 명시한 버튼을 마주칠 때가 있는데 전 항상 궁금하더라구요. "아니 버튼이면 버튼이지 버튼 타입 버튼은 대체 뭐람" 그러고보면 비슷하게 타입을 명시하는 이라는 것도 있었던 거 같은데요...? 도대체 타입은 왜 달려있는가! 그 이유를 한번 찾아보았습니다 🔍 버튼 타입 = 버튼? Q. button에 type="button" 을 지정해주는 이유? A. 그게 디폴트가 아니니까요! button의 type에는 3가지 값을 지정해 줄 수 있는데 각각 submit, reset, button입니다. 만약 아무런 값도 지정하지 않았다면 기본값은 submit이 됩니다. 그러니까 === 인 셈이죠. 따라서 form 태그 내에서 button을 사용할 때 타입 명시가 없다면 기본적으로 'submit.. 공감수 121 댓글수 22 2021. 5. 1.
SVG 아이콘 백그라운드 이미지로 활용하기 프롤로그 시안 상에 얼핏 보기에는 비슷한 꺽쇄 아이콘이 여러 개가 있습니다. 하지만 자세히 살펴보면... 서로 색도 미묘하게 다르고 크기도 달라요..!! 이걸 표현하려면 총 세 개의 이미지가 필요합니다. 저 아이콘을 위해 이미지를 세 장이나 불러와야 한다니.... 스프라이트로 저장해서 사용하는 방법도 있긴 하지만, 만약 수정사항이 생기면 어떨까요? 이렇게 형태는 같지만 크기가 더 크고 색이 다른 아이콘이 필요해졌다고 해봅시다. 스프라이트 이미지를 가져다 쓰려고 해도 기존 거는 크기랑 색이 달라서 대응할 수가 없..죠......ㅠ_ㅠ 만약 저 아이콘이 픽셀이 아니라 코드라면 수정하기 참 편할 텐데요! 그럼 필요할 때마다 이미지의 색상 값과 크기 값을 변경해서 사용할 수도 있을 거고요. 이럴 때 필요한 게 .. 공감수 47 댓글수 14 2021. 4. 11.
2021년 정보처리기사 필기 1회 보고 온 후기 지난 3월 초에 정보처리기사 필기 시험을 보고 왔습니다. (👀 말 그대로 보고 옴) 분명 볼 때는 이게 다 뭐냐고 울부짖은 거 같은데 끝나고나니 다 까먹는 기적! 으아ㅏㅏ 더 이상 까먹으면 안 될 것 같아 나중에 참고하려고 씁니다... 합격하긴 했지만 내용은 팁이라기보단 리얼 후기입니당 ✍️ 왜 봤더라 작년에 비자발적 백수가 된 뒤, 할 일도 없는데 공부나 할까? 라는 안일한 마음으로 정처기 필기책을 샀었는데요. 음, 다섯 장 보고나서 라면 받침대가 되었습니다. 하지만 책 값이 아깝기도 하고(내 치킨 한마리 반!) 올해엔 자격증 취득 좀 해야겠다는 목표로 1월부터 공부를 시작했습니다. 전에도 전공이 아닌 자격증을 딴 적이 있으니까 괜찮지 않을까? 하는 안일한.. 마음으로.....ㅋㅋㅋㅋㅋ 안타깝게도 그때.. 공감수 11 댓글수 7 2021. 4. 5.
JPEG vs. PNG: 적절한 이미지 포맷 선택하기 (2) - PNG편 프롤로그 지난 글에서는 JPEG의 특징에 대해 살펴보았으니, 이번엔 PNG에 대해 알아봅니다! 이 시리즈의 이전 글: JPEG vs. PNG: 적절한 이미지 포맷 선택하기 (1) - JPEG편 PNG를 소개합니다 PNG 역시 웹에서 널리 사용되는 이미지 포맷 중 하나입니다. JPEG와 마찬가지로 픽셀로 이루어진 비트맵 그래픽이기도 하고요. 이름은 Portable Network Graphics의 약자로, 말그대로 ‘인터넷’에서 표현될 이미지를 염두에 두고 개발되었습니다. 따라서 RGB가 아닌 색 공간(CMYK 등)은 지원하지 않습니다. PNG 역시 24비트 이상의 색상, 곧 트루 컬러를 지원합니다. 그런데 JPEG랑 다르게 8비트 알파채널을 지원하기 때문에 다양한 투명도를 표현할 수 있습니다. box-sh.. 공감수 17 댓글수 8 2021. 1. 27.
JPEG vs. PNG: 적절한 이미지 포맷 선택하기 (1) - JPEG편 프롤로그 이미지 저장할 때 이런 고민한 적 없으신가요? 🤔🤔 이미지는 웹페이지에서 많은 부분을 차지하는 리소스입니다. 따라서 용량이 적을 수록 당연히 좋죠. 그래서 이미지를 표시할 때 적절한 포맷을 택하는 것이 여러모로 중요합니다. 웹에서 사용하는 주 이미지 포맷은 JPEG와 PNG일 텐데, 그럼 둘 중에 뭘로 저장하는 게 좋을까요? 저는 기존까지 이렇게 알고 있었는데요, JPEG → 복잡한 이미지나 사진 PNG → 단순한 이미지, 투명 표현이 필요한 이미지 결론부터 말하면 저게 맞습니다! 👀어... 너무 당연한 얘기를 했나요 👀 ‘사진은 JPEG! 투명 배경은 PNG!’라고만 알아도 충분하긴 하지만, 그 이유가 궁금하기도 했고 사진도 아니고 투명하지도 않은 이미지는 어떤 포맷이 맞는 걸까 싶을 때도 있.. 공감수 7 댓글수 6 2021. 1. 23.
2020 회고...는 망했지만 뭐 어때 🤷‍♀️ ?! 헉 잠깐 사이에 1월이 벌써 절반이 지났다니 ?! 살짝 늦긴 했지만 그래도 기록을 위해 남기는 2020 회고...!! 한 살을 더 먹었다는 게 아직도 납득(??)이 안 되지만 새 출발을 위해 기록을 남겨봅니다 ;) 프롤로그 2020년은 다사다난, 이 네 글자가 아주 찰떡인 해였다. 이것저것 신나게 세웠던 계획들이... 물 건너 산 건너 멀리멀리 가버렸으니까... ☠️ 아니 그전에 일단 다니던 회사가 망했는데요 😹 갑자기 듣도보도 못한 일들이 우당탕 쏟아져서 참 힘들었던, 여러모로 亡한 해였다. 그래도 돌이켜보면 꼭 나쁜 일만 있던 건 아니었다. 여행이 취소돼서 목표로 했던 금액을 모으는 데 성공했고, 회사가 망해 이직을 준비하는 동안 미루던 블로그도 업데이트 했다ㅎㅎㅎ 이래저래 다이내믹한 한 해였는.. 공감수 29 댓글수 16 2021. 1. 16.
[티스토리 스킨 무료 배포] Log Skin; 로그 스킨 티스토리 스타일의 반응형 스킨. 포스트에 집중할 수 있는 깔끔한 스타일입니다 ;) Log Skin v1.1 * 크롬 브라우저 기반이며 IE에 대응하지 않습니다. * 공지사항, 위치 로그 등 일부 페이지는 지원하지 않습니다. 미리보기 현재(2021.1) 이 블로그에서 사용 중인 스킨입니다. 스킨 적용하기 1. 스킨을 다운로드 받은 뒤 압축을 해제합니다. 2. 티스토리에 접속 후, 로그인 - 블로그 관리 - 스킨 변경으로 이동합니다. 3. 새로운 스킨을 적용하기 전, 꼭! 사용중인 스킨을 '보관'해 주세요. 새 스킨 적용 시 모든 내용이 초기화됩니다. 4. 우측에 '스킨 등록' 버튼을 눌러 등록 화면으로 이동합니다. 5. '추가' 버튼 클릭 후, 다운로드 받은 모든 파일을 업로드 합니다. (images 폴더.. 공감수 59 댓글수 59 2021. 1. 13.
스크롤 앵커링: 더보기 버튼이 이상했'었'던 이유 (overflow-anchor) 프롤로그 왜 제목이 저러냐면요... 얼마 전까지 ‘더보기’ 버튼이 생각과는 다르게 동작한 적이 있‘었’습니다. 위와 같이 더보기 버튼을 클릭하면 그 위로 아이템을 추가하는 형식의 UI였는데, 이상하게 버튼이 고정된 채로 버튼 위에서 새로운 아이템이 추가됐었거든요. 기획: "더보기 버튼을 누르면 추가 영역이 아래에 펼쳐지는 게 아니라 위로 올라가는 느낌이 들어요." 디자인: "그러게요. 버튼은 고정이고 내용이 위에서 열리는 형식 같은데... 밑으로 열리게 가능한가요?" UI개발: ???? 확인해보니까 다른 브라우저에선 해당 현상이 없고, Chrome 브라우저에서만 버튼 또는 a 태그와 같은 포커스가능 요소를 클릭한 경우 해당 현상이 발생했습니다. 또, 돔 추가뿐만 아니라 display나 max-height.. 공감수 17 댓글수 11 2020. 11. 22.
반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성 프롤로그 지난 글에는 반응형을 위해 필요한 뷰포트 메타태그와 미디어 쿼리에 대해 다뤘었는데, 이번에는 CSS 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보려고 합니다 🤟 히어뤼고! 이 시리즈의 이전 글: 반응형 웹 뚝딱 만들기 (1) 1. vw / vh CSS 작업을 할 때 주로 사용하는 단위는? 픽셀(px)이요! 하지만 고정 단위인 px 대신 유동 단위인 %를 사용하면 좀 더 유연한 코드를 만들 수 있어요. 예를 들어 width:50%로 지정해두면 항상 부모의 절반 사이즈를 가지니까 이것 역시 좋은 반응형 CSS죠! %말고도 유연한 값을 가지는 단위가 몇 개 있는데요, 우선은 vw, vh라는 친구들을 만나봅니다 🙋‍♀️ v, 뷰포트를 기준으로 하다 이들의 풀네임은 Viewport Wid.. 공감수 422 댓글수 39 2020. 8. 23.
반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리 이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 프롤로그 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 찾아볼 수 있습니다. 빠트릴 수 없는 기술이 된 만큼, 오늘은 반응형을 만들기 위한 몇 가지 방법들을 정리해봤습니다 🤘 이 글에서는 반응형을 위한 기본인 뷰포트와 미디어 쿼리를 다루며, 다음 글에서는 CSS 속성을 활용해 빠르게 반응형을 만드는 법을 다룰 생각입니다. (투비 컨티뉴!) 1. meta 태그 - viewport VS CODE 등에서 자동 html을 생성해 보신 적이 있으신가요? (! 치고 tab키를 누르면 뿅하고 나오는 그거요) 이때 기본으로 작성되는 내에 아래의 태그가 들어간 것을 볼 수 있.. 공감수 52 댓글수 14 2020. 8. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.