HTML 기초배우기 / day05 / 25.04.07

이미지 저장할 때 규칙 

• 웹 문서 저장법과 동일하게 소문자로 저장하고 공백이나 한글은 파일명으로 사용하지 않도록 한다. 
• 웹 문서가 있는 폴더 내에 이미지 파일이 존재해야 한다. *web05 폴더에 있는 문서 작성 시 web04에 있는 이미지 파일을 불러올 수 없다. 
• 이미지는 img와 같은 영문 폴더를 만들어 별도로 관리해야 한다. 
• 이미지는 용량이 크지 않은 파일을 사용한다. 해상도는 72px이며, 스마트폰에서 바로 저장된 이미지는 쓰지 않는다.

속성에서 URL을 지정하는 방법 두 가지.src

• 절대 경로(URL) : 호스팅되는 외부 이미지에 대한 링크, 다른 웹사이트에서. 최상위폴더부터 파일까지의 모든 경로를 표현하기 때문에 보안에 매우 취약하다는 단점이 있어 실무에서 사용되지 않는다. 외부파일이나 링크, 이미지 등을 파일 내부에 연결하고자 할 때 사용하는 경로. 최상위폴더(=root)로부터 불러오려고 하는 파일까지의 모든 폴더경로를 직관적으로 나타내는 방식. 하향경로방식, 폴더 내부로 들어가면서 파일을 찾는 방식이다. 예: src="https://www.w3schools.com/images/img_girl.jpg".**외부 이미지는 저작권의 보호를 받을 수 있다. 사용 허가를 받지 않으면 저작권법을 위반할 수 있다. 또 외부 이미지를 제어할 수 없어 갑자기 제거되거나 변경되어질 수 있다. ***src=①"/ 첫 슬래시는 최상위폴더(root,뿌리)를 보여주고, 경로의 맨 앞에 표기한다. ②폴더명/ : 두번째 /는 ~폴더 안에 있는 걸 보여준다. 
• ★상대 경로(URL) : 현재 작업하고 있는 파일이 담겨져 있는 폴더를 기준으로 불러오려고 하는 파일까지의 경로를 '기호'로 표현한 것을 말한다. 불러오려는 파일의 폴더까지 올라간 이후에는 절대경로로 나머지 주소를 표기한다. 맨 처음 시작하는 폴더를 기호로 표현하기 때문에 보안에 비교적 강하다는 특징이 있어 실무에서는 상대경로를 주로 사용한다. 내부에 호스팅된 이미지에 대한 링크 웹 사이트. 여기서 URL에는 도메인 이름이 포함되지 않는다. URL이 시작되는 경우 슬래시가 없으면 현재 페이지를 기준으로 한다. 상향경로방식. ex) src="img_girl.jpg". URL이 슬래시로 시작하는 경우 도메인을 기준으로 한다. ex) src="/images/img_girl.jpg".거의 항상 상대경로(URL)을 사용하는 것이 가장 좋다. 그들 도메인이 변경되어도 중단되지 않기 때문이다. ***src=" ./ " ① ./ 는 현재폴더. 지금 작성하고 있는 파일이 담겨있는 폴더를 의미한다. ② ../ 는 한 폴더 위로. 현재 폴더의 1단계 상위 폴더를 말한다. => src="./../../폴더명1/폴더명2/파일명.확장자 라는 뜻 두번째 " / " 는 '안에'라는 뜻 확장자명까지 정확히 잘 써주어야한다. 

※경로에 맞지 않게 이미지 불러온 경우

예전엔 엑스박스로 나타났고, ('엑박떴다')라고 말했었다. 요즘은 alt 대체 텍스트 내용이 보여진다. 

 

<img>

웹 문서 작업 시 가장 많이 사용되는 태그 중 하나로, 이미지를 나타내는 태그 

이미지 태그는 단독태그로 반드시 속성과 함께 씁니다. 

웹 작업 시 이미지를 관리할 때에는 최상위 폴더 안에 img 또는 image와 같은 이름의 폴더를 생성해서 이미지를 저장해야 한다. 

<img src="이미지 경로" alt="이미지 설명 " width="500"/> ---inline+block의 대표적 태그 

• src : 불러오려는 이미지를 절대경로 또는 상대경로로 나타낸다. 이미지의 주소 !
• alt  : 이미지경로가 안 맞아서 오류 떴을 때 보여지는 텍스트로 개발자에게 어떤 이미지를 다시 불러와야하는지 빠르게 파악할 수 있는 용도로 사용된다. 시각장애인에게도 화면낭독기를 통해 해당 이미지가 무엇인지 파악할 수 있도록 도와주는 웹표준 및 웹접근성을 높이는 속성이다. 간단하고 직관적으로 써주는게 좋다. 비워두지 않고 반드시 써야하며 장황한 설명을 쓰지 않도록 주의해야한다. ex)벚꽃, 조명 
• width : 픽셀은 생략할 수 있고, %단위로 나타낼 수도 있다. 

추천 이미지 다운로드 사이트 

pexels.com : 저작권이 없고 고화질 사진과 동영상을 제공해 디자이너, 퍼블리셔 실무에서 많이 쓴다. 여기 있는 이미지들은 웹 이미지로 인쇄용으로는 적합하지 않다. 

640*960 작은 사이즈로 다운로드하기 

 

이미지는 사이트의 전반적인 분위기를 바꾼다. 

 

웹에 있는 이미지 주소를 복사하여 임시로 불러오는 방식 (권장X)

이미지에 마우스 우클릭 이미지 주소복사한 경우,사이트와 이미지 분위기를 볼 때 임시로 쓰지만 실무에서는 아예 쓰이지 않는다. 

 <img src="https://images.pexels.com/photos/30433378/pexels-photo-30433378.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load" alt="유럽건물" />

 

