5. Id

<id>

같은 박스를 구분하기 위해 각 각의 박스에 고유한 id를 부여함.

고유한 id이기 때문에 중복하여 사용할 수 없음.

id는 '#' + '지정한 id'를 통해 불러와서 사용함.

 

1) span 박스 만들기

Hello라고 적힌 연두색 박스를 여러개 만듬.

span 태그를 사용하여 Hello라고 적힌 연두색 박스를 여러개 나열함.

span 태그는 inline 요소이기 때문에 높이와 너비가 없고 block과 달리 나란히 위치할 수 있음.

 

이 여러개의 span 중 특정 span의 스타일을 변경하고 싶을 땐?

 

id를 사용하여 스타일링을 해보도록 하겠음.

 

 

2) id 사용하여 각 각 스타일링하기

스타일을 바꾸고 싶은 박스의 id를 불러와 색상을 변경함.

많은 박스를 같은 스타일로 변경하고 싶어도 id는 고유의 값이기 때문에, 각 각 다른 id를 가지고 있어서 스타일도 각 각 따로 적어줘야 함.

이렇게 중복되는 코드를 여러 번 작성하는 것은 매우 비효율적임.

 

 

3) ,(쉼표)사용하기

,(쉼표)를 사용하여 작성함.

중복되는 코드르 ,(쉼표)를 사용하여 짧게 줄였지만 이 방법도 그다지 효율적이지는 않아보임.

그렇기에 class를 사용하여 효율적으로 사용할 수  있음.