상세 컨텐츠

본문 제목

HTML Attributes (속성)

JavaScript & HTML/HTML

by husks 2018. 3. 27. 18:07

본문

반응형


HTML Attributes



HTML Attributes는 요소에 대한 추가 정보를 제공합니다.


  • 모든 HTML 요소(Elements)는 속성(Attributes)을 가질 수 있습니다.

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

  • 속성은 항상 시작 태그에 지정 됩니다.

  • 속성은 일반적으로 다음과 같이 이름="값" 쌍으로 옵니다. (name="value")



href 속성



HTML 링크는 <a>태그로 정의 되고 주소 내용은 href 속성에서 지정 됩니다.



1
<a href="http://huskdoll.tistory.com">Husk's repository</a>





src 속성



HTML 에서 이미지를 삽입하는 대표적인 태그는 <img> 입니다.


해당 태그의 이미지 파일 이름(경로)는 src 속성에서 정의 됩니다.



1
<img src="img_test.jpg">





너비와 높이 특성



<img> 태그의 이미지 너비와 높이를 지정하는 속성이 존재 합니다. (width, height)



1
<img src="img_test.jpg" width="300" height="400">




설정한 이미지 크기는 픽셀 단위 입니다.


alt 속성



이미지의 경로가 잘 못되거나 하면 이미지를 표시 하지 못할때 alt 속성이 대체 텍스트를 보여줍니다.


해당 부분은 필수는 아니지만 웹 접근성을 위해 지정하는것이 좋습니다.



1
<img src="img_test.jpg" alt="테스트 이미지" width="300" height="400">





스타일 속성



style 속성은 색상, 폰트 크기와 같은 요소의 스타일을 지정하는데 사용합니다.



1
<p style="color:red">Husk's repository</p>





제목 속성



title 속성은 <p> 요소의 속성으로 마우스를 가져가면 title 속성 값이 툴팁으로 표시 됩니다.



1
<p title="허스크의 저장소" style="color:red">Husk's repository</p>





따옴표 OR 이중 따옴표



속성값에 따옴표를 넣으려면 겉을 이중 따옴표로 감싸주고


이중 따옴표를 넣으려면 따옴표로 감싸 주세요.



1
2
<p title="Husk 'repository'">
<p title='Husk "repository"'>



반응형

'JavaScript & HTML > HTML' 카테고리의 다른 글

selector  (0) 2019.08.01
HTML Headings (제목)  (0) 2018.03.30
HTML Elements (요소)  (0) 2018.01.03
HTML 기본 예제  (0) 2017.12.20
HTML 작성방법 (편집기)  (0) 2017.12.07

관련글 더보기

댓글 영역