CSS Types

CSS Types

Editing

<position>

박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.

설명

<position> 타입은 아래의 여러 값 중에서 하나 혹은 두 개의 값(x, y 좌표)으로 지정할 수 있다.

  • 위치 키워드 : left, top, right, bottom, center(다른 나머지 값이 의미하는 방향에 가로 또는 세로 방향으로 가운데가 될 수 있음)
  • 상대적 위치 : <percentage> 
  • 절대적 위치 : <length> 값을 지정하며 음수도 가능

하나의 값만 지정하는 경우에는 x 좌표를 의미하는 것이며 y 좌표는 center가 기본 값이다.

background-position 속성은 <position> 타입의 값을 지정하지만 예외적으로 3개 또는 4개의 값을 작성할 수도 있다.

구문

  • CSS Backgrounds and Borders Module Level 3
    [left | center | right] || [top | center | bottom]

    다음과 같이 값이 지정될 수 있다.

    right
    center top
  • CSS Backgrounds and Borders Module Level 3
    [left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>] ?

    다음과 같이 지정될 수 있다.

    right 10%
    15% 100px
    20%
  • CSS Backgrounds and Borders Module Level 3
    [[left | right] <length-percentage>] && [[top | bottom] <length-percentage>]]

    x, y축 위치 값이 순서와 관계없이 모두 작성되어야 하며 각 방향별로 center를 제외한 키워드와 공백 후 실제 <length-percentage> 타입의 값을 지정한다.

    top 10% right -10px

사용되는 키워드

키워드요약
bottom

기준 위치를 아래쪽으로 한다.

center

중앙을 기준으로 한다.

left

기준 위치를 좌측으로 한다.

right

기준 위치를 우측으로 한다.

top

기준 위치를 상단으로 한다.

사용되는 타입

버전 명세

Modules
Module NameStatusSummary
CSS Values and Units Module Level 3편집자 초안

Last review date: 2022-6-4

CSS1.0권장

Last review date: 2022-6-4

CSS2.1권장

Last review date: 2022-6-4