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