오늘은 HTML 요소의 다양한 속성들에 대해 알아보려고 한다. 개인적으로 공부를 조금 하고 있기 때문에 궁금해 하는 사람이 있을 것이라 생각하고 작성한다.
▤ 목차
모든 HTML 요소는 속성을 가질 수 있다.
HTML 요소는 다양한 속성을 가질 수 있다.
속성은 요소에 추가적인 정보를 줄 수 있으며, 요소의 동작이나 스타일을 정의하는 데 사용된다.
링크의 URL을 지정하는 href 속성
<a href="https://www.example.com">Example</a>href 속성은 <a> 태그에서 링크가 이동하는 페이지의 URL을 지정한다. 이를 통해 사용자가 클릭했을 때 이동할 페이지를 설정할 수 있다.
이미지를 표시하는 src 속성
<img src="image.jpg" alt="Example Image">src 속성은 <img> 태그에서 표시할 이미지의 경로를 지정한다. 이를 통해 웹 페이지에 이미지를 삽입할 수 있다.
이미지의 크기를 지정하는 width와 height 속성
<img src="image.jpg" width="500" height="300" alt="Example Image">width와 height 속성은 <img> 태그에서 이미지의 크기를 지정한다. 이를 통해 이미지의 너비와 높이를 설정할 수 있다.
대체 텍스트를 제공하는 alt 속성
<img src="image.jpg" alt="Example Image">alt 속성은 <img> 태그에서 이미지에 대한 대체 텍스트를 넣을 수 있다. 이는 이미지가 로드되지 않을 때 대체 텍스트를 표시하거나, 시각장애인 사용자에게 이미지의 내용을 설명하는 데 사용된다.
스타일을 추가하는 style 속성
<p style="color: blue; font-size: 20px;">This is a styled paragraph.</p>style 속성은 색상, 글꼴, 크기 등의 스타일을 요소에 추가하는 데 사용된다. 이를 통해 요소의 색상, 글꼴, 크기 등으로 스타일을 쉽게 변경할 수 있다.
웹 페이지의 언어를 선언하는 lang 속성
<html lang="en">lang 속성은 <html> 태그에서 웹 페이지의 언어를 선언한다. 이를 통해 검색 엔진과 브라우저가 페이지의 언어를 인식할 수 있다. 한국은 "ko"로 작성한다.
추가 정보를 정의하는 title 속성
<p title="This is a tooltip">Hover over this text to see the tooltip.</p>title 속성은 요소에 대한 추가 정보를 정의한다. 사용자가 요소에 마우스를 올렸을 때 툴팁으로 표시된다.
이렇게 다양한 HTML 속성을 활용하면 웹 페이지를 더욱 풍부하고 유용하게 만들 수 있습니다. 여러분도 이 속성들을 활용하여 멋진 웹 페이지를 만들어 보세요! 궁금한 점이 있으면 언제든지 댓글로 남겨주세요. 감사합니다!
'IT Story > Html' 카테고리의 다른 글
| HTML 제목 속성 태그 작성으로 검색 엔진 순위 올리기 (0) | 2024.07.25 |
|---|---|
| 클릭하면 스크롤 이동하는 목차 만들기 (0) | 2022.09.12 |
| HTML 하이퍼링크 <a>태그로 이미지 링크 걸기 (2) | 2022.09.09 |