css (3) 썸네일형 리스트형 TIL no.14 - 레이아웃의 모든 것 : CSS - position 속성 - relative, absolute, fixed position은 css를 사용하여 HTML 의 레이아웃을 구성할 때 중요하게 작용하는 속성입니다. 블로그의 이전에 글로 작성한 적이 있지만 레이아웃을 설명할 때 빠질 수 없는 부분이기 때문에 한번 더 정리하도록 하겠습니다 ! position은 기본적인 default 값으로 static이라는 친구를 가집니다. 말 그대로 기본 속성이기 때문에 static에 대한 설명은 넘어가서 ~ *relative는 원래 위치에서 적용한 position의 위치로 이동하는 속성값입니다. 연두색 박스에게 position:relative; 를 적용시키고 top, right, left, bottom 중에 원하는 값만큼을 부여한다면 ~! .green_box.. TIL no.12 - div를 브라우저 화면 정가운데에 위치시키기 공부를 할 때마다 모르는 css를 찾아가며 배우는데도 뒤돌아서면 까맣게 잊어버리더라구요.. 그래서 매번 검색을 반복하다 검색한 횟수가 많아지면 자동적으로 습득되는 방식으로 css를 하나씩 제 것으로 만들 수가 있었습니다😫 웹사이트를 클론코딩할 때나, html을 구성할 때에도 div를 화면 정가운데에 위치시키는 방법에 대해 하나하나 해보게 되는데 그러다가 또 검색으로 이어지는 저를 보고 이번에는 정리해둬야겠다고 생각했습니다 !! 1. 첫 번째 방법은 margin-top 또는 margin-bottom 을 이용해 가운데로 위치시키는 방법입니다 ! div에 width를 반드시 지정시켜주어야 합니다. div를 정가운데에 위치시키기 위해서는 margin을 auto로 지정해주었을 때 가로에서 가운데에 위치합니다. 세.. TIL no.3 - position tag : CSS position tag의 Default 값은 static이다. relative : 원래 있어야 하는 아이템에서 옮겨간 것. absolute : 내가 담겨있는 상자 안에서 움직인 것. fixed : 상자에서 아예 벗어나서 페이지 상에서 움직인 것. sticky : 스크롤해도 원래 있던 자리에 붙어있는 아이. relative는 상대 위치 지정 요소로 원래 위치에서 세로축(top, bottom), 가로축(left, right)으로 거리를 지정할 수 있습니다. absolute는 절대 위치 지정 요소 중 하나이지만 static 속성을 가지고 있지 않은 부모를 기준으로 상대적으로 배치합니다. #parent { position : relative; width: 500px; height: 500px; } #child .. 이전 1 다음
