HTML Attributes
HTML 속성(Attributes)
모든 HTML 요소는 속성을 가질 수 있다.
>> 속성은 요소데 대한 추가 정보를 제공
- 속성은 항상 시잘 태그에 지정
- 속성은 일반적으로 name="value"와 같은 이름/값 쌍으로 제공
형태
- 속성 이름 다음엔 등호(=)
- 속성 값은 역로 닫는 따옵표로 감싸기
공백 사용
요소이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백
하나 이상의 속성들이 있는 경웬 속성 사이에 공백
항상 소문자 속성 사용
HTML 표준: 소문자 속성명이 필요하다
제목 속성(및 기ㅏ 모든 속성)은 title 또는 TITLE과 같이 대소문자 사용 가능
(단, XHTML과 같은 더 엄격한 문서 유형에 대한 따옴표 사용을 요구)
속성값은 따옴표 사용
>>html 표준: 속서 값 주위에 따옴표가 필요하지 않다.
하지만 XHTML과 같은 더 엄격한 문서 유형에 대한 따옴표 사용을 요구하기에 HTML에서 따옴표 사용을 권장한다.
작은따옴표 VS 큰따옴표
HTML에서 속성값 주위에 큰따옴표를 붙이는 것이 가장 일반적이다 하지만 작은따옴표도 사용 가능하다.
속성값 자체에 큰따옴표가 포함되어 있는 경우
>> 작은따옴표 사용
>> 따옴표도 같이 출력된다.
HTML속성(Attributes)의 종류
href 속성
<a>태그: 하이퍼링크를 정의한다.
<href>속성: 링크가 다음페이지로 이동하는 URL을 지정한다.
scr 속성
<img>태그: 이미지를 HTML 페이지에 삽입하기 위해 사용한다.
<scr> 속성: 표시할 이미지에 대한 경로 (URL)를 지정한다.
<img scr"./강아지이미지.jpg">
URL을 지정하는 방법(2가지)
절대 경로
다른 웹 사이트에서 호스트되는 외부 이미지에 대한 링크, 완전한 URL주소
EX)https://cdn.pixabay.com/photo/2024/06/21/08/36/hand-8843887_1280.jpg
상대 경로
웹사이트 내에서 호스트되는 이미지에 대한 링크
URL은 도메인 이름으 포함하지 않는다.
슬래시 업이 시작하는 URL은 현재 페이지를 기준으로 한다.
대부분의 경우 상대 URL을 사용-> 도메인을 변경해도 끊어지지않는다.
width와 height속성
<img>태그에서 이미지의 폭과 높이(픽셀 단위)를 지정
alt속성
alt: 바꾸다, 대체하다
<img>태그의 필수 alt속성은 어떤 이유로 이미지를 표시할 수 없는 경우 이미지의 대체 텍스트를 지정한다.
접속이 느리거나 src속성에 오류가 있거나 사용자가 스크린 리더를 사용하는 경우에 발생한다.
style속성
style속성은 색상, 글꼴, 크기 등가 같은 스타일을 추가하는 데 사용
<p style="color: red">빨간색</p>
빨간색문단이 나온다.
lang 속성
- 웹페이지의 언어를 선언하려면 항상 <html> 태그 안에 lang 속성을 포함해야 한다.
> 검색 엔진과 브라우저를 지원하기 위해 사용
ex)
- lang 속성의 언어 코드에 국가코드를 추가 가능
> 처음 두문자는 HTML페이지의 언어를 정의, 마지막 두 문자는 국가를 정의
title 속성
- 요소에 대한 추가 정보를 정의
- title속성 값은 요소 위에 마우스를 놓으면 도구 설명으로 표시
ex)
<p title="title속성">title속성 예제<p>