[HTML] 03. HTML Attributes
03-1. HTML Attributes
아래의 예시를 보면,
- a는 tag 이름이고
- href는 <a> 태그의 attribute(속성) 이름이며
- https://wecode.com 는 href 속성에 대한 attribute 값이고
- "위코드로 이동"은 content(내용)입니다.
<a href="https://wecode.com">위코드로 이동</a>
태그마다 사용할 수 있는 attribute는 다릅니다. 위의 href는 다른 페이지로 이동하는 주소이므로 div같은 태그에는 쓸 수 없습니다. 처음에는 tag도 알아야 하고, attribute도 알아야 해서 헷갈릴 수도 있지만 주로 사용하는 tag와 attribute가 있어서 금방 익숙해집니다. 나머지는 모르거나 필요할 때마다 구글에서 검색해보면서 하나씩 익혀나가면 됩니다. index.html에 작성된 태그에 몇 가지 attribute를 추가해 보겠습니다.
03-1-1. id
id는 각 태그에 이름을 주는 속성입니다. 이름은 이름인데, 주민등록 번호와 같이 한국에 단 하나밖에 없어 대상을 식별할 수 있는 고유한 값이어야 합니다. 따라서 웹 페이지에 해당 id 이름은 오직 하나만 가질 수 있습니다. 즉, 중복된 id 이름이 있으면 안된다는 말입니다.
아래와 같이 profile이라는 id를 가진 태그는 단 하나만 있을 수 있습니다. 다른 태그에 profile이라는 id는 더이상 사용할 수 없습니다.
<div id="profile">
id는 해당 요소에만 넣고 싶은 디자인을 적용할 때 사용합니다. 예를 들면 <p> 태그에 글씨 크기를 20px로 적용하면, index.html에 있는 모든 <p> 태그의 글씨가 커집니다. 이런 것을 원한것이 아니라면 id가 profile인 요소에만 글씨 크기를 20px로 적용할 수 있습니다. JavaScript 코드에서도 유용하게 사용합니다. id 이름으로 요소를 찾아서 제목을 유동적으로 바꿀 수도 있고, 새로운 데이터로 내용을 변경할 수도 있습니다.
03-1-2. class
class도 태그에 이름을 주는 속성입니다. id와 비슷한 역할이지만, class는 여러 태그에 중복된 이름을 부여할 수 있습니다. 예를 들어 '이철수'라는 이름을 가진 사람이 여러 명 이듯이 여러 tag에 중복된 class 이름을 줄 수 있습니다.
<div class="content-wrap"></div>
<p class="content-wrap"></p>
03-2. 여러 속성 추가하기
하나의 태그에 2개 이상의 속성을 부여할 수 있습니다. 여러 속성을 주고 싶으면 한 칸 띄어쓰기 후 추가하면 됩니다. 속성의 순서는 상관없이 쓰고 싶은대로 쓰시면 됩니다.
<div id="profile" class="content-wrap"></div>
<img src="./hi.png" alt="내사진" >
출처 : wecode