HTML 속성 (Attributes)
속성은 HTML 요소에 태그의 동작이나 스타일, 데이터 등 추가적인 정보를 제공하거나, 요소의 동작을 제어할 때 사용합니다.
HTML 속성은 시작 태그 내에 포함되며, 이름="값" 형식으로 작성합니다.
HTML 속성 구조
<요소명 속성이름="속성값"> ... </요소명>
속성을 어떻게 사용할 수 있을까요?
src 속성은 <img> 태그의 필수 속성으로, 표시할 이미지의 경로를 지정합니다.
img 태그 src, alt 속성
<img src="이미지 경로.jpg" alt="이미지 설명" />
src 속성이 정의되지 않은 img 태그는 이미지를 표시하지 않습니다.
주요 속성 예시 알아보기
HTML 요소에 사용되는 주요 속성에 대해 알아보겠습니다.
먼저, 모든 HTML 요소에 사용할 수 있는 속성을 살펴보겠습니다.
모든 HTML 태그 공통 속성, class와 id
특정 요소에 고유한 식별자를 할당할 때는 id 속성을, 여러 요소에 동일한 스타일을 적용할 때는 class 속성을 사용합니다.
class: 같은 스타일을 여러 요소에 적용할 때 사용합니다. 여러 요소에 동일한 클래스명을 부여할 수 있습니다.
class 속성 예시
<div class="highlight">highlight 클래스 적용</div>
id: 특정 요소를 구분하거나 JavaScript에서 특정 요소를 선택할 때 사용합니다. id 값은 다른 HTML 요소와 중복을 허용하지 않습니다.
id 속성 예시
<div id="main-content">main-content ID를 가진 HTML 요소</div>
특정 태그에만 사용되는 속성
몇몇 속성은 특정 태그에서만 사용할 수 있습니다. 아래에서 2가지 예시를 살펴보겠습니다.
img 태그에 고유한 속성, src, alt
img 요소에서 src는 이미지의 경로를 지정하며, alt는 이미지가 표시되지 않을 때 사용될 대체 텍스트를 지정합니다.
img 태그 src 및 alt 속성
<img src="https://picsum.photos/id/237/300" alt="강아지" />
a 태그에 고유한 속성, href
다른 페이지로 이동할 때 사용하는 하이퍼링크를 생성하는 a 요소에서 href 속성은 이동할 페이지의 URL을 지정합니다.
target 속성은 링크를 클릭했을 때 새 창에서 페이지를 열지 여부를 결정합니다. target="_blank"는 새 창에서 페이지를 열도록 설정합니다.
a 태그 href 속성
<a href="https://codefriends.net" target="_blank">Link</a>
코드의 별표로 강조된 부분을 따라 입력해 보세요.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!