nana_log

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

Blog/CSS

이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 프롤로그 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 찾아볼 수 있습니다. 빠트릴 수 없는 기술이 된 만큼, 오늘은 반응형을 만들기 위한 몇 가지 방법들을 정리해봤습니다 🤘 이 글에서는 반응형을 위한 기본인 뷰포트와 미디어 쿼리를 다루며, 다음 글에서는 CSS 속성을 활용해 빠르게 반응형을 만드는 법을 다룰 생각입니다. (투비 컨티뉴!) 1. meta 태그 - viewport VS CODE 등에서 자동 html을 생성해 보신 적이 있으신가요? (! 치고 tab키를 누르면 뿅하고 나오는 그거요) 이때 기본으로 작성되는 내에 아래의 태그가 들어간 것을 볼 수 있..

2020. 8. 12.

Blog/CSS

프롤로그 컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있습니다. 사용자가 이미지를 등록하는 경우 또는 마케팅 팀이 아무 이미지나 넣는 경우 이미지가 무너지지 않게 조절할 필요가 있죠. 이번에 object-fit 이란 속성을 알게 되면서, 이미지를 컨테이너 안에서 정렬하는 3가지 방법을 정리해봤습니다 🙋‍♀️ 1. object-fit 나 같은 오브젝트의 사이즈를 컨테이너의 크기에 맞춰 조절할 수 있어요. 너비와 높이값을 입력하고, object-fit 속성만 지정해주면 되니 편합니다. img { width: 300px; height: 150px; object-fit: cover; } object-fit:cover를 쓰면 가로세로 비율은 유지하면서 컨테이너에 꽉..

2020. 7. 18.

Blog/etc.

Critical Rendering Path 지난 글에서 웹 브라우저가 어떻게 일하는지 간략하게 알아보았습니다. 구글에서는 이를 Critical Rendering Path(CRP, 주요 렌더링 경로)라고 부르며, 이를 최적화하는 방법에 대한 강의와 문서도 있습니다. 사이트 최적화를 하는 방법 중 하나는 이 CRP를 간결하게 하는 것입니다. HTML 다운로드 Hello, world 우리가 웹 사이트에 접속하면 브라우저는 우선 서버에 페이지를 요청합니다. 이후 html에 대한 응답이 오면, 쉬고 있던(idle 상태의) 브라우저는 DOM을 만들기 시작합니다. 그리고 DOM이 다 그려지면 렌더 트리를 구현하고 페이지를 렌더링합니다. 위 이미지를 보면 html을 다운로드받는 데 205ms가 걸린 걸 볼 수 있습니다..

2020. 6. 12.

Blog/etc.

프롤로그 아직 개인홈피*^-^*가 유행하던 시절, 저도 홈페이지를 만들고 싶어서 금손님들의 스킨을 다운받곤 했었는데요. 그때 css파일을 보고 이건 뭘까... 얘는 왜 메모장으로 열리지... 했던 기억이 납니다. 네, TMI였습니다. 그래서(?) 오늘은 CSS를 배웠습니다. 익숙치 않은 개념이라 혹시나 잘못된 내용이 있으면 언제든 말씀 부탁드립니다. (천사님들 사랑합니다!) CSSOM CSS로 트리 만들기 지난 글에서 브라우저는 HTML을 보고 토큰화 과정을 통해 DOM을 만들어낸다고 했습니다. CSS도 이와 유사합니다. 한쪽에서 마크업을 해독하는 동안, 한쪽에서는 스타일시트를 보고 CSS Object Model(=CSSOM)을 만들어냅니다. 자, 브라우저가 HTML을 보고 뚝딱뚝딱 DOM을 설계하는 동..

2020. 6. 9.

Blog/etc.

프롤로그 저는... 처음으로 HTML 파일을 봤을 때... '이게 뭐지?' 싶어서 더블 클릭했더니 브라우저가 열려서 놀랐던 기억이 있습니다ㅋㅋㅋㅋ 사실 지금도 신기해요. 진짜 멋지죠. 그런고로 오늘은 이걸 공부해봅니다! 그래서 말입니다. 브라우저는 어떻게 동작하는 걸까요? (feat. 그알) *이 글은 구글링을 바탕으로 작성했습니다. 추가/수정/삭제가 필요한 부분을 말씀해 주시면 감사하겠습니다 :) 브라우저 브라우저란 브라우저는 서버에 자원을 요청(reqest)하고 그걸 응답(response)해 윈도우에 표시하는 역할을 합니다. HTML 파일이나 CSS 파일, 이미지 등이 서버에서 넘어오면 파싱(Parsing)이란 작업을 거쳐 화면에 그려냅니다. 이 과정에서 '어떻게 해석할까?'의 방식은 브라우저마다 조..

2020. 6. 7.

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(3) 8. Vuex 도입 이번 파트에서는 Vuex를 써봅니다 👐 이 어플리케이션은 너무너무너무 간단해서 라이브러리를 도입할 필요가 없지만, 이왕 배운 거 정리하면 좋을 거 같아서요! Vuex란 Vuex에 대한 설명은 공식 문서에 멋지게 정리되어 있습니다. Vuex는 상태 관리패턴 + 라이브러리입니다. 프로젝트 내의 여러 컴포넌트를 쉽고 효율적으로 관리할 수 있도록 도와줍니다. 공통의 state(상태, 컴포넌트 간 공유할 데이터를 말합니다)를 사용하는 컴포넌트가 많아지면 prop가 장황해지고 유지보수가 힘듭니다. 만약 컴포..

2020. 6. 3.

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(2) 7. UX 업그레이드 이제부터는 꼭 필요한 기능은 아니지만, 있으면 사용자 경험을 개선하는 데 도움을 주는 기능을 개발합니다. 이름 저장하기 저는 서비스의 트렌드 요소 중 하나는 '개인 맞춤'이라고 생각합니다. 로그인 한 사용자에게 맞는 홈 화면을 보여주는 네이버처럼요. 그래서 전 이름을 불러주는 서비스를 좋아합니다. (나에게로 와서 꽃이 되었다... 🌸) Momentum 서비스와 비슷하게, 처음 만난 사용자에게 이름을 묻고 저장하는 과정을 추가해 보겠습니다. 없던 기능이 추가된 거라 개발이 좀 꼬였는데 실무라 생각..

2020. 5. 30.