CSS를 사용하여 텍스트 이동
Jay Singh
2023년2월20일
CSS는 HTML 요소의 위치를 지정하는 데 도움이 됩니다. 모든 HTML 요소는 페이지의 아무 곳에나 배치할 수 있습니다.
요소가 페이지의 자연 위치에 상대적으로 배치되어야 하는지 또는 상위 요소에 대해 절대적으로 배치되어야 하는지를 선택할 수 있습니다. 이제 원하는 대로 페이지에서 텍스트를 이동할 수 있습니다.
position 속성과 위쪽 및 왼쪽의 두 값을 사용하여 HTML 텍스트 요소를 페이지의 아무 곳으로나 이동할 수 있습니다.
- 텍스트를 왼쪽으로 이동해야 하는 경우
left에 음수 값을 사용합니다. - 텍스트를 오른쪽으로 이동해야 하는 경우
left에 양수 값을 사용합니다. - 텍스트를 위로 이동해야 하는 경우
top에 음수 값을 사용합니다. - 텍스트를 아래로 이동해야 하는 경우
top에 양수 값을 사용하십시오.
CSS에서 상대 위치 지정을 사용하여 텍스트 이동
이 예에서 상대 위치 지정은 일반적으로 표시되는 위치를 기준으로 텍스트 요소의 위치를 이동합니다. 값을 늘리거나 줄이면 텍스트 요소를 이동할 수 있습니다.
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:20px; background-color:yellow;">
Hello! I am DelftStack.
</div>
</body>
</html>
CSS에서 절대 위치 지정을 사용하여 텍스트 이동
position: absolute를 사용하면 요소의 좌표가 화면의 왼쪽 상단 모서리에 상대적입니다.
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
Hello! I am DelftStack.
</div>
</body>
</html>