CSS / 이미지 위에 글자를 올리고, 아이콘을 그 위에 올리고, 글자위치를 이미지 위에서 고정하는 방법

HTML

CSS / 이미지 위에 글자를 올리고, 아이콘을 그 위에 올리고, 글자위치를 이미지 위에서 고정하는 방법

coco030030 2025. 3. 19. 17:35

텍스트 중앙 정렬 방법

text-align: center;

내가 했지만 CSS 어떻게 넣었는지 모르겠다

뭔가 열심히 집어넣어보다가 성공한 거라

이 코드가 작동하는 원리는:

#main에 position: relative를 설정하여 자식 요소들의 기준점을 만듦.
아이콘에 position: absolute를 적용하여 부모 요소(#main)를 기준으로 위치를 지정

top: 50%는 아이콘의 상단을 부모 요소 높이의 50% 위치에 배치합니다.
transform: translateY(-50%)는 아이콘을 자신의 높이의 50%만큼 위로 올려 정확히 중앙에 위치하게 합니다.
left: 20px와 right: 20px로 좌우 여백을 지정합니다.

핵심 CSS 개념 정리
Position: relative : 요소의 원래 위치를 기준으로 배치. 자식 요소의 absolute 포지셔닝의 기준점이 됨
Position: absolute : 가장 가까운 position: relative를 가진 조상 요소를 기준으로 배치. 기준점이 없으면 viewport를 기준으로 함

Transform: translate
translate(X%, Y%): 요소 자체 크기를 기준으로 이동
translateY(-50%): 요소를 자신의 높이의 50%만큼 위로 이동시켜 수직 중앙 정렬에 유용
Top, Left, Right, Bottom
퍼센트(%)로 지정하면 부모 요소의 크기에 비례해 위치가 결정됨
픽셀(px)로 지정하면 고정된 위치에 배치됨

이렇게 position과 transform을 적절히 조합하면 반응형 웹에서도 요소들을 원하는 위치에 안정적으로 배치할 수 있습니다.

_____________________

헷갈렸던 것

우선 메인부터

</div>

<h1>Women Collection 2018</h1>

<h2>NEW SEASON</h2>

</div>

</div>

</section>

메인이다.

이 부분에 CSS를 줘서 이미지 위로 글자가 뜨게 해야한다.

어떻게 해도 뭔지 모르겠음. 막막했다.

AI는 해설을 이렇게 해줬음.

CSS에서 이미지 위에 텍스트를 올리는 여러 방법을 알려드리겠습니다:

position 속성 사용하기: 이번에 사용해본 것.

.container {
  position: relative;
}

.container img {
  width: 100%;
  height: auto;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
}

background-image 사용하기:

.bg-container {
  background-image: url('이미지경로.jpg');
  background-size: cover;
  background-position: center;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-text {
  color: white;
  font-size: 24px;
}

flex 레이아웃 사용하기:

.flex-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-container img {
  width: 100%;
}

.flex-text {
  position: absolute;
  color: white;
  font-size: 24px;
}

grid 레이아웃 사용하기:

.grid-container {
  display: grid;
  grid-template: 1fr / 1fr;
}

.grid-container img,
.grid-text {
  grid-area: 1 / 1;
}

.grid-text {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
}

z-index 활용하기: 이번에 사용해본 것

.z-container {
  position: relative;
}

.z-container img {
  width: 100%;
  position: relative;
  z-index: 1;
}

.z-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: white;
  font-size: 24px;
}

난 플렉스 뭘해도 안 먹혀서 z-index: 1;

이걸로 줬는데 다시 바꿔봐야겠음.

어...z index 뺐더니 됨. 애초에 포지션 값을 하라는대로 해뒀기 때문...왜 아까 할 땐 안됐지?

main에 #main { position: relative;}

text_box에 position: absolute;

글자박스에 absolute값을 줌.

아이콘 메뉴 정렬 막막해하다가 코드 하나 넣었더니 해결됨

flex: 1;

.icon-menu {

flex: 1; ( Flexbox에서 요소가 부모의 가용 공간을 균등하게 차지하도록 설정. )

display: flex;

justify-content: flex-end;

gap: 20px;

}

메인에서 창크기가 바뀔 때마다 메인의 텍스트도 왔다갔다 하는 것을 수정했다.

text_box 예제1

#main .text_box {

position: absolute;

top: 30%; /* 세로 위치는 그대로 유지하거나 조정 */

left: 20% /* 픽셀 단위로 왼쪽 여백 고정 (원하는 값으로 조정) */

}

text_box 예제2 참고. 이거 쓰면 반응형으로 글자가 왔다갔다함 transform: translate(100%, 100%);}

이전에는 이렇게 써서 창크기가 커지거나 줄어들 때마다 여자 사진의 왼쪽에 갔다가 오른쪽에 갔다가 위로도 갔다가 반응형 답게 반응이 엄청났었다. top과 left 값을 text_box 예제1 처럼 %로 줘서 고정된 채 움직이지 않게 했다.

text_box 예제2

#main .text_box {

position: absolute;

top: 20%;

left: 10%;

transform: translate(100%, 100%);} (요소를 오른쪽으로 100%, 아래로 100% 이동시킴.)

이번엔 아이콘을 이미지 위에 올리는 게 난제다.

어떻게 해결하기는 했다.

근데 어떻게 된건지는 모르겠다..

일단 CSS는 이렇다.

/* Main Section (#main) */

#main {

position: relative;

overflow: hidden;

}

#main img {

width: 100%;

height: auto;

}

#main i.left {

position: absolute;

top: 50%;

left: 20px;

transform: translateY(-50%);

}

#main i.right {

position: absolute;

top: 50%;

right: 20px;

transform: translateY(-50%);

}

html은 이렇다. 아이콘의 존재를 뒤늦게 알아서 내가 처음에 작업한 것엔 없음.

</div>

<h1>Women Collection 2018</h1>

<h2>NEW SEASON</h2>

</div>

</div>

</section>

보면 역시 position 값으로 메인에 position: relative; 값을 주고 뒤쪽 아이콘에 나란히 position: absolute; 값을 주었다.

그리고 top과 right로 위치조정을 하면 된다.

아이콘을 옮기던 도중 다른 개념과 혼동해서 다시 정리한다.

transform: translate(100%, 100%) vs transform: translateY(-50%)
두 속성은 비슷해 보이지만 목적과 효과가 다름.

1. transform: translate(100%, 100%)
효과: 요소를 자신의 너비만큼 오른쪽으로, 자신의 높이만큼 아래로 이동
결과: 요소가 원래 위치에서 대각선 방향으로 크게 이동
문제점: 반응형 웹에서 창 크기가 변하면 요소 자체 크기도 변하므로 이동 거리가 계속 달라짐
사용 사례: 텍스트 박스에 이 속성을 적용하면 창 크기에 따라 위치가 불안정하게 변함

2. transform: translateY(-50%)
효과: 요소를 자신의 높이의 절반만큼 위로 이동
결과: top: 50%와 함께 사용하면 요소의 정확한 수직 중앙 정렬 가능
안정성: 창 크기가 변해도 항상 수직 중앙에 위치
사용 사례: 슬라이더 화살표 아이콘처럼 항상 수직 중앙에 위치해야 하는 요소

핵심 차이점
translate(100%, 100%)는 요소를 크게 이동시켜 위치 불안정성을 초래
translateY(-50%)는 요소를 정밀하게 조정하여 수직 중앙 정렬을 구현