본문으로 건너뛰기
실습하기

HTML 속성 (Attributes)

HTML 속성은 HTML 요소에 추가 정보를 제공하는 이름과 값으로 구성되어 있습니다.

속성은 시작 태그에 작성하며, 하나의 HTML 요소에 여러 속성을 적용할 수 있습니다.


속성 기본 구조​

HTML 속성은 시작 태그 내에 포함되며, 이름="값" 형식으로 작성합니다.

HTML 속성 구조
<요소명 속성이름="속성값"> ... </요소명>

속성 사용 예시​

img 태그 src, alt 속성
<img src="이미지경로.jpg" alt="이미지 설명" />

"src" 속성은 <img> 태그의 필수 속성으로, 표시할 이미지의 경로를 지정합니다.

src 속성이 정의되지 않은 img 태그는 이미지를 표시하지 않습니다.


주요 속성 예시​

  1. HTML 태그 공통: class, id 속성

    모든 사람들이 이름과 주민등록번호로 구분되는 것처럼, 웹페이지도 특정 요소를 구분해 스타일을 적용하기 위해 class와 id 속성을 사용합니다.

    • class: 같은 스타일을 여러 요소에 적용할 때 사용합니다. 여러 요소에 동일한 클래스명을 부여할 수 있습니다.
      class 속성 예시
      <div class="highlight">highlight 클래스 적용</div>
    • id: 특정 요소를 구분하거나 JavaScript에서 특정 요소를 선택할 때 사용합니다. id 값은 다른 HTML 요소와 중복을 허용하지 않습니다.
      id 속성 예시
      <div id="main-content">main-content ID를 가진 HTML 요소</div>

  1. img 태그: src와 alt 속성

    img 요소에서 이미지의 경로(src)와 대체 텍스트(alt)를 지정하는 데 사용합니다.

    img 태그 src 및 alt 속성
    <img src="https://picsum.photos/id/237/300" alt="강아지" />

  1. a 태그: href 속성

    a 요소에서 다른 페이지로 이동할 링크의 대상 URL을 지정하는 데 사용합니다.

    a 태그 href 속성
    <a href="https://www.example.com">웹사이트 방문하기</a>

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!