nana_log

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

Blog/etc.

티스토리 스타일의 반응형 스킨. 포스트에 집중할 수 있는 깔끔한 스타일입니다 ;) Log Skin v1.1 * 크롬 브라우저 기반이며 IE에 대응하지 않습니다. * 공지사항, 위치 로그 등 일부 페이지는 지원하지 않습니다. 미리보기 현재(2021.1) 이 블로그에서 사용 중인 스킨입니다. 스킨 적용하기 1. 스킨을 다운로드 받은 뒤 압축을 해제합니다. 2. 티스토리에 접속 후, 로그인 - 블로그 관리 - 스킨 변경으로 이동합니다. 3. 새로운 스킨을 적용하기 전, 꼭! 사용중인 스킨을 '보관'해 주세요. 새 스킨 적용 시 모든 내용이 초기화됩니다. 4. 우측에 '스킨 등록' 버튼을 눌러 등록 화면으로 이동합니다. 5. '추가' 버튼 클릭 후, 다운로드 받은 모든 파일을 업로드 합니다. (images 폴더..

2021. 1. 13.

Blog/CSS

프롤로그 왜 제목이 저러냐면요... 얼마 전까지 ‘더보기’ 버튼이 생각과는 다르게 동작한 적이 있‘었’습니다. 위와 같이 더보기 버튼을 클릭하면 그 위로 아이템을 추가하는 형식의 UI였는데, 이상하게 버튼이 고정된 채로 버튼 위에서 새로운 아이템이 추가됐었거든요. 기획: "더보기 버튼을 누르면 추가 영역이 아래에 펼쳐지는 게 아니라 위로 올라가는 느낌이 들어요." 디자인: "그러게요. 버튼은 고정이고 내용이 위에서 열리는 형식 같은데... 밑으로 열리게 가능한가요?" UI개발: ???? 확인해보니까 다른 브라우저에선 해당 현상이 없고, Chrome 브라우저에서만 버튼 또는 a 태그와 같은 포커스가능 요소를 클릭한 경우 해당 현상이 발생했습니다. 또, 돔 추가뿐만 아니라 display나 max-height..

2020. 11. 22.

Blog/CSS

프롤로그 지난 글에는 반응형을 위해 필요한 뷰포트 메타태그와 미디어 쿼리에 대해 다뤘었는데, 이번에는 CSS 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보려고 합니다 🤟 히어뤼고! 이 시리즈의 이전 글: 반응형 웹 뚝딱 만들기 (1) 1. vw / vh CSS 작업을 할 때 주로 사용하는 단위는? 픽셀(px)이요! 하지만 고정 단위인 px 대신 유동 단위인 %를 사용하면 좀 더 유연한 코드를 만들 수 있어요. 예를 들어 width:50%로 지정해두면 항상 부모의 절반 사이즈를 가지니까 이것 역시 좋은 반응형 CSS죠! %말고도 유연한 값을 가지는 단위가 몇 개 있는데요, 우선은 vw, vh라는 친구들을 만나봅니다 🙋‍♀️ v, 뷰포트를 기준으로 하다 이들의 풀네임은 Viewport Wid..

2020. 8. 23.

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.