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개의 값을 작성할 수도 있다.

구문

  • [left | center | right] || [top | center | bottom]

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

    right
    center top
  • [left | center | right | 〈length-percentage〉] [top | center | bottom | 〈length-percentage〉] ?
    right 10%
    15% 100px
    20%

     

  • [[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

CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

CSS1.0권장

Last review date: 2022-6-4

CSS2.1권장

Last review date: 2022-6-4

지원 웹브라우저