HTML&CSS

goohyun1990·2020년 8월 20일
0

HTML&CSS

목록 보기
1/6

position (static, relative, absolute, fixed) 의 속성

position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용(CSS속성)

position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다.

position 속성 사용법

static (기본값) :위치를 지정하지 않을 때 사용

relative : 위치를 계산할때 static의 원래 위치부터 계산한다.

absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. &bshp
(단, 가장 가까운 상위 요소를 기준으로 위치가 결정)

fixed : 원래 위치와 상관없이 위치를 지정할 수 있다

inline vs block vs inline-block 속성 비교

display: inline
대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다.

  • width/height 적용불가
  • margin/padding-top/bottom 적용불가
  • ine-height를 원하는대로 사용할 수 없다.

display: block
block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다. 대표적인 태그는 div가 있다.

display: inline-block
inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성

  • width/height 적용 가능
  • margin/padding-top/bottom 적용 가능
  • line-height 적용 가능

float

기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것

left : 요소를 왼쪽 방향으로 떠 있도록 설정
right : 요소를 오른 방향으로 떠 있도록 설정
none : 기본값(default), 요소에 어떤 방향도 부여하지 않음

0개의 댓글