c CSS

[position] CSS - left 속성 ★ - 왼쪽기준 (= left속성 = 좌측기준 = 레프트속성, 상속 X)

23,415

left 정의

해당 태그 위치를 좌측 기준으로 어디 쯤에 위치시킬건지 지정.

1.

left 속성은 position 속성과 함께 사용.

2.
position:static 일 땐, left 속성이 무시됨.

3.
left 속성의 속성값이 동일해도,
positon 속성의 속성값이 뭐냐에 따라 위치가 다르게 지정됨.

4.

기본값 : auto

상속여부 : X

애니효과 : O

CSS버전 : CSS2

JS구문 : object.style.left="100px"

5.

IE5.5 이상 모든 브라우저 지원.

6.

가로축 기준 정중앙에 위치 시키기. ★★★

left: 50%;

transform: translateX(-50%);

left 구문

선택자 {left:속성값;}

[속성값]

auto

왼쪽 기준점에서 얼마나 오른쪽에 위치시킬 건지 브라우저가 자동 결정 (기본값)

length (px 단위, cm 단위, % 단위)

양수 경우, 왼쪽 기준점에서 해당 길이만큼 오른쪽에 위치.
음수 경우, 왼쪽 기준점에서 해당 길이만큼 왼쪽에 위치.

initial

이 속성의 기본값으로 설정.

inherit
부모요소 속성값 상속

left 예제 - position:static 경우
문서 흐름인 p요소 열에 맞춰 위치, 이 경우top, left 속성은 무시됨.

<style>
      .parent {
        width: 720px;
        height: 1000px;
        margin: auto;
        border: 1px solid #b8064d;
        background-color: #f8e1eb;
        color:#b8064d;

        padding-left:10px
      }
      .child {
        width: 200px;
        border: 1px solid #b8064d;
        background-color: #f8e1eb;
        position: static;
        top: 100px;
        left: 100px;
        color:#b8064d;

        padding-left:10px
      }
    </style>

    <div class="parent">
      <p>홈짱닷컴 (homzzang.com)</p>
      <div class="child">
        <p>홈페이지 무료 제작 강의</p>
      </div>
      <p>HTML CSS 무료 강의</p>
    </div>

left 예제 - position:absolute 경우
부모 요소인 브라우저 기준, top left 속성에 의해 상단 왼쪽 기준, 스크롤하면 위치 변함

<style>
      .parent {
        width: 720px;
        height: 1000px;
        margin: auto;
        border: 1px solid #b8064d;
        background-color: #f8e1eb;
        color:#b8064d;

        padding-left:10px
      }
      .child {
        width: 200px;
        border: 1px solid #b8064d;
        background-color: #f8e1eb;
        position: absolute;
        top: 100px;
        left: 100px;
        color:#b8064d;

        padding-left:10px
      }
    </style>

    <div class="parent">
      <p>홈짱닷컴 (homzzang.com)</p>
      <div class="child">
        <p>홈페이지 무료 제작 강의</p>
      </div>
      <p>HTML CSS 무료 강의</p>
    </div>

left 예제 - position:fixed 경우

부모 요소 브라우저 기준, top left 속성에 의해 상단 왼쪽 기준, 스크롤 해도 위치 불변

<style>
      .parent {
        width: 720px;
        height: 1000px;
        margin: auto;
        border: 1px solid #b8064d;
        background-color: #f8e1eb;
        color:#b8064d;

        padding-left:10px
      }
      .child {
        width: 200px;
        border: 1px solid #b8064d;
        background-color: #f8e1eb;
        position: fixed;
        top: 100px;
        left: 100px;
        color:#b8064d;

        padding-left:10px
      }
    </style>

    <div class="parent">
      <p>홈짱닷컴 (homzzang.com)</p>
      <div class="child">
        <p>홈페이지 무료 제작 강의</p>
      </div>
      <p>HTML CSS 무료 강의</p>
    </div>

left 예제 - position:relative 경우

해당 요소가 원래 있던 자리 기준, top left 속성에 의해 왼쪽 구석 기준

<style>
      .parent {
        width: 720px;
        height: 1000px;
        margin: auto;
        border: 1px solid #b8064d;
        background-color: #f8e1eb;
        color:#b8064d;

        padding-left:10px
      }
      .child {
        width: 200px;
        border: 1px solid #b8064d;
        background-color: #f8e1eb;
        position: relative;
        top: 100px;
        left: 100px;
        color:#b8064d;

        padding-left:10px
      }
    </style>

    <div class="parent">
      <p>홈짱닷컴 (homzzang.com)</p>
      <div class="child">
        <p>홈페이지 무료 제작 강의</p>
      </div>
      <p>HTML CSS 무료 강의</p>
    </div>

CSS 관련글

코딩동강 관련글

HTML 관련글

JavaScript 관련글

jQuery 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

Bootstrap 4 관련글

코멘트입력

목록 글쓰기


분류	제목



table	CSS - border-collapse 속성★ - 테두리겹침설정 (= 테두리중첩설정 = 테두리이중방지 = b…

table	CSS - border-spacing 속성 - 테이블셀 테두리간격 (= border-spacing속성 = 보…

table	CSS - caption-side 속성 - 테이블표제위치 (= caption-side속성 = 캡션사이드속성)

css	CSS - 글자자르기 (= 문자열자르기 = 문자열줄이기= 글자길이자르기 = 문자열자르기 = 글자수자르기 = …

css	CSS - zoom 속성 - 요소 확대 (= zoom속성 = 줌속성) ※ IE 하위 브라우저(예: IE6, …

intro	CSS - CSS3 입문

intro	CSS - 브라우저 접두어 (= vendor prefix = 벤더 프리픽스)

border	CSS - border-radius 속성 ★ - 테두리둥글기 지정 (= border-radius속성 = 보더…

border	CSS - border-top-left-radius 속성 - 테두리상단왼쪽둥글기 지정 (= 보더탑레프트레이디…

border	CSS - border-top-right-radius 속성 - 테두리상단우측둥글기 지정 (= 보더탑라이트레이…

border	CSS - border-bottom-right-radius 속성 - 테두리 하단 오른쪽 모서리 둥글게 (= …

border	CSS - border-bottom-left-radius 속성 - 테두리하단왼쪽모서리둥글게 (= border…

border	CSS - border-image 속성 - 테두리이미지 (= border-image속성 = 보더이미지속성, …

border	CSS - border-image-source 속성 - 테두리 이미지 주소 (= border-image-so…

border	CSS - border-image-slice 속성 - 테두리이미지자르기 (IE11)

border	CSS - border-image-width 속성 - 테두리 이미지 너비 (= border-image-wid…

border	CSS - border-image-outset 속성 - 테두리 경계 넘는 이미지 양. (= 보더이미지아웃셋속…

border	CSS - border-image-repeat 속성 - 테두리 이미지 반복할지 늘릴지 선택 (= 보더이미지리…

background	CSS - background-clip 속성 - 배경영역 (= background-clip속성 = 백그라운드…

background	CSS - background-origin 속성 - 배경이미지 좌표시작점 (= 백그라운드오리진 속성)

7/25