목록레이아웃 (2)
가치투자자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/spj42/btsity0tRvc/rXuA9GeOC8k5q6HH3PoDK0/img.webp)
position 속성 1. position이란? position 은 레이아웃에서 요소를 어떻게 위치시킬지 결정해주는 프로퍼티(속성)다. 좌표 프로퍼티(top, bottom, left, right)와 함께 사용하여 위치를 정해줄 수 있다. position 속성을 사용하기 위한 문법은 다음과 같다. position: 속성값; 이제 position 속성에서 사용할 수 있는 속성값에 대해 살펴보자. 2-1. static (기본 위치) static 은 position의 기본 속성값으로, position 속성을 사용하지 않았을 때와 같다. html 코드의 순서대로 위에서 아래로, 왼쪽에서 오른쪽 순으로 배치가 된다. 이 속성값은 이미 설정된 position을 무력화히기 위해 사용될 수 있다. 좌표 프로퍼티(top,..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/B4FX0/btsiuJUi9iY/NbXX0IMHBOF2zb37RhKCnk/img.webp)
display 속성 브라우저에서 각 요소들을 어떻게 배치할지에 따라 디자인뿐만 아니라 사용성도 달라진다. 사용자들이 자주 찾는 기능들이 눈에 잘 띄는 곳에 깔끔하게 배치되어 있어야 편리하다고 느끼고 그 서비스를 더 자주 쓸 것이기 때문이다. 이와 관련하여 대표적으로 사용되는 css 속성인 display에 대해 살펴보고자 한다. 1. display란? display 는 레이아웃에서 요소들을 어떻게 보여줄지 결정해주는 프로퍼티(속성)다. display 속성을 사용하기 위한 문법은 다음과 같다. display: 속성값; 모든 요소는 기본적으로 display 속성을 가지고 있으며, 각 요소들이 가진 기본 속성값에 따라 배치가 된다. display의 대표적 속성값에는 다음과 같은 것이 있다. block : blo..