[HTML] HTML Attributes

티스토리 뷰

[Dev]/HTML

[HTML] HTML Attributes

ossians 2018. 4. 10. 20:35

[HTML] HTML Attributes(속성)

HTML Attributes(속성)

모든 HTML 요소는 속성을 가질 수 있으며, 속성은 항상 시작 태그에 지정합니다.

일반적으로 속성은 " Name = Value"으로 입력됩니다.

<href> 속성

href는 링크를 설정할 수 있는 속성이며 <a> 태그로 정의 됩니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Ossian Tistory</title>
    </head>
 
    <body>
 
    <a href="http://ossian.tistory.com/">Ossian Tistory 바로가기</a>
 
    </body>
</html>

<src> 속성

src는 이미지를 설정할 수 있는 속성이며 <img> 태그로 정의 됩니다.

Image에 대한 경로는 "상대 경로"와 "절대 경로"가 존재합니다.

상대 경로는 읽어드린 html 파일이 존재한 디렉토리를 기준으로 경로를 설정합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Ossian Tistory</title>
    </head>
 
    <body>
 
    <img src="img_test.jpg">Image Test</img>
 
    </body>
</html>

절대 경로는 읽어드린 html 파일이 존재한 디렉토리와 상관없이 불러올 이미지나 파일의 전체 위치를 경로로 설정합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Ossian Tistory</title>
    </head>
 
    <body>
 
    <img src="D:\img_test.jpg">Image Test</img>
 
    </body>
</html>

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

width는 너비, height는 높이를 의미합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Ossian Tistory</title>
    </head>
 
    <body>
 
    <img src="img_test.jpg" width="100" height="50">Image Test</img>
 
    </body>
</html>

<alt> 속성

alt는 이미지를 표시할 수 없을 때 사용할 대체 텍스트를 지정합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Ossian Tistory</title>
    </head>
 
    <body>
 
    <img src="img_test1.jpg" alt="Test_Image"></img>
 
    </body>
</html>

<style> 속성

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

<!DOCTYPE html>
<html>
    <head>
        <title>Ossian Tistory</title>
    </head>
 
    <body>
 
    <p style="color:blue">Hello I am Ossian</p>
 
    </body>
</html>

<lang> 속성

lang 속성은 html 태그에 선언될 수 있으며, 기본적으로 언어를 설정할 수 있는 속성입니다.

다만 lang 속성에 설정된 언어를 기준으로 스크린 리더(화면 낭독 프로그램)의 언어가 설정되기도 하며 검색엔진에 필터 되기도 합니다.

따라서 lang 속성의 올바른 설정을 통해 웹 접근성을 준수하도록 해야 합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>Ossian Tistory</title>
    </head>
 
    <body>
 
    * * *
 
    </body>
</html>

<title> 속성

titile 속성은 P 태그 속성입니다. 단락 위에 Mouse over 시 툴팁으로 표시됩니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>Ossian Tistory</title>
    </head>
 
    <body>
 
    <p title="Hello I am title attribute">This is a Paragraph.</p>
 
    </body>
</html>
 
=