HTML & CSS - Position & Display

Nina·2020년 9월 14일
0
post-thumbnail

1. Position

CSS의 position property는 element가 문서의 어느 부분에 위치할지를 결정한다.

(1) static

디폴트 값으로, top, right, bottom, left를 지정해도 아무런 영향을 미치지 않는다.

.static{
position: static;}

.static{
position: static;
top: 50px;
left: 50px;}

(2) relative

'position: relative'만으로는 아무런 변화도 나타나지 않는다. top, right, left, bottom값을 설정하면 원래 element의 위치에 상대적으로 변화한다.

.relative{
position: relative;}

.relative{
position: relative;
top: 50px;
left: 50px;}

(3) absolute

'position: absolute'만으로는 역시 아무런 변화가 나타나지 않는다. top, right, left, bottom 값을 설정하면 가장 가까운 ancestor element를 기준으로 변화한다.

.absolute{
position: absolute;}

<!--body에 상대적으로-->
.absolute{
position: absolute;
top: 50px;
right: 50px;}

(4) fixed

viewpoint에 상대적으로 위치한다. 따라서 페이지를 스크롤해도 고정된 자리에 위치하게 된다.

fixed {
posiiton: fixed;}

2. block, inline, inline-block

"The display property specifies the display behavior(the type of rendering box) of an element.

(1) block

block-level element들은 100%의 너비를 차지하고, 항상 새로운 줄에서 시작한다.

div, h1~h6, ul, ol, li, nav, main, header, footer, section, article, aside, p, table 등이 대표적인 block-level element이다.

(2) inline

inline element들은 필요한 만큼만의 너비를 차지하고, 새로운 줄에서 시작하지 않는다.

span, a, button, img 등이 대표적인 inline element이다.

(3) inline-block

inline-block을 사용하면 block-level element와 같이 너비와 높이를 지정할 수 있으면서, inline element처럼 줄바꿈을 하지 않고 화면 너비에 맞게 옆으로 정렬할 수 있다.

3. float

CSS의 float property는 element를 그 컨테이너의 왼쪽 또는 오른쪽에 위치시킬 수 있다. 이 때, 텍스트와 inline-element가 동 element를 둘러싸는 것이 가능하다.

div{
float: none;}

div {
float: left;}

div {
float: right;}
profile
https://dev.to/ninahwang

0개의 댓글