HTML (5) Attributes 속성 (+Reference)

5947 단어 htmlhtml

HTML 속성은 HTML 요소에 대해 추가적인 정보를 제공한다.
HTML Attribute Reference

HTML Attributes

  • 모든 요소들은 속성들을 갖는다.
  • 요소에 대한 추가 정보를 제공한다.
  • 항상 start tag에 지정된다.
  • 보통 name/value 짝꿍으로 등장한다. name="value"

1. href 속성

링크 태그인 <a> 는 URL을 지정해주는 href 속성을 갖는다.

2. src 속성

이미지 태그 <img>의 속성 src는 이미지 경로를 지정한다.

  • Absolute URL : 다른 웹 사이트에서 호스팅되는 외부 이미지에 연결합니다.
    Example: src="https://www.w3schools.com/images/img_girl.jpg".
    Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

  • Relative URL : 웹 사이트에서 호스팅되는 이미지에 연결합니다. 여기서 URL에는 도메인 이름이 포함되지 않습니다. 슬래시 없이 URL이 시작되면 현재 페이지와 상대적입니다. Example: src="img_girl.jpg".
    URL이 슬래시로 시작되면 도메인에 상대적입니다. Example: src="/images/img_girl.jpg".
    Tip: It is almost always best to use relative URLs. They will not break if you change domain.

3. width/height 속성

넓이와 높이 조정

4. alt 속성

<img>태그의 속성 alt는 이미지의 대안 text를 지정한다. 만약 이미지가 보이지 않거나 연결이 느리거나 오류가 발생할 경우 나타나는 텍스트이다.

5. style 속성

style속성은 요소에 스타일을 지정해줄 때 사용한다. 색깔, 폰트, 사이즈 등이 있다.

6. lang 속성

웹페이지의 언어를 선언하기 위해서 <html>태그 안에 항상 lang속성을 포함해야한다.
이것은 검색 엔진과 브라우저를 돕는다.

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

국가 코드를 추가 할 수도 있다. 언어-국가
ISO 639-1 language codes 링크

<html lang="en-US">

7. title 속성

title속성은 요소에 대한 추가 정보를 나타낸다.
요소에 마우스를 가져다 댈 때 tooltip으로 보여준다.

<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>

</body>
</html>

8. 주의할 점

  • 소문자 사용을 권장함
  • 속성의 값에 " " (Quotes) 사용을 권장
  • 주로 큰 따음표를 사용하지만 문장에 큰 따음표가 이미 사용중이면 작은 따음표도 물론 사용가능하고 반대도 가능하다.
[P_stage] - week9 Day3
210419_객체(Object)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage