css2 inline vs inline-block strong태그에도 width와 height를 100px주고 div태그에도 width와 height를 100px 주었는데 실제로 strong태그에 style들이 어떻게 적용되었는지 살펴보면 width와 height가 적용이 안된것을 확인할 수 있다. div에 width와 height는 200px이 적용되었다(2px씩 늘어난건 border를 주었기 때문). 또, 여기서 살펴봐야될건 strong padding 100px과 block padding 100px인데 둘은 똑같이 padding이 100px 주어졌지만 공간을 차지하는 모습이 전혀 다르다. strong 태그는 보여질 때 inline 즉, 다른 요소들과 한줄에 위치해서 보여지고 div 요소는 한줄을 차지하는 block 속성을 가진다. strong 태그에.. 2024. 3. 31. css reset vs css normalize 두 사진 모두 같은 코드를 렌더링 한 결과이다. 다른점을 살펴보면 button태그를 사용했을 때 safari에서는 기본적으로 margin이 2px들어가있고 chrome에서는 0px들어가 있다는 것이다. 이렇게 다르게 렌더링 되는 이유는 User Agent StyleSheet라고 불리는 브라우저 내장 스타일이 브라우저마다 조금씩 다르기 때문이다. 이처럼 브라우저마다 UI가 다르게 보인다면 일관된 UI 제공이 어려워질 것이고 그것은 바로 사용자 경험의 저하로 이어질 것이다. 그렇다면, 이 문제를 해결하기 위해서는 어떤 방법들이 있을까? 브라우저의 기본값들을 모두 무시하고 하나하나 정해주는 방법(reset)과 브라우저간의 차이를 표준화하고 일반적으로 유용한 값들을 기본값으로 설정하는 방법(normalize)가.. 2024. 3. 31. 이전 1 다음
