search

hunter-hwang-dev / _hunterpedia-vue

React로 마이그레이션 하기 전 Vue.js 테스트 (2024-11-19 현재 사용하지 않음.)
1 stars 0 forks source link

html baseline과 `<html lang="ko">`, margin collapse, 브라우저 호환성 알기 #30

Closed hunter-hwang-dev closed 2 weeks ago

hunter-hwang-dev commented 2 weeks ago

html + css 강의 들으며 이것저것 만져보다가 발견한 사실:

Image Image

Image baseline이 레이아웃을 어그러지게 할 수 있구나... 헉!

hunter-hwang-dev commented 2 weeks ago

개발 블로그에 영어 페이지도 만들어 두려고 했는데, 와, 골치 되게 아프겠는데?

hunter-hwang-dev commented 2 weeks ago

그치만 분명 어떤 똑똑한 선밴님이 이 문제를 한 큐에 해결하는 방법을 기록해 두었겠지. 우선은 쓰루하고 할 일을 하자.

hunter-hwang-dev commented 2 weeks ago

Image margin collapse 테두리가 겹치면 일어나요!

hunter-hwang-dev commented 2 weeks ago

Image padding: 1px; 줘서 해결 가능하다고.

hunter-hwang-dev commented 2 weeks ago

Image 와 그렇구나. 해결책: box-sizing: border-box;

hunter-hwang-dev commented 2 weeks ago

Image Image 그래! 전체 프로젝트에 폰트 적용할 때 등등에 이런 게 필요했음

Image normalize css 키워드로 검색해서, 브라우저별 호환성을 미리 잡아두면 개발이 아주 편하다!

hunter-hwang-dev commented 2 weeks ago

CSS Normalize 링크 : https://github.com/necolas/normalize.css/blob/master/normalize.css