■ 요약
▶모든 HTML 요소는 속성을 가질 수 있다.
▶ <a> 태그의 "href" 속성은 이동하고자 하는 페이지의 URL를 지정한다.
▶ <img> 태그의 "src" 속성은 표시될 이미지의 경로를 지정한다.
▶ <img> 태그의 "width", "height" 속성은 이미지의 크기 정보를 제공한다.
▶ <img> 태그의 "alt" 속성은 이미지의 대체 택스트를 제공한다.
▶ "style" 속성은 색상, 폰트, 크기 등 요소에 대해 추가 스타일에 사용된다.
▶ <html> 태그의 "lang" 속성은 웹 페이지의 언어를 선언한다.
▶ "title" 속성은 요소에 대해 몇가지 추가 정보를 정의한다.
■ HTML 속성
▶ 모든 HTML 요소는 속성을 가질 수 있다.
▶ 속성은 요소에 대해 추가적인 정보를 제공한다.
▶ 속성은 항상 시작 태그에 지정한다.
▶ 속성은 보통 이름/값 쌍으로 제공된다. ex) name="value"
■ href 속성
▶ <a> 태그는 링크(hyperlink)를 정의한다.
▶ "href" 속성은 이동하려는 페이지의 URL을 지정한다.
<a href="https://naver.com">네이버</a>※ 링크에 대해 더 알고 싶다면 아래에 링크에서 확인한다.
출처 : https://www.w3schools.com/html/html_links.asp
HTML Links Hyperlinks
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
■ src 속성
▶ <img> 태그는 HTML 페이지에 이미지를 삽입하는데 사용된다.
▶ "src" 속성은 표시할 이미지의 경로를 지정한다.
<img src="html5.png">▶ "src" 속성에서 URL를 지정하는 2가지 방법이 있다.
1. 절대경로 : 다른 웹사이트에서 호스팅되는 외부 이미지에 대한 링크이다.
예시: src="https://www.w3schools.com/images/img_girl.jpg"
※ 주의 : 외부 이미지는 저작권이 있기 때문에, 권한이 없다면 저작권법 위반이 될 수 있다.
게다가 외부 이미지는 제어할 수 없고 갑자기 이미지가 사라지거나 변경될 수 있다.
(웬만하면 쓰지말자)
2. 상대경로 : 웹 사이트 내에 호스팅되는 이미지에 대한 링크이다. URL은 도메인을 포함하지 않는다.
src="img_1.jpg" 예시처럼 URL이 "/" 없이 시작한다면 현재 페이지 경로를 기준으로 경로를 지정하고,
src="/image/img_1.jpg" 예시처럼 URL이 "/" 같이 시작한다면 전체 경로를 기준으로 경로를 지정한다.
※ w3c 에서는 상대경로를 사용하는 것이 좋다고 한다.
■ width, height 속성
▶ <img> 태그는 "width" 와 "height" 속성을 포함할 수 있으며, 이미지의 가로와 세로 크기(픽셀)를 지정한다.
<img src="html5.png" width="500" height="500">
■ alt 속성
▶ 몇 가지 이유로 이미지가 표시되지 않는다면, <img> 태그에 필요한 "alt" 속성은 이미지의 대한 대체 텍스트를 지정한다.
▶ 연결이 느리거나 "src" 속성의 오류 혹 사용자가 화면 판독기를 사용할 경우일 수 있다.
<img src="html5.png" alt="html5 이미지 대체 텍스트">▶ 간단하게 저장된 이미지 이름을 변경하면 확인할 수 있다.
▶ 이미지에 대해 더 알고 싶다면 아래에 링크에서 확인한다.
https://www.w3schools.com/html/html_images.asp
HTML Images
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
■ style 속성
▶ "style" 속성은 요소에 스타일(색상, 폰트, 크기 등)을 추가하는데 사용된다.
<p style="color:red;">붉은색입니다.</p>▶ 스타일에 대해 더 알고 싶다면 아래에 링크에서 확인한다.
https://www.w3schools.com/html/html_styles.asp
HTML Styles
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
■ lang 속성
▶ 웹 페이지의 언어를 선언하기 위해 <html> 태그안에 "lang" 속성을 항상 포함해야 한다.
▶ 검색 엔진과 브라우저를 지원하기 위한 것이다.
<!DOCTYPE html>
<html lang="ko">
<body>
...
</body>
</html>▶ "lang" 속성에 언어 코드를 추가할 수도 있다.
▶ 첫 두 글자는 HTML 페이지의 언어를 지정하며, 마지막 두 글자는 국가를 정의한다.
<!DOCTYPE html>
<html lang="ko-kr">
<body>
...
</body>
</html>▶ 모든 언어 코드를 보고 싶다면 아래에 링크에서 확인한다.
https://www.w3schools.com/tags/ref_language_codes.asp
HTML ISO Language Code Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
■ title 속성
▶ "title" 속성은 요소에 대한 몇가지 추가정보를 정의한다.
▶ "title 속성값은 마우스를 요소 위에 올릴 때 툴팁으로서 표시된다.
<p title="마우스를 올리니 보인다">단락입니다.</p>
■ 속성을 항상 소문자로 사용하는 것을 권장한다.
▶ HTML 표준은 소문자 속성 이름을 필요하지 않는다.
▶ 모든 속성은 title 혹은 TITLE와 같이 대문자 혹은 소문자를 사용할 수 있다.
▶ 그렇지만 W3C는 HTML에 소문자 속성을 추천하고, XHTML 와 같은 엄격한 문서 유형에는 소문자 속성을 요구한다.
■ 속성 값은 항상 따옴표( " , ' )로 감싸서 사용하는 것을 권장한다.
▶ HTML 표준은 속성값을 따옴표로 감싸는 것을 필요하지 않는다.
▶ 그렇지만 W3C는 HTML에 따옴표를 추천하고, XHTML 와 같은 엄격한 문서 유형에는 따옴표를 요구한다.
좋은 예시 :
<a href="https://www.naver.com">네이버</a>좋지 않은 예시 :
<a href=https://www.naver.com>네이버</a>▶ 따옴표를 사용해야 하는 경우가 있습니다.
▶ 아래에 예시는 공백을 포함하기 때문에 "title" 속성을 올바르게 표시하지 않습니다.
<p title=p에 대하여>단락입니다</p>▶ 마우스를 올려보면 "p에"만 보인다.
■ 작은 따옴표 혹은 큰 따옴표?
▶ 큰 따옴표로 감싼 속성값은 HTML에 가장 일반적이지만 작은 따옴표도 사용할 수도 있다.
▶ 속성값 자체에서 큰 따옴표를 포함할 때 작은 따옴표를 사용해야 한다.
<p title='가나 "다라" 마바'>단락입니다.</p>혹은
<p title="가나 '다라' 마바">단락입니다.</p>
■ HTML 속성 레퍼런스
▶ 각 HTML 요소에 대한 모든 속성의 전체 목록은 아래에 링크에서 확인한다.
https://www.w3schools.com/tags/ref_attributes.asp
HTML Attributes
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'HTML' 카테고리의 다른 글
| HTML / (6) 단락 (Paragraphs) (0) | 2023.02.14 |
|---|---|
| HTML / (5) 제목(Headings) (0) | 2023.02.13 |
| HTML / (3) 요소(Elements) (0) | 2023.02.10 |
| HTML / (2) 기본 (0) | 2023.02.10 |
| HTML / (1) 개요 (0) | 2023.02.05 |