CSS left 속성

정의와 사용법

left 속성은 요소의 왼쪽 경계를 정의합니다. 이 속성은 정위치 요소의 왼쪽 외경계와 포함 블록의 왼쪽 경계 간의 이동을 정의합니다.

주의사항:"position" 속성의 값이 "static"인 경우, "left" 속성을 설정하면 어떤 효과도 발생하지 않습니다.

설명

static 요소에 대해, auto; 길이 값에 대해, 해당 절대 길이; 백분율 값에 대해, 지정된 값; 그렇지 않으면 auto.

대비 정의 요소에 대해, left의 계산 값은 항상 right와 같습니다.

또는 참조:

CSS 강의:CSS 정위치

HTML DOM 참조 문서:left 속성

예제

이미지의 왼쪽 경계를 포함 요소의 왼쪽 경계에서 100픽셀 더 오른쪽에 설정합니다:

img
  {
  position:absolute;
  left:100px;
  }

직접 테스트해 보세요

CSS 문법

left: auto|length|initial|inherit;

속성 값

값 설명
auto 기본값. 브라우저가 왼쪽 경계 위치를 계산합니다.
% 요소의 왼쪽 위치를 포함 요소의 백분율로 설정합니다. 음수 값을 사용할 수 있습니다.
length px, cm 등의 단위로 요소의 왼쪽 위치를 설정합니다. 음수 값을 사용할 수 있습니다.
inherit 부모 요소에서 left 속성 값을 상속해야 합니다.

기술 세부 사항

기본값: auto
상속성: no
버전: CSS2
JavaScript 문법: object.style.left="100px"

더 많은 예제

고정값으로 이미지의 왼쪽 경계를 설정
이 예제에서는 이미지의 왼쪽 경계를 고정값으로 설정하는 방법을 보여줍니다.
백분율로 이미지의 왼쪽 경계를 설정
이 예제에서는 이미지의 왼쪽 경계를 백분율로 설정하는 방법을 보여줍니다.

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
1.0 5.5 1.0 1.0 5.0