positioning [220414_TIL] css transform vs positioning css에서 element의 위치를 변경하는 방법 중에 transform과 positioning(top, left..) 가 있다. 둘 다 육안으로 보이는 결과화면은 같지만, 어떤 상황에서 무엇을 쓰는 게 더 적절할지 알아보려고 한다. 바로 결과 화면부터 보자면, 위와 같다. 3가지 모두 세번째에 있는 박스를 왼쪽 아래로 50px씩 내리려고 했다. 코드는 위와 같고 아래 두개는 둘다 positi... positioningTILCSStransformCSS TIL34: CSS -2 / Box Model and Layout Box Model : HTML과 CSS를 다루는데 있어 가장 기본적인 개념입니다. 종종 웹브라우저 화면에 나타나는 박스의 크기에 있어 어느 것을 기준으로 하느냐[border(노란색) 또는 content(하늘색)]에 따라 설정에 어려움을 겪는 경우가 많은데 이와 관련된 CSS 설정은 아래와 같습니다. 종종 이런 혼란을 막기위해 CSS 설정 이전에 미리 아래와 같이 설정하기도 합니다. 관련 Ch... layoutCSSBox ModelpositioningBox Model
[220414_TIL] css transform vs positioning css에서 element의 위치를 변경하는 방법 중에 transform과 positioning(top, left..) 가 있다. 둘 다 육안으로 보이는 결과화면은 같지만, 어떤 상황에서 무엇을 쓰는 게 더 적절할지 알아보려고 한다. 바로 결과 화면부터 보자면, 위와 같다. 3가지 모두 세번째에 있는 박스를 왼쪽 아래로 50px씩 내리려고 했다. 코드는 위와 같고 아래 두개는 둘다 positi... positioningTILCSStransformCSS TIL34: CSS -2 / Box Model and Layout Box Model : HTML과 CSS를 다루는데 있어 가장 기본적인 개념입니다. 종종 웹브라우저 화면에 나타나는 박스의 크기에 있어 어느 것을 기준으로 하느냐[border(노란색) 또는 content(하늘색)]에 따라 설정에 어려움을 겪는 경우가 많은데 이와 관련된 CSS 설정은 아래와 같습니다. 종종 이런 혼란을 막기위해 CSS 설정 이전에 미리 아래와 같이 설정하기도 합니다. 관련 Ch... layoutCSSBox ModelpositioningBox Model