• 회원가입
  • 로그인
  • 구글아이디로 로그인

[position] CSS - right 속성 ★ - 오른쪽기준(= 우측기준) 위치 지정 (= right속성 = 라이트속성) ※ 상속X

목차

  1. right 정의 - 오른쪽 기준 위치 지정
  2. right 구문
  3. right 예제 - position:static 경우
  4. right 예제 - position:absolute 경우
  5. right 예제 - position:fixed 경우
  6. right 예제 - position:relative 경우

 

right 정의 - 오른쪽 기준 위치 지정

 

요소 위치를 우측 기준에서 얼마나 좌측으로 위치시킬건지 지정.

  • 양수 : 기준선 좌측
  • 음수 : 기준선 우측

 


 

1. 

right 속성은 position 속성과 함께 사용하며, 

position 속성의 속성값이 static 일 땐 top 속성이 무시됨.

 

2. 

right 속성의 속성값이 동일해도, 

해당 요소 및 부모 요소의 positon 속성의 속성값이 뭐냐에 따라 위치가 달라.

 

 

right 구문

 

선택자 {right:속성값;}

 


[속성값]

 

auto
상단 기분점에서 얼마나 밑으로 내려 위치시킬 건지 브라우저가 자동 결정  (기본값)
 
length (px, cm 단위 등) 
상단 기준점에서 몇 px, cm만큼 밑으로 내려 위치시킬 건지 지정. 
음수값 경우 기준점보다 더 우측 위치
 
% 단위
상단 기준점에서 해당 요소의 % 만큼 밑으로 내려 위치시킬 건지 지정
음수값 경우 기준점보다 더 우측 위치
 
initial
이 속성의 기본값으로 설정.
 
inherit
부모 요소의 속성값 상속.

 

 

※ 아래 예제들의 .parent 클래스 갖는 요소에 각각 아래 속성들을 추가해서도 확인 바람.
position:static;
position:relative;
position:absolute;
position:fixed;
position:sticky;

 

right 예제 - position:static 경우

문서 흐름인 p요소 열에 맞춰 위치, 이 경우top, right 속성은 무시됨.
 
<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;
        right: 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>
 

 

right 예제 - position:absolute 경우

부모 요소인 브라우저 기준, top right 속성에 의해 상단 우측 기준, 스크롤하면 위치 변함
 
<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;
        right: 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>
 
 

right 예제 - position:fixed 경우

부모 요소 브라우저 기준, top right 속성에 의해 상단 우측 기준, 스크롤 해도 위치 불변.
 
<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;
        right: 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>
 

 

right 예제 - position:relative 경우

해당 요소가 원래 있던 자리 기준, top right 속성에 의해 우측 구석 기준.
 
<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;
        right: 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>
 
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
position CSS - clear 속성 ★ - float 해제후 줄바꿈 (= 클리어속성, clear속성, 상속 X)
position CSS - display 속성 ★★★★★ - 요소유형지정 (= 요소성격변 = 요소노출방식 = display속…
position CSS - position 속성 ★★★ - 위치기준대상지정 (= 위치속성 = 포지션속성 = 위치조정 = po…
position CSS - top 속성 ★ - 기준상단 (= 위기준 상단거리 = top속성 = 탑속성/톱속성)
position CSS - right 속성 ★ - 오른쪽기준(= 우측기준) 위치 지정 (= right속성 = 라이트속성) ※…
position CSS - bottom 속성 ★ - 기준하단 (= bottom속성 = 하단기준 = 아래기준 = 바텀속성 = …
position CSS - left 속성 ★ - 왼쪽기준 (= left속성 = 좌측기준 = 레프트속성, 상속 X)
position CSS - z-index 속성 ★ - 요소층수지정 (= 요소상하지정 = 요소상하결정 = 위아래지정 = z-…
position CSS - visibility 속성 ★ - 보임설정 (= 노출설정 = visibility속성 = 비저빌러티속…
position CSS - overflow 속성 ★★ - 범위이탈요소처리 (= 범위넘는요소처리 = 스크롤바 생성 = over…
position CSS - clip 속성 (폐기예고) - 이미지 자르기 (= 일부만 노출 = clip속성 = 클립속성)
css CSS - cursor 속성 - 커서 모양 (= cursor속성 = 커서속성)
intro CSS - !important 키워드 - 당해 속성값 강제 우선적용 (= 우선순위표시 = 느낌표임포턴트)
css CSS - opacity 속성 - 불투명도 (= opacity속성 = 오패서티속성/오페서티속성) ※ 있는데 …
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 입문
6/25
목록
찾아주셔서 감사합니다. Since 2012