최원종의 개발 블로그

HTML 속성 - 4 본문

HTML_CSS/사전학습

HTML 속성 - 4

chl6698 2026. 4. 15. 14:55

개념 정리

- **HTML 속성(Attribute)**: HTML 태그에 추가적인 정보를 제공하는 key-value 쌍 **(예: 속성명="값")**
- **역할**: 태그의 동작, 스타일, 데이터 등을 정의하거나 제어
- **작성 규칙**:
    - 속성은 시작 태그 안에 작성
    - 속성명은 소문자 권장, 값은 따옴표로 감쌈 ("" 또는 '')
- **주요 속성 예시**:
    - id: 요소의 고유 식별자
    - class: 스타일링이나 스크립트를 위한 그룹 식별자
    - src: 이미지, 비디오 등의 소스 경로
    - alt: 대체 텍스트 (접근성 중요)
    - href: 링크 URL

실습코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML 속성 예제</title>
  </head>
  <body>
    <!-- 1. id 속성 : 요소를 고유하게 식별 -->
    <h1 id="main-title">HTML 속성 배우기</h1>

    <!-- 2. class 속성 : 여러 요소에 공통적인 스타일 적용 -->
    <p class="info-text">이것은 첫번째 문단입니다</p>
    <p class="info-text">이것은 두번째 문단입니다</p>

    <!-- 3. src 와 alt 속성 : 이미지 삽입시 필수 -->
    <img src="https://picsum.photos/id/2/500/500" alt="샘플이미지" />

    <!-- 4. href 속성 : 링크 연결 -->
    <a href="https://www.naver.com/" target="_blank">예제 사이트 방문</a>

    <!-- 5. style 속성 : 인라인 css로 스타일 적용 -->
    <div style="color: blue; font-size: 20px">스타일 속성 테스트</div>

    <!-- 6. data- 속성 : 사용자 정의 속성(사용자 정의 데이터 저장) -->
    <button data-myage="25" ondblclick="alert('클릭됨!')">버튼</button>
  </body>
</html>

 

'HTML_CSS > 사전학습' 카테고리의 다른 글

시멘틱 태그란 - 6  (1) 2026.04.15
HTML 주요 body 내의 태그 - 5  (0) 2026.04.15
HTML 기본 템플릿에 이해 - 3  (1) 2026.04.15
HTML, CSS, Javascript - 2  (0) 2026.04.15
HTML 이란 - 1  (0) 2026.04.14
'HTML_CSS/사전학습' Related Articles more