TIL #1. css:position, inline, float

ceres·2020년 1월 28일
0

TIL

목록 보기
1/34

Postion


복잡한 레이아웃을 만들기 위해서는 postion 프로퍼티가 사용된다.

position에서 사용하는 값은 4개가 있다.
position: static;
position: relative;
position: absolute;
position: fixed;

1. static

positon:static;은 기본값이다. static은 위치가 지정되지 않은 것으로 본다.

2. relatvie

position:relative;
자제로는 특별한 의미가 없다. 별도의 프로퍼티를 지정하지 않는 한 static 과 동일하게 동작한다. 적용이 되려면top, right, bottom, left은 position이라는 프로퍼티가 있어야 한다.

3. absolute

position: absolute 절대적인 위치에 둘 수 있다.
특정 부모에 대해 절대적으로 움직이는데, 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 의해 움직인다. 일반적으로는 부모에게 position: relative; 부여한다. (static으로 지정되지 않아야한다.)
가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는데 이건 잘 모르겠다..
기준으로 삼는 부토가 없다면 문서본문 (document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직인다.
값을 갖게 되면, 내용의 크기만큼만 가로크기가 된다.

4. fixed

페이지가 움직여도 늘 같은 곳에 위치한다. relative와 마찬가지로 top, right, bottom, left 등의 프로퍼티가 사용된다.

Block/Inline


1. block

대부분의 HTML 요소는 block 요소이다. div를 대표로 header, footer, p, li, table, h1 등이 모두 block 요소에 해당하는 태그이다.
block 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다. block 요소들은 항상 새 줄에서 시작하며 좌우로 최대한 늘어난다.

2. linine

span 이 대표 inline 요소이다. 링크에 사용되는 a 도 inline 요소 중 하나이다. 딱 텍스트만큼의 영역만 차지한다.

Float


img { float: right; margine: 0 0 1em 1em }

float은 레이아웃을 잡는데 사용된고 주로 이미지 주변에 텍스트를 감싸기 위해 만들어졌다.
float left 한 후 튀어나온거 부분은 overflow:hidden; 하니 사라졌다.

clear

clear 프로퍼티는 float의 동작 방식을 제어하는데 중요하다.
clear; left; 시 왼쪽에 떠 있는 엘리먼트들을 비울 수 있다. right, left, both(양쪽) 다 가능하다.

0개의 댓글