HTML 이미지에 링크 걸기

 

기존 배경 이미지 작성 방법:

 

<style>
	.title {
    	background-image: url("~");
    }
</style>

 

css의 background-image에 링크를 걸고 싶었지만 css에서는 링크를 걸 수 없음!

 

---

 

<a href="/">메인</a>

#이미지에 넣을 때
<a href="/"><img src="~"></a>

 

<a href="/" target="_blank"></a>

target="_blank" #새 창에서 열기

 

링크 밑줄 css

 

text-decoration: none; #선 없음

text-decoration-line: none; #선 없음
text-decoration-line: underline; #밑줄
text-decoration-line: overline; #윗줄
text-decoration-line: line-through; #취소선

text-decoration-color: ; #색 바꾸기

#밑줄 모양 바꾸기
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

text-decoration-thickness: ; #밑줄 굵기 변경

 

---

 

.title {
    position: relative;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title_text {
    position: absolute;

}

 

<div class="title">
    <a href="/">
        <img src="https://cdn.pixabay.com/photo/2020/04/17/12/28/cloud-5055011__340.jpg" width="100%" height="300px">
    </a>
    <h1 class="title_text">버킷리스트 조 만들기</h1>
</div>

 

h1을 a href 안에 넣으니 글자가 그림 밑에 떠서 따로 뺐는데

 

 

링크가 그림에서만 되고 제목 글자에서는 눌리지 않는다.

 

그림 사이즈도 원래 사이즈로 바껴 버림ㅠ

 

---

 

완성본

 

.title {
    position: relative;

    height: 300px;
    width: 100%;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );

    text-decoration: none; #링크 밑줄 없애기
    color: white; #제목 글자 색상 변경
}

 

<div class="title">
    <a href="/">
        <img src="https://cdn.pixabay.com/photo/2020/04/17/12/28/cloud-5055011__340.jpg">
        <h1 class="title_text">버킷리스트 조 만들기</h1>
    </a>
</div>

 

title 클래스에 position: relative; 를 주고

 

position: absolute; 로 title_text가 그림 위에 오도록 만든다.

 

top: 50%; left:50%; 로 글자 위치를 조정하는데 계속 가운데가 안 맞더니 아래를 추가하니 해결!

 

transform: translate( -50%, -50% );