0719 HTML 2번째 과정 <a>태그와 이미지에 대하여

오늘 수업은 링크를 표시하는 <a>태그와 이미지를 나타낼 수 있는 <img>태그에 대하여 배웠습니다.

<a>태그는 anchor : 닻 이라고 생각하면 이해하기가 편합니다. 

한마디로 링크로 이동하는 것이죠.

 

<a> 태그로 링크를 걸려면 이런 식으로 하면 됩니다.

HTML <a>

href는 "hyper link reference"라고 이해하시면 됩니다.

 

그리고 뒤에 나와있는 target="_blank"는 새창에서 저 링크가 열리는 것을 뜻합니다.

실제로 저장을 하고 라이브 서버를 보면

※잠깐동안 창의 위쪽이 _blank 였다가 저 주소로 바뀌는걸 볼 수있습니다.

---

그리고 이미지를 살펴보겠습니다

HTML에선 이미지를 넣을 수 있는 방법이 크게 3가지가 있습니다

1. 내부 URL
2. 외부 URL
3. 데이터 URL

내부 URL은 해당 컴퓨터에 직접 이미지 파일을 가지고 있을때 사용할 수있는 방법인데 예를 들어 이렇습니다.

내부 img url

태그의 사용 방법은 <img src="주소"> 라고 쓰면 됩니다

참고로 이미지 태그는 셀프 클로징 태그입니다.(닫는 태그가 없음)

여기서 "."은 해당 문서가 위치한 것을 뜻합니다

해당 문서가 있는 파일->ch01폴더->img폴더->boodae.jpg

라는 뜻입니다.

또한 이미지를 넣는 태그엔 넓이를 조정할 수있는데 이는 위와 같이 "width"로 지정을 해줍니다.(height 도있음)

"alt"란 만약에 주소가 잘못되어서 사진이 잘 나오지 않는다면 이 사진의 의미가 "0000"이라는 뜻입니다. -> alt = "0000"

시멘틱코드와 비슷하다고  생각하시면 됩니다.

---

2번째인 외부 URL은 이렇습니다

외부  URL

흔히 우리가 생각하는 그 주소를 넣으면 외부 URL을 참조하는 것입니다.

 

마지막으론 데이터URL이 있는데 이것은 좀 특이합니다.

사진을 보여드리겠습니다.

데이터 URL

어우 사진만 봐도 어지럽지않나요?

사실 밑에 더 깁니다.

 

대표적으로 base64문자열로 바꾼건데 

만약 내부 URL의 주소가 잘못되면 사진이 나오지않고 외부URL의 주소가 있는 사진의 링크가 삭제 되었거나 그럴때는 이미지를 정상적으로 출력할 수 없습니다.

 

데이터 URL은 그 사진의 이미지 자체를 데이터화해서 표현한 것입니다.

좀 더 확실하게 이미지를 안전하게 표현할 수 있는 것이죠.

하지만 이 데이터URL도 단점이 있습니다.

바로 용량이 34%정도 증가합니다.

 

예를 들어 1mb -> 1.33mb로 되는 것입니다.

그리고 이렇게 긴 URL은 정말 보기도 불편하죠

이럴때 한가지 꿀팁이 있습니다.

데이터 URL 꿀팁

바로 이렇게 URL 뒤에 width나 height나 또는 alt를 넣어주게 된다면 어떻게 될까요?

WOW

짜잔~!

바로 이렇게 "접을 수 " 있게 됩니다. 정말 꿀팁인 것 같습니다.

위 사진처럼 세로로 길게 안나오고 가로로 나오시는 분들은 File->Preferences->settings->"max"검색하시고 두번째로 나온것에 숫자를 0을 몇개를 더 붙여주시면 됩니다.

 

그리고 참고로 제가 배운 것에서 실수 했던 것이 있는데요

id 값

보시면 id 값을 준것과 그 해댱 id로 문자를 누르면 해당 위치로 이동하는 것을 코딩한 것입니다.

저는 id값에 위 사진처럼 "부대찌개"라고 넣었습니다.

하지만 알고보니 지금은 HTML상에서 오류는 나지 않지만 나중에 크게 문제가 될수 있다고 알게되었습니다.

Id값은 무조건 영어로 작성하여야 합니다.

 

---

판봉의 은근 꿀팁과 정보들

id는 #을 붙여 준다.

id는 영어로만써야하며 띄어쓰기는 없다.

그래도 띄어쓰기를 하고 싶다면 (-)를 이용하여라

ex)spam-kimchi-bokeumbab

개발자들 사이에 관례적인 표기법입니다.

 

내부링크에는 http:// 주소를 쓰면 안된다.

 

이미지의 값이 너무 커서 줄이고 싶은데 이미지의 값을 모를때는 너비나 높이중 한가지만 바꾸는 것을 추천합니다.

참고로 PC는 1200이하, 태블릿과 작은화면은 768~996정도의 사이로 맞추면 좋습니다.

 

프론트엔드작업은 맥이 윈도우보다 빠른편입니다.

왜냐하면 파일처리 시스템이 맥이 좀 더 빠르기 때문입니다.

(서버 재시작 시 윈도우가 30초라면 맥은 3초만에 끝날 수도 있음)