HTML-Attributes(속성)

728x90

※ 주의 !

이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다.

문제가 있다면 말씀 부탁 드리겠습니다

안녕하세요.

Gon입니다.

이번 글에서는 HTML-Attributes 흔히 속성이라 불리는 녀석에 대하여 알아보겠습니다.

HTML - Attributes(속성)

지난번 글에서 elements(요소)에 대하여 알아보았습니다.

이번글에서 알아볼 Attributes(속성)은 elements(요소)에 대하여 추가적인 정보를 전달해 주는 역할을 하는 녀석 입니다.

Attributes(속성)의 특징은 다음과 같습니다. 밑에부터는 영문표기는 생략 하도록 하겠습니다.

이제 HTML에서 사용되는 대표적인 속성과 요소를 알아보도록 하겠습니다.

<a>태그는 하이퍼링크를 정의하는 태그 입니다. 그리고 이 <a>태그 안에 사용되는 href속성은 해당 하이퍼링크를 통하여 이동할 웹페이지의 URL을 정의하는 속성입니다.

다음과 같은 예시로 사용될수 있을 것 입니다.

<a href="https://blog-of-gon.tistory.com">Gon의 블로그 바로가기</a>

위와같이 HTML 코드를 작성한다면 우리가 작성한 웹페이지에는 Gon의 블로그 바로가기라는 글이 하이퍼링크가 걸리면서 해당 href속성의 값, 즉 'blog-of-gon.tistory.com'로 이동할수 있게됩니다.

<img>태그는 흔히 우리가 아는 image를 웹페이지에 구현하는 태그입니다.

img안에 대표적인 3가지 속성이 있습니다

이미지를 사용하는 예시는 다음과 같습니다.

<img src="img_main.jpg" width="50" height="60" alt="메인화면 입니다">
<img src="www.URL이미지.com" width="50" height="60" alt="메인화면 입니다">

예시처럼 src속성은 HTML 파일이 지정되있는 곳을 통해 직접 불러올수 있는 방법(경로설정도 가능)과 웹사이트의 URL을 통하여 불러오는 2가지 방법이 있습니다.

보통은 직접 파일을 불러오는 방식을 많이 사용하게 됩니다. 웹사이트의 이미지를 불러온다면 그 웹사이트가 수정되면서 이미지를 못 불러올 상황이 생길 수도 있기 때문입니다.

위 내용처럼 요소의 세부 내용을 정리해주는 속성 값들이 모든 태그에는 존재합니다.

속성은 대소문자를 구분하지 않습니다
- HTML 표준에서는 속성값을 대문자,소문자 구분 없이 잘 동작 됩니다.
- 하지만 표준이 아닌 곳에서는 대문자로 작성한 속성값이 정상 작동하지 않을 수 있어 소문자로 작성을 권장합니다.

속성의 값에 따옴표(" ")사용을 권장합니다.
-HTML 표준에서는 속성값을 대문자,소문자 구분 없이 사용할 수 있습니다.
-하지만 표준이 아닌 곳에서는 대문자로 작성한 속성값이 정상 작동하지 않을 수 있어 속성 값에 " " 사용을 권장합니다.

<a herf="권장">이렇게 쓰세요</a>
<a herf=지양>지양하세요</a>

이상 속성에 대하여 알아보았습니다.

감사합니다.

Gon

728x90