4. 웹 표준 사이트 만들기 - 헤더 아이콘 수정

---

<!-- 사이트에서 이미지를 표현하는 방법은 2가지가 있다.

html로 표현하는 법 ,css로 표현하는 법 -->

<!-- 1. html :img 태그로 표현 (img 의미가 있을떄) /alt태그 - 대체 문자 표현 

2. background 속성으로 표현 (img 의미가 없을때) - 대체 문자 x

3. 이미지를 background 속성 / 가상으로 대체문자를 만들어줌 

이미지 스프라이트 기법을 이용할수 있고 이미지 용량도 줄어든다. 

-->

 

https://alonehistory.tistory.com/13

HTML 과 CSS로 이미지를 표현하는 방법(Img/Background/이미지 스프라이트 기법)

이 링크를 참조하자..!

 

문제는 이미지 스프라이트를 쓰면 웹 접근성을 따라갈수 없다. 그래서 가상으로 대체를 문자를 만들어줌. 이것을 IR 효과 라고 한다.

 

이미지 스프라이트 효과 기억하자..!

 

 

팁(?): background: url("")을 해서 이미지를 넣으면 흰색으로 배경이 변하고 이미지가 안나오는 경우가 있다.

 

이런 경우는 원인은 잘 모르겠지만 해결책은 안다.

 

style.css를 link로 연결시켜주면 되더라..!

---

display:inline 과 block 그리고 inline-block에 대해서 알아보자..!

 

display 속성

display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다.

이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다.

 

대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가집니다.

 

1. 블록(block)

2. 인라인(inline)

 

---

블록(block)

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다.

 

<div>, <h1>, <p>, <ul>, <ol>, <form>요소는 대표적인 블록(block) 요소입니다.

 

---

인라인(inline)

display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다.

또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.

 

<span>, <a>, <img>요소는 대표적인 인라인(inline) 요소입니다.

---

인라인-블록(inline-block)

인라인과 블록 이외에도 display 속성에 자주 사용되는 속성값에는 인라인-블록(inline-block)이 있습니다.

display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작합니다.

하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작합니다.

 

이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있습니다.

또한, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있게 됩니다.

 

다음 예제는 다양한 display 속성값의 동작을 보여주는 예제입니다.

 

---

background-position 에 대해서 알아보자..!

 

background-position: x-position y-position | initial | inherit

---

IR 효과(웹 접근성을 따라할때 스프라이트 기법에서 이용)

 

/* IR 효과 */

.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */
.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

---

overflow란

 

CSS의  overflow 프로퍼티는 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를 지정합니다. 기본적으로 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면 컨텐츠를 모두 포함할 수 있도록 요소의 크기가 커집니다. 크기가 고정 되어 있다면 overflow 프로퍼티에 지정된 값에 따라 보여지게 됩니다.

 

overflow 에 사용할 수 있는 값은 네가지가 있습니다.

 

- visible : 기본 값입니다. 넘칠 경우 컨텐츠가 상자 밖으로 보여집니다.

- hidden : 넘치는 부분은 잘려서 보여지지 않습니다.

- scroll : 스크롤바가 추가되어 스크롤할 수 있습니다.(가로, 세로 모두 추가 됩니다.)

- auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정됩니다.( 필요에 따라 가로, 세로 별도로 추가될 수도 있습니다.)

 

---

z-index

z-index

position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다.

 

---

text-indent

 

text-indent

• 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다.
• 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다.
• 기본값은 0입니다.
• 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다.

---

오늘의 느낀점..

 

블로그와 프론트엔드는 너무 공부할게 많다.. 그래도 할만하다는게 내 의견.. 하지만 난 백엔드가 좋아..!