*F2 : 파일명 이름바꾸기 단축키 !

*이미지파일에 확장

*https:// 에서 ://안쳐도 넘어간다.

.com, .net, go.kr., co.kr.→URL 

<figure><figcaption>이미지의 설명, 표의 제목 등을 나타낼 때 사용하는 태그. 많이 쓰이진 않는다. block속성

기본형 

<figure>

 <img src="이미지경로" alt="이미지설명"/>

 <figcaption>이미지에 대한 상세 설명</figcaption> 

</figure>

이미지랑 설명글을 figure로 감싸준다. 이미지와 figcaption순서 바뀌어도 상관없다. 왼쪽 여백이 생긴다. 

<a>태그 하이퍼링크를 연결하는 태그 

모든 웹 페이지는 서로 연결되어 있다. 방문자가 원하는 정보를 확인하기 위해 클릭하는 순간 링크를 통해 다양한 웹 페이지로 이동하게 된다. 이것이 바로 웹 사이트 기능에서 가장 많이 활용되는 '링크'이고, '하이퍼텍스트 링크'라고도 부른다. 

링크를 연결하기 위해서는 '앵커'라고 부르는 a태그를 사용하며, inline속성을 가진다. 

<a href="연결경로" target="페이지를 여는 방식" title="링크 설명을 말풍선으로 표시해준다.">

태그와 태그 사이에 [이미지 또는 글자]가 들어가면 된다. 클릭할 수 있어야 하기 때문에 예) span, img태그 

</a>

★ ★ ★ a태그만 예외적으로 inline속성을 가지는데, a태그 안에 박스를 넣을 수 있다. inline-block속성을 가지는 이미지 태그를 넣을 수 있다. ★ ★ ★

 ● href : 클릭하면 연결될 파일의 경로나 웹주소를 연결한다. 이외에도 메일로 연결하거나 모바일에서 전화걸기 등을 할 수 있다.

 ● target : / 새탭에서 열기 / 현재 탭에서 열기  2가지 방식이 있다.

     target속성값

• _blank : 새 탭으로 열기 
• _self : 기본값(target을 안 써도 된다는 뜻), 현재 탭에서 링크가 이동한다. 
• _parent : 프레임으로 나눠진 페이지 전체를 부모 프레임으로 페이지가 이동한다.

 ● title : target속성값을 _blank로 지정하였을 경우 쓰기로 권장한다. 링크에 대한 설명글을 말풍선으로 표시할 수 있도록 만들어주는 속성이다. 속성  값으로는 링크에 대한 설명을 글로 적으면 된다. 한글사용 가능하다. 

<a>태그 특징 : 밑줄로 보여진다. 클릭하는 동안에는 빨강색으로 변한다. 방문 전인 페이지는 파랑색, 방문했던 페이지는 보라색

회사소개 폴더는 about01, about02...로 쓴다.  

링크의 종류 

링크의 종류는 a태그의 href속성값으로 쓸 수 있는 다양한 값을 말한다.

1. ★ <a href="이동할 페이지 주소"> : 이동하는 페이지에 대한 값을 링크로 표현한다. 이동하는 페이지가 파일일 경우 경로에 맞게 파일명까지 입력하고, 이동하는 페이지가 링크일 경우 https가 포함된 웹 주소를 입력한다. 
2. ★ <a href="index.html"> 또는 < a href="/"> : index.html은 웹사이트의 메인페이지를 뜻하는 파일명으로, 보통 로고를 누르면 이동하는 페이지의 주소이다.(로고의 이미지에 들어간다.) 약어로 페이지의 최상위 경로를 뜻하는 '/'로 표기하기도 한다. 
3. <a href="mailto:이메일주소"> : 해당 이메일주소로 이메일을 바로 보낼 수 있도록 아웃룩 프로그램을 바로 연결해준다. 특히 외국기업에서 많이 사용한다. 
4. <a href="tel:전화번호"> : 모바일환경에서 해당 번호나 이미지를 누르면 바로 전화연결이 되도록 화면을 전환해준다. 만약 pc에 인터넷전화가 연결되어 있다면 해당 기능을 사용할 수 있다.  
5. <a href="sms:전화번호"> : 모바일환경에서 해당 전화번호로 바로 문자를 보낼 수 있도록 화면을 전환해준다. 
6. ★ <a href="#"> : 임시경로. 연결할 경로가 없더라도 먼저 만드는 과정에서 써준다. 실제로 페이지의 이동은 이루어지지 않는다. 웹 페이지를 만들 때 당장 연결할 페이지가 없을 경우 임시로 넣어놓는 주소이다. 

학원 실습 숙제

1. 이미지 폴더 안에 있는 이미지 1개를 상대경로로 불러오기 

2. 이미지를 하나 출력하여 클릭하면 index.html로 연결하기 

3. "이미지 페이지로 이동"이라는 글자를 클릭하면 img02.html로 이동하기

 <p><h1>숙제1. 이미지 폴더 안에 이미지 상대 경로로 불러오기</h1>

  <img src="./../../../image/rabbit.jpg"/></p>

 <p><h2>숙제2.</h2>

  <a href="/" target="_blank" title="인덱스페이지로갈래"><img src="./../../../image/egg.jpg"></a></p>

<p><h2>숙제3.</h2>

<a href="./../../img02.html" target="_blank" title="img02.html로이동하자">이미지페이지로 이동</a>

</p>

</body>

</html>

익숙하지 않다...Q 옆으로 이미지 나열하는 방법? <p> 필요성?