HTML5 - 구조 관련 태그

구조 관련 태그

- 구조 관련 태그는 CSS를 사용할 때 반드시 있어야 하는 태그로 일종의 레이아웃의 뼈대를 만드는 역할을 한다

- 앞서 설명했던 <header>, <nav> 등이 이에 해당하는데 기본적으로는 이러한 기능을 수행하는 태그는 <div> 태그를 그 모체로 한다

- 즉 <div> 태그에 임의로 이름을 붙여 넣어 레이아웃의 용도에 따라 구분을 해서 사용하고자 <header>, <footer>등의 태그를 만든거라고 보면된다

- <div> 태그는 HTML의 태그들, 즉 요소들을 그룹으로 묶어서 정의하도록 해준다

- 묶어서 그 그룹에 같은 CSS를 적용할 수 있다는 의미이다.

 

 

<div> 태그

- div 태그는 <header>나 <footer>처럼 전체 섹션이나 컨테이너를 감싸는 역할을 한다

- 블록 형식으로 분할하기 때문에 기본적으로 줄바꿈을 해버리기 때문에 div태그를 붙여서 쓰기 위해서는 별도의 CSS를 적용하거나 <span> 태그를 사용해야 한다

- 주로 레이아웃을 짤 때 사용한다

<div style="background-color: lightgray; padding: 10px;">
  <h1>Welcome!</h1>
  <p>This is a sample content block.</p>
</div>

: 이렇게 하면 div태그 안에 있는 모든 요소가 해당하는 style이 적용이 된다

 

<span> 태그

- span태그는 HTML문서의 일부 영역만 감싼다

- span태그는 inline 요소이기 때문에 줄바꿈이 일어나지 않는다는 특징이 있다.

- 특정 텍스트나 인라인요소를 강조하거나 스타일 적용하고자 할 때 사용한다

<p>My favourite colour is <span style="color: blue;">blue</span>.</p>

: 이렇게 되면 My favourite colour is blue에서 blue부분만 스타일이 적용되는 것이다!

 

 

 

 

결론적으로 div태그나 span태그나 그 차이는 블록요소냐 인라인요소이냐 차이지 사실 기능 자체는 같은 태그다