CSS를 사용하여 텍스트를 위로 이동

가끔 웹페이지를 개발하다 보면 텍스트를 하단이나 바닥글에 넣기 때문에 텍스트 아래에 여백을 두고 위로 텍스트를 옮겨야 할 때가 있습니다. 웹 페이지 하단에서 텍스트를 위로 이동하는 방법에 대해 알아봅니다.

position 및 bottom CSS 속성을 사용하여 텍스트를 위로 이동

아래 예에서는 bottom-text 클래스 이름을 사용하여 식별할 수 있는 <div> 요소를 만들었습니다. <div> 요소 안에 일부 텍스트와 함께 <h3> 요소를 추가하고 여기에 text 클래스를 할당했습니다.

CSS 코드에서 우리는 <div> 요소에 위치: 절대를 지정하여 문서 자체인 부모 요소에 상대적으로 이동했습니다. 또한 margin-top: 90vh를 지정하여 bottom-text라는 클래스 이름을 가진 <div> 요소를 웹 페이지 하단에 배치합니다.

현재 위치에서 텍스트를 위로 이동하기 위해 text 클래스에 일부 CSS를 추가했습니다. 여기에서 position 속성의 값으로 relative를 선택하여 위치에 따라 텍스트를 이동할 수 있습니다.

텍스트를 위로 이동하기 위해 bottom 속성을 사용했습니다. 이 속성은 해당 값을 할당했기 때문에 텍스트를 60px 위로 이동합니다. 사용자는 bottom 속성의 값을 변경하고 다양한 양만큼 텍스트를 위로 이동할 수 있습니다.

bottom 속성에 음수 값을 할당하면 텍스트가 아래로 이동합니다.

HTML 코드:

<div class="bottom-text">
    <h3 class="text">This is the text at bottom.</h3>
</div>

CSS 코드:

.bottom-text{
    position: absolute;
    margin-top: 90vh;
}
.text{
    position: relative;
    bottom: 60px;
}

위의 출력 이미지에서 왼쪽 이미지는 원래 위치의 텍스트를 보여주고 오른쪽 이미지는 텍스트를 현재 위치에서 위로 이동한 후의 이미지입니다.

margin-top CSS 속성을 사용하여 텍스트를 위로 이동

아래 예에서는 margin-top CSS 속성을 사용하여 텍스트를 현재 위치에서 위로 이동했습니다.

위의 예에서 설명한 것처럼 이 예에는 bottom-text 클래스가 있는 <div> 요소와 text 클래스 이름이 있는 <h3> 요소도 포함됩니다. bottom-text 클래스에 일부 CSS를 추가하여 웹 페이지 하단에 텍스트를 설정했습니다.

텍스트를 위로 이동하기 위해 margin-top 속성을 text 클래스에 적용하고 음수 값을 할당합니다. margin-top 속성에 양수 값을 설정하면 텍스트가 값만큼 아래로 이동합니다.

HTML 코드:

<div class="bottom-text">
    <h3 class="text">This text will be shown at the bottom.</h3>
</div>

CSS 코드:

.bottom-text{
    position: absolute;
    margin-top: 90vh;
}
.text{
    margin-top:-100px;
}

음수 margin-top 값은 텍스트 또는 HTML 요소를 현재 위치에서 위로 이동하는 가장 좋은 방법입니다.