본문 바로가기

Position3

CSS 포지션 (3)_원하는 위치에 딱 배치하기! 저번에 다뤘던 것에 이어서 포지션에 대해서 더 알아보았다. 간단하게 복습하면 HTML요소의 좌표 기준은 항상 왼쪽 상단의 꼭지점이 기준이다. 그래서 top, bottom, left, right에 값을 넣어 주면 그 기준이 해당 값에 배치가 된다. (top: 50%, left: 50% - 왼쪽 상단 꼭지점이 그 좌표에 배치) 포지션을 정해줄 때 값을 px 등의 절대적인 값과 %등의 상대적인 값을 넣어 줄 수 있는데 이는 역시 입맛에 맞춰서 넣어주면 된다. 예를 들어서 '나는 이것을 부모요소의 정 가운데에 항상 위치시키겠어!' 라는 의도로 값을 넣는다면, 부모요소의 크기에 따라서 해당 요소가 바뀌면 안된다. 이러한 경우 % 와 같은 상대적인 값을 사용하면 어떤 상황에도 의도한 위치에 배치를 할 수 있을 것이.. 2022. 1. 6.

CSS 포지션 (2)_자동으로 정가운데 배치? 저번에 다루었던 position 속성을 이어서 이야기 해보자! 간단히 복습해보면 부모요소에 position: relative, 자식요소에 position: absolute를 적용해주어야 한다. 또한 추가적으로 html상으로도 부모-자식 관계이어야만 position이 적용이 된다! 그 이후에 top, bottom, left, right를 이용해 상 하 좌 우에 배치를 할 수 있다. 각각의 기준점은 다음과 같다! px, % 등으로 값을 넣어주어도 된다. .parent { position: relative; width: 500px; height: 500px; border: 1px solid #000; } .child { position: absolute; background-color: steelblue; w.. 2022. 1. 6.

CSS 포지션 (1)_부모요소 자식요소 position 속성 : static, fixed, relative, absolute 그 중에서 이번에 다룰 내용은 아래의 두가지이다. relative -> 부모요소에! absolute -> 자식요소에! 예시 .parent { background-color: blueviolet; width: 600px; height: 400px; position: relative; } .child { background-color: rgb(140, 132, 190); width: 200px; height: 100px; position: absolute; } position속성을 부모요소에 relative, 자식요소에 absolute로 지정해주었다. 이렇게만 해놓으면 아무 변화가 없다. 좌표를 지정해주어야 한다! 좌표값은.. 2022. 1. 5.

이전 1 다음

티스토리툴바