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