CSS2 CSS Position 검색하는 것은 여기서 끝내기 | absolute? relative ? 같이코딩 - CSS Position (실습포함) 오늘은 CSS position 속성에 대해 알아보겠습니다. position은 컨텐츠를 어떻게 배치시킬지에 대한 방식을 결정하는데요 우리가 이렇게 레이아웃을 다 짜고 어떤 특정 요소의 위치를 살짝 변경하고 싶을때가 있습니다. 이때 position을 사용하게 됩니다. position을 처음 접하게 되었을 때 어떤 상황에 무슨 속성값을 넣어야 하는지 많이 헷갈립니다. 자 그럼 더 이상 헷갈리지 않도록 쉽게 그림을 통해 정리해드리겠습니다. 기본적으로 아무런 position 값을 설정해주지 않았을 때 position은 default값으로 static을 가집니다 이때 위치를 변경하고자 top bottom과 같은 속성을 사용해도 요소는 움직이지 않습니다. 즉 위치를 변.. 2023. 10. 3. CSS grid 그림으로 보면서 쉽게 이해하기 css grid - 실습내용 포함 웹사이트에서 레이아웃을 잡기위해 css속성인 display flex와 grid를 많이 사용합니다. 그 중에서 grid는 2차원 요소를 레이아웃하는데 최적화 되어 있는데요. flex는 1차원 요소를 레이아웃 하는데 최적화 되어 있습니다. 이런식으로 수평이나, 수직 구조를 디자인 하기에 정말 편하죠. flex만으로 구성하여 2차원 레이아웃을 구성할 수도 있지만 개발자는 항상 편하고 깔끔한 것을 추구합니다. 그래서 2차원 레이아웃을 구성하고자 할 때 우리는 grid를 사용해야 합니다. 그리드 컨테이너 내부에서는 이렇게 자유롭게 요소를 배치시킬 수 있죠 여기서 이 컨텐츠를 담는 박스를 grid container라고 합니다. 그리고 grid container 안에 들어가는 요소를.. 2023. 9. 25. 이전 1 다음
