HTML 속성
모든 HTML 요소는 속성을 가질수 있다.
● 속성은 항상 시작 태그에 지정
● 속성은 일반적으로 name = "value"와 같은 이름/값 쌍으로 제공
<여는태그 속성명="속성"> 내용 </닫는태그>
권장 사항
● 공백 사용 : 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백
● 소문자 속성 사용 : HTML에서 소문자 속성을 권장
● 속성 값은 항상 따옴표 사용 : HTML에서 속성 값은 따옴표를 사용하는것을 권장
<a href="https://sports.news.naver.com/kbaseball/index.nhn">네이버 스포츠 야구</a>
HTML 속성(Atrributes) 의 종류
href 속성
● <a> 태그 : 하이퍼 링크를 정의 → href 속성 : 링크가 다음 페이지로 이동하는 URL을 지정
src 속성
● <img> 태그 : 이미지를 HTML 페이지에 삽입하기 위해 사용 → src속성 : 표시할 이미지에 대한 경로(URL) 지정
URL 지정하는 방법(2가지)
절대경로, 상대경로
절대 경로 : 다른 웹사이트에서 호스트되는 외부 이미지에 대한 링크, 완전한 URL주소
ex) https://cdn.pixabay.com/photo/2016/11/18/17/14/athletes-1835893__480.jpg
상대 경로 : 웹 사이트 내에서 호스트 되는 이미지에 대한 링크
ex) ./athletes-1835893__480.jpg
./ : 현재 페이지를 기준으로 파일 불러오기
../ : 상위 페이지를 기준으로 파일 불러오기
witdh와 height 속성
● <img> 태그에서 이미지의 폭과 높이(픽셀 단위)를 지정 -> width : 이미지의 폭, height : 이미지의 높이
<img src="athletes-1835893__480.jpg" width="300" height="300">
alt속성
● <img> 태그 → alt 속성 : 어떤 이유로 이미지를 표시할 수 없는 경우 이미지의 대체 텍스트를 지
<img src="html_thumb.png" alt="html 썸네일">
style속성
● style 속성은 색상, 글꼴 크기 등과 같은 스타일을 요소에 추가하는데 사용
<p style="color:red;">빨간색 문단</p>
lang속성
● lang 속성은 검색 엔진과 브라우저를 지원하기 위해 사
<!DOCTYPE html>
<html lang="ko">
<body>
...
</body>
</html>
title속성
● 요소에 대한 추가 정보를 정의
<p title="도구 설명">문단입니다.</p>'HTML' 카테고리의 다른 글
| [HTML] List & Table (0) | 2024.08.05 |
|---|---|
| [HTML] TEXT (0) | 2024.08.05 |
| [HTML] Head (0) | 2024.07.29 |
| [HTML] Semantic 태그 (0) | 2024.07.29 |
| [HTML] 기본구조 (0) | 2024.07.26 |