#4. position속성으로 이미지 위에 글씨 쓰기
안녕하세요! 오랜만에 글을 쓰러 왔어요~
오늘은 html 속성 중 "position"이라는 속성에 대해서 알아가면서 코딩을 처음 시작하신 분들은
조금 헷갈려 하실만 한
어떻게 글씨를 이미지 위에 쓰지?
에 대한 코딩을 다뤄보도록 할거에요. 저도 처음에 코딩을 하면서 매번 헷갈려서 인터넷을 찾아보곤 했어요.
먼저 position 속성이 무엇인지 부터 알아볼게요.
position은 단어 뜻 그대로 '위치'인데요. 화면에 어떻게 배치를 할지 정해주는 요소에요.
제가 오늘 다룰 position 속성은 absolute, relative이 두 가지 속성인데 이 외에도 static, fixed 두가지가 있어요.
다음 글에는 fixed를 이용한 코딩을 가져올게요!
이제 코드를 살펴보겠습니다.
<div id="wrap">
<div class="img-wrap">
<img src="../test/img/test-img.jpg" alt="">
</div>
<div class="txt-wrap">
<p>이미지 안에 글씨 넣기</p>
</div>
</div>이렇게 코드를 작성해주었는데요. 제가 원하는 이미지와 원하는 텍스트를 같은 div 안에 작성을 해주셔야해요!
같이 묶어놓지 않으면 나중에 위치 지정을 해줄 때에 많은 어려움이..ㅎㅎ
이렇게 position속성을 주지 않은 코드는
이렇게 이미지와 텍스트가 따로 코딩이 되겠죠? 이제 position속성을 넣어줄건데 여기서 중요!
"이미지 위에 올릴거니까 이미지에 position속성을 주면 되겠지?"
네,,처음에 제가 코딩할 때 한 실수에요. 이미지와 텍스트 div에 position을 주게되면 텍스트 위치를 잡을 때
범위가 제대로 잡히지 않아요. 그럼 속성을 주는 의미가 없겠죠?
그래서 어디에다 주느냐!
텍스트를 감싸고 있는 div영역과 이미지와 텍스트를 감싸고 있는 전체 div영역에 position 을 준다.
입니다!
이미지 위에 텍스트를 올릴거기 때문에 텍스트가 위로 가야하기 때문에 텍스트 영역에 position : absolute;
이미지와 텍스트 영역을 전부 감싸고 있는 영역에 position : relative;
를 넣어줍니다.
그런데 이렇게 positon속성만 넣어주면 글씨가 위로 가지않고 그대로 있어요.
position속성은 padding이나 margin외에 top, bottom, left, right속성을 사용할 수 있어요.
저 네 가지 속성은 position을 사용했을 때에만 사용 가능한 속성이에요.
#wrap {position: relative;}
#wrap .txt-wrap {position: absolute; top: 0;}먼저 top속성만 먼저 줘볼까요? 결과는
보이시나요? 글씨가 이미지 위로 올라갔어요! 제가 이미지를 명함모양을 가져왔어요.
저 명함 위치까지 속성을 사용해서 글씨를 이동해볼게요.
#wrap {position: relative;}
#wrap .txt-wrap {position: absolute; top: 345px; left: 345px;}
이렇게! 원하는 영역까지 top과 left를 이용해서 이동시켜주었어요.
오늘 글에서 기억해야 할 것은
이미지가 아닌 이미지와 텍스트를 감싸고 있는 div영역에 position:relative;속성을 넣어줘야 한다.
유익한 꿀팁이 되셨으면 좋겠네요 헷..
다음엔 말씀드렸던것처럼 position : fixed속성으로 홈페이지를 조금 더 예쁘게 꾸미는 법을 가지고 오겠습니다.
안뇽~