레이아웃을 나누어주는 태그란?
HTML 문서를 작성하다보면 한번에 여러개의 요소들을 묶거나 나눠야할 필요들이 있다.
예로, 제목-리스트-설명 의 요소들을 하나로 묶어서 위치를 조정해야할 때이다.
또는, 하나의 제목 태그안의 한 단어만 다른 색상으로 지정하고 싶을 때이다.
01. DIV (요소들을 하나로 묶어주는 태그)
<div style="transform:translate(200px);">
<h1>Fantastic Heading</h1>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<p>위 리스트들은 정말 판타스틱합니다.</p>
</div>
- 위와 같이 요소들을 묶어주어야지 한번에 요소들을 움직이거나 스타일을 지정해줄 수 있다.
- 이전 포스팅에서 언급되지는 않았지만 “transform” 속성으로 우측으로 이동해보았다.
📍출력물
Fantastic Heading
- list1
- list2
- list3
위 리스트들은 정말 판타스틱합니다.
02. SPAN (요소 내에서 요소를 따로 지정할 때 쓰는 태그)
<h2>이것은 정말 멋진 <span style="color:pink;">제목</span>입니다.</h2>
- 위 소스코드와 같이 “h2” 태그 안에 또다른 스타일을 주고 싶을때 “span” 태그로 해당 부분만 다시한번 감싸주고 스타일을 부여하면된다.
📍출력물
이것은 정말 멋진 제목입니다.
⭐️지난 포스팅에 이어서 html 문서에 작성한 요소들을 묶는 태그와 왜 사용하는지 또 나누는 태그들에 대해서 알아보았습니다.
