전체 글8 CSS display:flex가 가지는 한계...해결책은 Grid flex는 1차원 레이아웃을 벗어나기가 힘들다 기존 반응형 작업을 위해서 대부분의 작업을 display:flex를 이용해서 처리하는 케이스가 많았는데, 아쉬운 한계점이 하나 있었다. 그것은 바로 flex 속성이 1차원 레이아웃(행이 1개인 경우)는 유용하지만, 2차원이 되는 순간부터는 크기 조절하는데 불편함이 있다. 위와 같이 한줄에 동일한 크기의 박스를 3개를 두는 레이아웃을 잡는다고 가정해보면, 한 줄에서는 각 col에 flex:1; 이라는 속성을 부여함으로써 동일한 크기로 자동적으로 나뉘도록 설정할 수 있다. box 1 box 2 box 3 하지만 3 x 2의 배열을 하고 싶다면 어떻게 해야할까? 가장 명확한 방법은 .row를 두개로 쪼개는 방법이지만, 이 경우 프론트 처리하면서 반복문을 돌리는 과.. 2024. 2. 8. 메타 태그(meta tag) 글자 수 몇 자가 적당할까? 온페이지 SEO의 기본이라고 볼 수 있는 메타태그. 실제로 html에서 메타태그로 입력하는 경우 글자 수에 제한이 없기 때문에 어느정도 길이로 입력해야할지 난감한 경우가 많다. 그럴 때는 아래의 기준을 참고해보자 기준1. 구글이 제안하는 메타태그 길이 메타태그는 크게 title태그와 description 태그로 나눌 수 있다. 일반적인 SEO 추천 공식에 따르면 title은 한글기준 50-60자 이내, description은 160자 이내로 작성하는 것을 권고한다. https://www.next-t.co.kr/seo/콘텐츠seo/홈페이지-웹사이트-기획자가-꼭-알아야-할-콘텐츠-seo/ 홈페이지(웹사이트) 기획자가 꼭 알아야 할 콘텐츠 seo 방법은? 웹사이트 콘텐츠 기획자 seo 프로세스 키워드전략,콘텐.. 2024. 2. 2. 모바일 웹에서 주소창 높이 만큼 화면이 가려지는 이슈 작업환경 Vue3 / Vite 사용언어 JS, CSS 브라우저 Safari, iOS 이슈상황 모바일 화면의 높이를 디바이스 화면크기와 동일하게 적용하는 과정에서 브라우저의 주소창 높이만큼 화면이 가려지는 이슈 일반적인 주소 입력창 높이 계산 방법 일반적으로 디바이스 화면에 꽉차게 적용하기 위해서 css를 활용해 100vh를 많이 사용하게 되는데, pc에서 브라우저를 통해 개발자 도구를 활용해 보면 문제가 없지만, 실제 모바일 디바이스로 확인 했을때 브라우저의 주소창 높이만큼 가려지게 된다. 구글링을 통한 해결 방법은 이러했다. 1. window.innerHeight로 UI를 제외한 화면 영역의 높이를 계산 2. 계산된 높이값을 CSS의 :root 변수로 전달 3. 높이를 지정할 element에 변수를 사.. 2024. 1. 29. 안녕하세요 개발자 B의 블로그를 시작합니다 2022. 11. 26. 이전 1 2 다음
