저번 포스팅에 <div>와 <span>을 썼었는데 개별적으로 다룰 가치에 있는 태그들이라 생각해서 따로 포스팅해봅니다 ㅎㅅㅎ
<div>
나중에 CSS를 이용하여 스타일을 지정할 때 개별 문단에 대해 일일이 속성을 지정하는 것보다 비슷한 유형의 문단에 그룹을 지정하여 한꺼번에 스타일을 지정하는게 아무래도 효과적일 것입니다.
이때, 비슷한 문단들을 묶어주는 태그가 바로 <div>입니다.
사실, <div>는 다른 Element들을 감싸 하나의 그룹으로 만드는 역할을 할뿐 <div>에 있는 기능은 없습니다.
하지만 <div>는 HTML문서의 layout을 위해 사용하거나 HTML, CSS, JavaScript와의 분업 기능을 할 때 서로 통신할 수단으로서도 가치가 있는 태그입니다.
<span>
<span> 또한 그 자체에 의미가 없는 태그입니다. 문단의 특정 부분에 이름을 붙이는 역할로 <div>와 비슷한 역할을 합니다.
차이점은 <div>는 블록요소, <span>은 인라인요소라는 것입니다.
따라서 <div>는 문단의 그룹에 이름을 붙여 분류하지만 <span>은 글자 그룹에 대해 이름을 붙여놓고 분류하게 됩니다.
id와 class
위에 이름을 붙인다는 이야기를 했는데 이름을 붙이는 용도로 id와 class를 이용할 수 있습니다.
id의 경우 고유한 이름이므로 문서 내에서 단 1개만 존재해야 합니다. 예를 들어 <div id="index">라고 선언했으면 다른 요소에서는 절대로 "index"라는 id를 사용할 수 없습니다.
class의 경우에는 여러번 사용이 가능합니다. id와 함께 이름 부여 기능은 같지만 중복이 가능한 점이 차이가 있습니다.
또, 하나의 요소에 여러개의 클래스를 사용 할 수 있습니다. 2개 이상의 클래스를 사용할 경우에는 class 속성값에 공백으로 구분하여 지정합니다. <div class="novel name">으로 선언하면 이 <div>의 클래스는 novel과 name 2개를 가지게 되는 것입니다.
class와 id명은 작성자가 원하는 데로 지정할 수 있지만 의미하는 내용에 맞는 이름으로 쉽게 작성되야합니다. 만약 혼자만 알아볼 수 있는 이름으로 작성된다면 유지보수가 어려워지는 문제점이 생깁니다. 가독성도 떨어지고요...
또한 이름을 지을때 2개의 단어 이상 사용하는 경우 "-"을 주로 사용하여 작성합니다. "_"와 첫번째 오늘 단어에는 소문자, 그다음 단에의 첫글자마 대문자를 사용하는 방법도 있지만 보통은 "-"를 주로 사용합니다.
<div id="example-expression">과 같이 말이죠
