그룹화 요소
<div>
division : 분할하다
<div> 요소는 블록 레벨 요소이며, 인라인 요소와 텍스트를 포함하고 블록 레벨 요소를 포함할 수 있다.
블록 레벨 요소의 그룹화를 위해 사용한다.
div는 전체적인 레이아웃을 잡을 때 사용한다.
<span>
span : 폭, 너비
<span> 요소는 인라인 요소이며 인라인 요소와 텍스트를 포함하지만 블록 레벨 요소를 포함할 수 없다.
인라인 요소나 텍스트의 그룹화를 위해 사용한다.
span은 텍스트 스타일 등 특정 부분에 스타일을 지정할 때 사용한다.
<div>와 <span>의 차이점
div와 div 사이에는 줄 바꿈이 생기고, span과 span 사이에는 줄 바꿈이 생기지 않는다.
<p>
paragraph : 단락, 절
한 개의 가로 공간(Block)을 만드는 태그이다. 자체적으로 margin값을 가지고 있다.
속성
id 선택자와 class 선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것이다.
id와 class를 사용하면 모든 <p> 요소가 아닌 특정한 <p> 요소에만 스타일을 적용할 수 있다.
| id | 하나의 id당 하나의 태그에만 적용할 수 있다. |
| class | 하나의 class를 여러 태그에 적용할 수 있다. 일반적인 HTML에서 요소에 클래스를 지정할 때 사용한다. |
| className | JSX(JavaScript의 확장 문법)문법이며, React에서 요소에 클래스를 지정할 때 사용한다. |
div id와 div class의 차이점
중복 가능성
하나의 id는 한 문서에서 한 번만 사용이 가능하다.
<div id = "apple">과 같이 사용하면 다른 위치에서 apple을 id로 정의할 수 없다.
하나의 class는 한 문서에서 여러 번 사용이 가능하다.
<div class="blue">와 같이 사용하면 다른 위치에서도 blue를 class로 정의하여 사용할 수 있다.
=> id의 속성이 class의 속성보다 우선순위가 높기 때문에 id의 속성은 해당 요소에 부여된 class 속성에 관계없이 작동한다.
따라서, 블로그 메뉴나 카테고리와 같이 단 하나만 존재해야 하는 부분에서는 id를 사용하고 그 외의 경우에는 class를 사용한다.
클래스 선택자를 사용하는 이유
클래스 선택자를 이용하면 코드를 DRY 하게 유지할 수 있다. DRY는 Don't Repeat Yourself의 줄임말로, 같은 코드를 반복해서 적지 말라는 뜻이다. 반복적으로 사용되는 CSS 코드를 각각의 요소 스타일에 하드 코딩하지 않고, 하나의 클래스 선택자에 스타일을 지정한 뒤, 필요한 요소에 class 속성만 지정하여 코드를 재활용하면 된다.
선택자에 대한 상세 설명 블로그
The 30 CSS Selectors You Must Memorize - Jeffrey Way
참조