[CSS] 로고 정의

[로고 정의]

// .logo = 클릭되는 요소인 a 태그를 감싸는 요소

<div class="logo">

    <a href="#">GitHub</a>

</div>

🔥 problem 🔥
'이미지+로고' 클릭을 위해 'a 태그 범위 안에 이미지 로고가 존재해야한다.' 
💡 solution 💡
<img>태그로 사용하지 않고 css의 background 속성으로 정의

 

-1. div의 logo에 이미지를 삽입할 경우 (❌)

// a 텍스트까지 커서를 가져대야만 클릭 가능하다.

//이미지에 커서를 가져가도 클릭이 동작하지 않는다.

header .logo {

  margin-right: 10px;

  background: url('../img/logo.svg');

  width: 32px;

  height: 32px;

}

클릭 ❌

 

[a 태그]

🔥 problem 🔥
- 인라인 요소는 범위를 가지지 못하니까 범위 안에서의 이미지 표현 불가

💡 solution 💡
- 범위를 가질 수 있는 형태인 display block으로 변경

 

- 2. a 태그 요소에 백그라운드를 지정 (⭕)

 

// a링크를 범위를 지정할 수 있게 정의 하면서 이미지를 삽입할 경우

// 설정한 링크의 범위에 이미지가 그려진다.

header .logo a {

 

// 해당하는 파일을 기준으로 디렉토리 밖으로 한번 나가라 

  background: url('../img/logo.svg');

  width: 32px;

  height: 32px;

  display: block;

}

클릭 ⭕

📌
a 태그를 통해서 css에 백그라운드 속성으로 이미지를 삽입

 

---

 

<a href="#">GitHub</a>

🔥 problem 🔥
- 로고 부분에 작성했던 특정한 텍스트 지우면 안 된다.

❔ explanation ❕
- 태그의 기본적인 필수 속성 (src  =이미지에 대한 경로 & alt = 대체 텍스트)
'alt 속성 : 이미지가 제대로 출력되지 못했을 때 나오는 대체될 텍스트'

- background 속성으로 이미지 삽입할 때 대체 텍스트가 없다 !
html에 직접적으로 작성된 텍스트가 <img> alt 속성처럼 대체 텍스트로 사용될 수 있다.

💡 solution 💡
1. 대체 텍스트를 html에다가 직접적으로 작성
2. css를 통해서 텍스트가 화면에 나오지 않게 작업

[ text indent 속성 ] : 들여쓰기 

- text-indent : 20px >>텍스트가 20px 우측으로 밀린다.

- text-indent : -20px >>텍스트가 20px 좌측으로 밀린다.

// #  대체 텍스트의 역할 : 화면에서는 사라졌지만 html의 구조적으로는 남아 있기 때문

header .logo a {

  background: url('../img/logo.svg');

  width: 32px;

  height: 32px;

  display: block;

  text-indent: -9999px;

}

- # '9999' 일종의 약속 
'12345' 입력을 해도 사라지지만 이 값이 무엇을 의미하는지는 확인이 안된다.
텍스트를 사라지게 하는 개념으로 이 수치를 적었구나를 의미한다.

text-indent

 

📌
background 속성을 통해서 이미지를 삽입할 때
대체 텍스트를 삽입하는 가장 대표적인 방법
text indent 속성으로 큰 값을 설정

 

---

 

[ hover 배경 이미지 변경 ]

- 마우스를 올리면 색깔이 바뀌는 이미지로 변경

  header .logo a:hover{

    background: url('../img/logo_on.svg');

  }

a:hover