댓글 목록

HTML 속성

페이지 정보

작성자 운영자 작성일 17-10-29 14:53 조회 1,590 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

동영상 강좌보기



속성은 HTML요소에 대한 추가 정보를 제공합니다.


HTML속성

  • 모든 HTML요소는 속성을 가질 수 있습니다.
  • 속성은 요소에 대한 추가 정보를 제공합니다.
  • 속성은 항상 시작태그에 지정됩니다.
  • 속성은 일반적으로 다음과 같이 이름/값 쌍으로 옵니다. name = "value"


href속성

html링크는 <a>태그로 정의됩니다. 링크 주소는 href속성에 지정됩니다.

<a href="https://365ok.co.kr">링크</a>

src속성

HTML이미지는 <img>태그로 정의됩니다.

이미지 소스의 파일 이름은 src속성에 지정됩니다.

<img src="365ok.jpg">

width / height 속성

HTML이미지에는 이미지의 너비와 높이를 지정하는 크기 속성 집합이 있습니다.

<img src="365ok.jpg" width="500" height="600">

이미지 크기는 픽셀 단위로 지정됩니다. width="500"은 500픽셀 너비를 의미합니다.


alt속성

alt속성은 이미지를 표시할 수 없는 경우 사용하는 대체 문구를 지정합니다.

alt속성은 화면판독기에서 읽을 수 있습니다. (예:시작 장애인용 화면판독기)

<img src="365ok.jpg" alt="웹학교">

style속성

style속성은 색상, 글꼴, 크기 등과 같은 요소의 style을 지정하는데 사용됩니다.

<p style="color:red">단락</p>

lang속성

lang속성은 <html>태그에서 선언할 수 있습니다.

언어는 lang속성으로 선언됩니다.

언어 선언은 화면판독기 및 검색 엔진같은 경우 중요합니다.

<!DOCTYPE html>
<html lang="ko-KR">
<body>

...

</body>
</html>

처음 두 글자는 언어(ko)를 지정합니다. 방언이 있는 경우 두 자 이상의 영문자를 사용합니다.


title속성

아래 코드에서 title속성이 <p>요소에 추가되었습니다. 단락 위로 마우스를 이동하면 title속성의 값이 툴팁으로 표시됩니다.

<p title="툴팁입니다.">
단락
</p>

요약

  • 모든 HTML요소는 속성을 가질 수 있습니다.
  • title속성을 추가하게 되면 "툴팁"정보를 제공합니다.
  • href속성은 링크에 대한 주소 정보를 제공합니다.
  • width, height속성은 이미지의 크기 정보를 제공합니다.
  • alt속성은 화면판독기 사용자에게 텍스트를 제공합니다.
  • 속성은 소문자로 사용을 권장합니다.
  • 속성의 값을 사용할 때 따옴표를 이용하기를 권장합니다.


댓글목록 0

등록된 댓글이 없습니다.