8. div 태그

<div> 태그에 대해 알아보겠습니다.

 

 

<div>

- 요소들을 묶어주는 태그

 

div 태그는 직접 사용하면서 알아보는 것이 가장 효과적이기 때문에 바로 VScode로 실행해보겠습니다!

 

 

먼저 VScode를 통해 제가 좋아하는 음악 플레이리스트를 소개하는 웹사이트를 제작해보겠습니다.

 

 

웹사이트

 

이렇게 좋아하는 노래 3곡의 제목과 앨범커버, 가사를 포함한 웹사이트를 하나 생성했습니다.

 

글자 크기의 위계로 노래의 경계가 나누어지긴 하지만, 더 명확하게 각각의 노래가 나누어지면 좋을 것 같습니다.

이럴 때 사용하는 태그가 바로 <div>태그입니다!

연관이 있는 요소들을 하나로 묶어주는 역할을 합니다.

 

div 태그는 각 요소를 하나로 묶어주는 것 외에는 다른 역할을 하지 않지만, 그것만으로도 굉장히 유연하고 유용하게 사용할 수 있기 때문에 자주 사용해보는 것이 div 태그를 잘 활용할 수 있는 방법입니다!

 

그러면 div 태그로 각 노래를 나눠보겠습니다-

 

이렇게 각 노래를 나눴는데 웹사이트를 새로고침해도 아무런 변화가 일어나지 않죠?

그 이유는 div 태그에 아무런 스타일을 주지 않았기 때문입니다-

이제 div 태그에 클래스 이름을 주어 스타일을 적용시켜보겠습니다.

 

 

div 태그에 song이라는 클래스 이름을 주었습니다.

 

그리고 이렇게 style에서 div 태그 내부에 각각 적용할 스타일을 적어주었습니다.

 

위 동영상에서 볼 수 있듯이 각각의 노래가 회색 네모칸으로 분리되고, 스타일이 적용된 것을 확인할 수 있습니다 - !

 

이제 더 눈에 보기 좋게 스타일을 입혀주겠습니다.

회색이 너무 진하기 때문에 더 연한 회색으로 변경하고, 사진과 텍스트들을 중앙으로 배열하고 배경과의 간격도 조절해보겠습니다.

 

이렇게 각 스타일을 전부 입혀주고 나니 웹사이트가 훨씬 보기 좋아진 것을 볼 수 있습니다 !

 

전체 웹사이트는 이렇습니다! 

 

이렇게 웹사이트는 깔끔하게 정리할 수 있었던 것은 div태그 덕분입니다.

div태그는 많이! 사용해보는 것이 잘 활용할 수 있는 방법입니다 - 

 

 

여기까지 div 태그 사용법을 알아보았습니다.