속성
HTML태그에는 속성이 포함될 수 있습니다. 속성은 <태그명 속성이름 = '속성값'>의 형태로 작성합니다. 하나의 태그가 여러 개의 속성을 가지고 있을 수도 있습니다. 이전에 이미 봤었죠. <img>의 src 속성이나 <a>의 href속성이 해당됩니다.
속성은 태그에 기능을 수정하거나, 기능을 제공하는 역할을 한다고 생각하세요.
id
id는 대부분의 태그가 속성으로 가질 수 있습니다. 태그에 아이디를 부여한다고 생각하시면 좋겠네요. 아이디는 태그에 고유한 이름을 붙이는 것입니다. 중복되면 안되겠죠?
사용 방법은 아래와 같습니다.
<!-- ul#comments-list -->
<ul id = 'comments-list'></ul>아이디를 사용한다는 것은 같은 태그여도 아이디가 없는 태그와는 다르게 어떤 의미를 가지고 있다는 것을 알 수 있겠죠. 특정 아이디를 가진 태그에 CSS를 입히는 방식으로 사용할 수 있습니다.
선택자로 나타내면 #기호를 사용합니다.
class
class도 id속성과 마찬가지로 대부분의 태그가 가질 수 있는 속성입니다. 하지만, 중복이 가능하죠. 클래스는 같은 형태가 반복될 태그들에 붙여주면 좋습니다. CSS를 사용하면 그 쓰임을 알 수 있을 겁니다.
<!-- li.comment -->
<ul id = 'comments-list'>
<li class='comment'>품목1</li>
<li class='comment'>품목2</li>
</ul>클래스를 사용하는 것도 아이디와 같이 클래스가 없는 같은 이름의 태그와는 다른 의미를 가지고 있습니다. 좀 더 구체적이라고 해야될 것 같네요.
선택자는 .을 사용합니다.
EMMET
HTML문서를 작성하면 태그를 쓸 때 귀찮아지는 것이 사실입니다. 계속 <를 사용하고 같은 이름을 적고 하는 경우가 많죠. 이때, emmet이란 기능을 이용해 보세요. 무료 개발 환경인 VS CODE에서는 기본적으로 지원해주는 기능입니다. 보통 선택자를 이용해서 작성이 가능합니다.
대표적인 기능을 살펴볼게요.
먼저 태그를 작성할 때 그냥 태그 이름을 쓰고 커서가 그 이름 뒤에 있는 상태에서 TAB을 눌러주게 되면 자동으로 태그가 완성됩니다.
div // 이 상태에서 탭을 눌러줍니다.만약 형제 태그를 만들고 싶다면 태그 이름에 +선택자를 써주고 다음 태그이름을 쓰면 됩니다.
div+span // 이 상태에서 탭을 눌러줍니다.그렇다면 자식을 만들 때는 어떻게 할까요? >선택자를 사용하면 됩니다.
ul>li // 이 상태에서 탭을 눌러줍니다.그런데, 자식이 많거나 만들고 싶은 태그가 많은 경우가 있습니다. 이런 경우는 *를 사용하고 뒤에 얼마나 만들고 싶은지 숫자를 쓰면 됩니다.
ul>li*4 // 이 상태에서 탭을 눌러줍니다. li 4개가 ul의 자식으로 생성됩니다.특정 속성을 가진 상태로 만들고 싶습니다. 그렇다면 []를 이용하세요. 속성이 많으면 그냥 쓰면 됩니다. ,를 넣어주지 않아도 됩니다. 커서가 중간에 있어도 탭을 누르면 알아서 html태그로 바꿔줍니다.
div[class='div-box' id='id'] 태그를 쓰면서 콘텐츠 내용을 적고 싶다면 {}를 쓰면 됩니다.
div{div box}id와 class를 붙이는 방법은 따로 있습니다. 바로 #과 .을 이용하는 것입니다. 위에서 선택자로 봤던 것이죠.
div#div-id // id속성 값을 #뒤에 적으면 됩니다.
div.div-class // class속성 값을 .뒤에 적으면 됩니다.만약 태그 이름이나 콘텐츠에 품목 순서에 맞게 1부터 숫자를 넣고 싶다면 $를 사용합니다. 아니면 클래스에도 추가할 수 있습니다.
ul>li$*4 // li1, li2, li3, li4의 이름을 가진 태그가 생깁니다. 사용은 안 하겠죠?
ul>li*4{$} // 첫 li의 콘텐츠가 1, 두번째는 2 ... 이런식으로 채워집니다.
ul>li.item$*4 // class가 item1, itme2 이런 식으로 각 li에 맞게 채워집니다. 자주 사용하는 것은 이 정도인 것 같네요. 활용하면 HTML문서 작성이 훨씬 빨라지니 자주 사용하는 것이 좋겠죠?
