HTML 속성 (Attributes)

속성은 HTML 요소에 태그의 동작이나 스타일, 데이터 등 추가적인 정보를 제공하거나, 요소의 동작을 제어할 때 사용합니다.

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

복사
<요소명 속성이름="속성값"> ... </요소명>

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

복사
<img src="이미지경로.jpg" alt="이미지 설명" />

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

HTML 요소에 사용되는 주요 속성에 대해 알아보겠습니다.

먼저, 모든 HTML 요소에 사용할 수 있는 속성을 살펴보겠습니다.

특정 요소에 고유한 식별자를 할당할 때는 id 속성을, 여러 요소에 동일한 스타일을 적용할 때는 class 속성을 사용합니다.

class

같은 스타일을 여러 요소에 적용할 때 사용합니다. 여러 요소에 동일한 클래스명을 부여할 수 있습니다.

복사
<div class="highlight">highlight 클래스 적용</div>

id

특정 요소를 구분하거나 JavaScript에서 특정 요소를 선택할 때 사용합니다. id 값은 다른 HTML 요소와 중복을 허용하지 않습니다.

복사
<div id="main-content">main-content ID를 가진 HTML 요소</div>
    ```

<br />

### 특정 태그에만 사용되는 속성

몇몇 속성은 특정 태그에서만 사용할 수 있습니다. 아래에서 2가지 예시를 살펴보겠습니다.

<br />

#### img 태그에 고유한 속성, `src`, `alt`

`img` 요소에서 `src`는 이미지의 경로를 지정하며, `alt`는 이미지가 표시되지 않을 때 사용될 대체 텍스트를 지정합니다.

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

a 태그에 고유한 속성, href

다른 페이지로 이동할 때 사용하는 하이퍼링크를 생성하는 a 요소에서 href 속성은 이동할 페이지의 URL을 지정합니다.

target 속성은 링크를 클릭했을 때 새 창에서 페이지를 열지 여부를 결정합니다. target="_blank"는 새 창에서 페이지를 열도록 설정합니다.

복사
<a href="https://codefriends.net" target="_blank">Link</a>

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