4. HTML Attribute(속성)

1. HTML Attribute(속성)

HTML Attribute에 대해서 다시 한 번 보겠습니다.

<a href="https://naver.com">네이버로 이동</a>

a는 tag 이름이고

 

href는 attribute(속성) 이름이며

 

https://naver.com는 href 속성에 대한 attribute 값이고,

 

"네이버로 이동"은 contant(내용)입니다.

 

꼭 a tag가 아니더라도 attribute를 사용 할 수 있습니다.

 

사용 하는 tag에 따라 사용하는 attribute도 달라집니다.

 

처음에는 tag도 공부해야 하고 attribute도 공부해야 하기 때문에 머리가 좀 아프지만...

 

공부를 하면서 tag와 attribute는 익혀나가시면 됩니다.

1 - 2. ID

id는 각 태그에 이름을 주는 속성입니다.

 

이름은 이름인데, 주민등록 번호와 같이 한국에 단 하나밖에 없어 대상을 식별할 수 있는 고유한 값이어야 합니다.

 

따라서 웹 페이지에 해당 id이름은 오직 하나만 가질 수 있습니다.

 

즉, 중복된 id 이름이 있으면 안된다는 말입니다.

 

그렇다면 id는 언제 쓰일까요?

 

id는 특정 요소에만 넣고 싶은 디자인을 적용할때 사용 합니다.

 

예를 들어 p tag에 글씨 크기를 20px로 적용하면 index.html에 있는 모든 p tag의 글씨가 20px로 변합니다.

 

이런 것을 원한것이 아니라면

 

id가 특정 요소에 글씨만 20px로 적용할 수 있습니다.

 

javascript 코드에서도 유용하게 쓰입니다.

 

id 이름으로 요소를 찾아서 제목을 유동적으로 바꿀 수도 있고,

 

새로운 데이터로 내용을 변경 할 수도 있습니다. 

 

1 - 3. class

class도 태그에 이름을 주는 속성입니다.

 

id와 비슷한 역할이지만, class는 여러 태그에 중복된 이름을 부여할 수 있습니다. 

 

예를 들어 '빈코더'라는 이름을 가진 사람이 여러명 있듯이

 

여러 tag에 중복된 class이름을 줄 수 있습니다.

<div class="content-wrap"></div>
<p class="content-wrap"></p>

1 - 4. 여러 속성 추가하기

한번에 여러가지 속성을 줄수도 있습니다. 

 

여러  속성을 주고 싶으면 한칸 띄어쓰기 후 추가해주면 됩니다.

 

속성에 대한 순서는 상관없습니다.

<div id="profile" class="content-wrap"></div>
<img src="./hi.png" alt="내사진" >