🖥️ [UIUX] 1125 HTML Coding, 코딩 기초 5

✏️ 2024. 11월 25일 / HTML Coding, 코딩 기초 5

📺 HTML 태그 기초 - Visual Studio Code
✖️
오늘도 포스팅을 시작하기에 앞서, 간단한 정보를 알려드리고 시작하겠습니다.
엔티티코드는 유니코드라고도 부릅니다.
실무에서 굉장히 많이 쓰이는 엔티티코드를 복습할 겸 써보겠습니다.
저작권 표시 ⓒ = © / 입니다
실무에서 많이 쓰인다고 하니, 기억하도록 합시다!

⌨️ tag - ⭐중요! 이미지 출력 태그
✖️
⭐ 퍼블리싱에서 이미지를 사용하는 방법
웹 사이트에는 수많은 이미지가 사용된다. 그래서 이미지들을 잘 분류하여 관리해야 한다.
보통 이미지는 프로젝트 폴더 안에 'img '또는 'image'라는 이름의 폴더를 만들어
모든 이미지(동영상)들을 보관하여 관리한다.
또한 이미지의 이름은 html 파일 명명 규칙과 동일하게 영문 소문자로 시작하고,
간결하고 직관적인 이름으로 지어주는 것이 좋다.
📂 [이미지 파일 저장 규칙]
1. 이미지를 저장할 때 반드시 웹 문서 저장법과 동일하게 소문자로 저장하고 공백이나 한글을 파일명으로 짓지 않는다.
2. 이미지 폴더는 반드시 프로젝트 폴더(=최상위 폴더)안에 있어야 한다.
3. 이미지는 용량이 크지 않은 파일을 사용한다. 해상도는 72px이며, 스마트폰에서 바로 저장한 이미지는 사용하지 않는다.

📍 절대 경로로 불러온 이미지

📍 웹사이트의 이미지 url로 불러온 이미지

📍 이미지 경로를 잘못 쓴 경우

📍 이미지를 상대경로로 불러온 경우

⌨️ tag - 이미지 제목 태그
✖️

⌨️ tag - ⭐중요! 링크를 연결해주는 태그!
✖️
🔔 하이퍼링크의 이해
모든 웹 페이지는 연결되어 있다.
방문자가 원하는 정보를 확인하기 위해 글자나 이미지를 클릭하는 순간 링크를 통해 해당 페이지로 이동하게 만들 수 있다.
웹 사이트에서 가장 많이 사용되는 기능이며, 웹 페이지를 연결해주는 역할을 하는 것이 '하이퍼링크'이다.
🌎 <a>태그 : 링크를 연결하는 태그
a태그는 '앵커' 태그라고 부른다. 서로 다른 웹 페이지를 연결하거나 전화를 연결하거나 메일을 연결할 때에도 사용한다.
a태그는 inline 속성을 갖는다.
✒️ [기본형]
<a href="링크경로" target="페이지 연결 방식" title="링크 설명">글자나 이미지<a/>
✒️ [속성]
1. target : 페이지가 열리는 방식을 지정하는 속성. 생략이 가능하다.
- target="_self" : 현재 탭에서 페이지를 연결한다. 기본값.
- target="_blank" : 새 탭 열기.
- target="_parent" : 프레임으로 나누어진 페이지 전체를 부모 프레임으로 이동시킨다.
(옛날에 많이 쓰이던 방식이며, 보통 ifame으로 광고 영역을 보여줄때 사용, 지금은 잘 쓰이진 않는다.)
2. title = "링크 표시 내용" : target="_blank"로 지정했을 경우 title 속성도 함께 넣어준다.
title은 링크위에 마우스를 올렸을 때 뜨는 말풍선으로 링크에 대한 설명을 넣을 때 사용한다. (생략 가능)
3. href="링크 경로" : 링크 연결 주소. url을 넣거나 html페이지 끼리 연결하는 역할을 한다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)