<꿀팁모아 : 158번째 포스팅> HTML 속성
안녕하세요 꿀팁모아의 희망주기입니다
오늘 알아볼 것은 HTML의 속성입니다
1 HTML 속성
모든 HTML 요소에는 속성이 있을 수 있는데요. 속성은 요소에 대한 추가 정보를 제공합니다. 항상 시작 태그에 지정이 되는 것이 키 포인트이기에 잘 알아두시면 좋을 거 같아요. 속성은 일반적으로 다음과 같은 이름 / 값 쌍으로 제공이 됩니다. name = "value" 이렇게 말이죠 ㅎㅎ
2 href 속성
태그는 하이퍼링크를 정의합니다. 이 속성은 링크가 연결되는 페이지의 URL을 지정하는데요. <a>href 요렇게 나타낼 수 있습니다. 이해가 안되시는 분들을 위해 하나의 예시를 준비해봤습니다.
링크에 대한 자세한 내용은 HTML 링크 창에서 확인할 수 있습니다.
3 Src 속성
태그는 HTML 페이지에 이미지를 임베드하는 데 사용이 됩니다. 이 속성은 표시할 이미지의 경로를 지정하는데 사용되며 <img> src 로 나타냅니다.
속성에 URL을 지정하는 방법에는 두가지가 존재하는데, 한번 알아보도록 하겠습니다. 절대 URL 과 상대 URL이 존재합니다.
1. 절대 URL : 다른 웹 사이트에서 호스팅되는 외부 이미지에 대한 링크입니다. 예: src="https://www.w3schools.com/images/img_girl.jpg
메모: 외부 의미지는 저작권이 있을 수 있는데요. 사용 허가를 받지 못하면 저작권법을 위반한 것일 수 있습니다. 또한 외부 이미지를 제어 할 수 없습니다. 갑자기 제거되거나 변경 될 수 있다는 점 주의하시면 되겠습니다.
2. 상대 URL: 웹 사이트 내에서 호스팅되는 이미지에 대한 링크입니다. 여기서 URL에는 도메인 이름이 포함되지 않는데요. URL이 슬래시 없이 시작되면 현재 페이지에 상대적입니다. 예: src="img_girl.jpg". URL이 슬래시로 시작하면 도메인에 상대적입니다. 예: src="/images/img_girl.jpg"
메모: 거의 항상 상대 URL을 사용하는 것이 가장 좋습니다. 왜냐하면 도메인을 변경하게 되더라도 중단되지 않기 때문이죠 ㅎㅎ
4 너비 및 높이 속성
태그에는 이미지의 너비와 높이 (픽셀 단위)를 지정하는 및 속성도 포함되어야 하는데요. <img> width height 이렇게 말이죠 ㅎㅎ
5 Alt 속성
태그의 필수 속성은 어떤 이유로 이미지를 표시할 수 없는 경우 이미지의 대체 텍스트를 지정합니다. 연결 속도가 느려지거나 속성의 오류 또는 사용자가 화면 판독기를 사용하는 경우 때문일 수 도 있습니다 alt <img> scr로 말이죠.
6 스타일 속성
스타일 속성은 요소에 색상, 글꼴, 크기 등과 같은 스타일을 추가하는 데 사용이 된다.
7 lang 속성
웹 페이지의 언어를 선어하려면 항상 태그 안에 속성을 포함해야 되는 되요. 이것은 검색 엔진과 브라우저를 지원하기 위한 것입니다. lang <html> 다음 예제에서 영어를 언어로 지정하는 것을 보여줍니다.
국가 코드는 속성의 언어 코드에 추가할 수 도 있다. 따라서 처음 두 문자는 HTML 페이지의 언어를 정의하고 마지막 두 문자는 국가를 정의하는데 사용이 됩니다. 다음 예제에서는 영어를 언어로 지정하고 미국을 국가로 지정하는 방법입니다.
8 제목 속성
title 이 속성은 요소에 대한 몇 가지 추가 정보를 정의하는데 사용이 됩니다. title 속성의 값은 요소 위로 마우스를 올려 놓을 때 도구 설명으로 표시가 된다.
9 요약
모든 HTML 요소에는 속성이 있을 수 있는데요. Href <a>의 속성은 링크가 이동하는 페이지의 url을 지정하는데 사용이 됩니다. Src <img>의 속성은 표시할 이미지의 경로를 지정하는데 사용이 됩니다. width height <img>의 속성은 이미지에 대한 크기 정보를 제공합니다. <img> alt 의 경우 이미지에 대한 대체 텍스트를 제공합니다. style 의 속성은 요소에 색상, 글꼴, 크기 등과 같은 스타일을 추가하는데 사용이 됩니다. lang <html>은 웹 페이지의 언어를 선언하는데 사용이 되요. 마지막으로, title의 속성은 요소에 대한 몇 가지 추가 정보를 정의하는데 사용이 됩니다.
'IT 및 코딩 > HTML 및 CSS' 카테고리의 다른 글
| <꿀팁모아 : 160번째 포스팅> HTML 단락 (0) | 2022.04.30 |
|---|---|
| <꿀팁모아 : 159번째 포스팅> HTML 제목 (0) | 2022.04.30 |
| <꿀팁모아 : 157번째 포스팅> HTML 기본 예제 (0) | 2022.04.14 |
| <꿀팁모아 : 156번째 포스팅> HTML 편집기 사용방법 (2) | 2022.04.13 |
| <꿀팁모아 : 155번째 포스팅> HTML이란? (1) | 2022.04.13 |