HTML 속성은 HTML 요소에 대한 추가 정보를 제공해주는 역할.
HTML 속성
- 모든 HTML 요소는 속성을 가질 수 있음.
- 속성은 요소에 대한 추가 정보를 제공함.
- 속성은 항상 시작 태그 에 지정됨.
- 속성은 일반적으로 이름="값" 과 같은 이름/값 쌍으로 표현됨.
href 속성
이 <a>태그는 하이퍼링크를 정의함. href속성은 링크가 연결되는 페이지의 URL을 지정함
<a href="https://www.w3schools.com">Visit W3Schools</a>
src 속성
`<img>` 태그는 <img>HTML 페이지에 이미지를 삽입하는 데 사용됨. `<image>` src속성은 표시할 이미지의 경로를 지정함
<img src="img_girl.jpg">
속성에 URL을 지정하는 방법에는 두 가지가 있다. src .
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을 사용하는 것이 가장 좋음. 도메인을 변경해도 링크가 깨지지 않음.
너비 및 높이 속성
태그 에는 이미지의 너비와 높이(픽셀 단위)를 지정하는 `width` 및 ` height` 속성 <img>도 포함되어야 합니다 .width height
<img src="img_girl.jpg" width="500" height="600">alt 속성
alt`<img>` 태그 의 필수 속성은 <img> 이미지가 어떤 이유로든 표시되지 않을 경우 대신 표시될 텍스트를 지정함. 이는 인터넷 연결 속도가 느리거나, src속성에 오류가 있거나, 사용자가 화면 낭독기를 사용하는 경우 등 다양한 원인으로 발생할 수 있음.
<img src="img_girl.jpg" alt="Girl with a jacket">
존재하지 않는 이미지를 표시하려고 하면 어떻게 될까?
<img src="img_typo.jpg" alt="Girl with a jacket">
스타일 속성
이 style속성은 색상, 글꼴, 크기 등과 같은 스타일을 요소에 추가하는 데 사용된다
<p style="color:red;">This is a red paragraph.</p>lang 속성
웹 페이지의 언어를 선언하려면 항상 `<script>` 태그 lang안에 `<언어>` 속성을 포함해야 함. 이는 검색 엔진과 브라우저가 페이지를 더 잘 인식하도록 돕기 위한 것임.<html>
다음 예시에서는 언어를 영어로 지정함.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
언어 코드 lang 속성에 국가 코드를 추가할 수도 있다. 따라서 처음 두 문자는 HTML 페이지의 언어를 정의하고, 마지막 두 문자는 국가를 정의한다.
다음 예시에서는 언어를 영어로, 국가를 미국으로 지정한다.
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
제목 속성
이 title속성은 요소에 대한 추가 정보를 정의한다.
요소에 마우스를 올리면 title 속성 값이 툴팁으로 표시된다.
<p title="I'm a tooltip">This is a paragraph.</p>권장 사항: 속성은 항상 소문자로 사용할 것.
HTML 표준은 속성 이름을 소문자로 쓰도록 요구하지는 않는다. title 속성(및 기타 모든 속성)은 title 또는 TITLE 처럼 대문자 또는 소문자로 작성할 수 있다. 다만 XHTML과 같이 더욱 엄격한 문서 유형에서는 속성값을 소문자로 사용하도록 요구 하기 때문에 그냥 소문자로 습관을 들여놓는 것을 추천..
권장 사항: 속성 값은 항상 인용할 것.
HTML 표준에서는 속성 값에 따옴표를 사용할 필요가 없다. 하지만 이것도 마찬가지로 XHTML과 같이 더 엄격한 문서 형식에서는 따옴표 사용을 의무화하기 때문에 그냥 따옴표를 넣는 것을 추천..
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a><a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>때로는 따옴표를 사용해야 함. 이 예시에서는 제목 속성에 공백이 포함되어 있어 올바르게 표시되지 않음.
<p title=Description of W3Schools>따옴표 하나 또는 두 개?
HTML에서는 속성 값 주위에 큰따옴표를 사용하는 것이 가장 일반적이지만, 작은따옴표도 사용할 수 있다.
속성 값 자체에 큰따옴표가 포함된 경우, 작은따옴표를 사용해야 하는 상황이 있다.
<p title='John "ShotGun" Nelson'>
또는 그 반대로:
<p title="John 'ShotGun' Nelson">장별 요약
- 모든 HTML 요소는 속성을 가질 수 있다.
- 이 href속성은 <a>링크가 연결되는 페이지의 URL을 지정한다.
- 이 src속성은 <img>표시할 이미지의 경로를 지정한다.
- ` widthand` height속성은 <img>이미지의 크기 정보를 제공한다.
- `<img>` 속성 alt은 <img>이미지에 대한 대체 텍스트를 제공한다.
- 이 style속성은 색상, 글꼴, 크기 등과 같은 스타일을 요소에 추가하는 데 사용된다.
- lang태그 의 속성은 웹 <html>페이지의 언어를 지정한다.
- 이 title속성은 요소에 대한 추가 정보를 정의한다.
'HTML' 카테고리의 다른 글
| html 7. 단락, 줄바꿈 차이 <p></p> or <br> (0) | 2026.05.25 |
|---|---|
| html 6. 제목 (0) | 2026.05.25 |
| html 4. 요소 (0) | 2026.05.25 |
| html 3. 기본 예제 실습 (0) | 2026.05.25 |
| html 2. 편집기, 웹페이지를 만드는 4단계 (0) | 2026.05.25 |
