CSS right 속성이란?
CSS의 right 속성은 요소의 수평(가로) 위치를 지정하는 속성입니다. 기준이 되는 컨테이너의 오른쪽 가장자리부터 요소까지의 거리를 설정하며, position 값이 absolute, relative, fixed, sticky로 지정된 요소에만 적용됩니다.
기본 문법
right: auto | length | initial | inherit;
속성값 정리
- auto — 기본값으로, 브라우저가 위치를 자동으로 계산합니다.
- length — px, em, cm 등의 고정 단위로 거리를 지정합니다. 음수 값도 허용됩니다.
- % — 포함 블록(containing block)의 너비를 기준으로 백분율로 지정합니다.
- initial — 이 속성의 기본값(auto)으로 되돌립니다.
- inherit — 부모 요소의 right 값을 상속받습니다.
예제 1: position: absolute에서 right 적용하기
아래 예제는 절대 위치(absolute) 요소에 right: 90px을 적용한 모습입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-color: orange;
position: absolute;
right: 90px;
}
</style>
</head>
<body>
<h2>데모 제목</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</div>
</body>
</html>실행 결과: 주황색 배경의 문단이 화면(브라우저 창) 오른쪽 가장자리에서 정확히 90px만큼 떨어진 위치에 배치됩니다.
예제 2: position: relative에서 right: 0px
상대 위치(relative) 요소에 right: 0px을 지정하면 요소가 원래 있어야 할 자리에 그대로 유지됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
background-color: orange;
width: 100px;
position: relative;
right: 0px;
color: white;
}
</style>
</head>
<body>
<h1>Details</h1>
<div class="demo">Examination Center near ABC College.</div>
<div class="demo">Exam begins at 11AM.</div>
</body>
</html>실행 결과: 두 개의 주황색 박스가 문서 흐름상의 원래 위치에 그대로 표시됩니다.
예제 3: 음수(negative) 값 사용하기
right 속성에는 음수 값도 사용할 수 있습니다. 음수를 지정하면 요소가 반대 방향, 즉 오른쪽 바깥쪽으로 이동합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
background-color: orange;
width: 100px;
position: relative;
right: -100px;
color: white;
}
</style>
</head>
<body>
<h1>Details</h1>
<div class="demo">Examination Center near ABC College.</div>
<div class="demo">Exam begins at 11AM.</div>
</body>
</html>실행 결과: right: -100px의 영향으로 두 박스가 원래 위치보다 오른쪽으로 100px 이동한 것을 확인할 수 있습니다.
정리
right 속성은 요소의 수평 위치를 세밀하게 제어할 때 필수적인 도구입니다. left 속성과 함께 사용하면 양방향 위치 지정이 가능하고, 반응형 레이아웃에서는 % 단위를 활용하면 더욱 유연하게 대응할 수 있습니다.