■ html div 태그를 사용하는 가장 큰 목적은 여러 개의 콘텐츠를 묶어서 시각적인 효과를 주기 위해서라고 해도 과언이 아닌데요. 즉 어지럽게 흐트러질 수 있는 요소들을 하나로 묶어주는 역할을 하고 그것들의 위치 및 각종 효과를 주기 위해서 사용하는 경우가 많습니다. 이번 글에서는 div 태그 안에 요소(그림, 텍스트)를 넣어서 몇 가지 효과를 주는 과정을 정리해보도록 하겠습니다.
■ 예제를 하나 만들어봤는데요. 단순하게 본문에 그림 하나와 텍스트를 입력해봤습니다.
■ 이렇게 출력이 되겠죠? 이제 이 두 요소를 묶어서 몇 가지 효과를 만들어 보겠습니다.
■ 이미지와 텍스트를 div 태그로 묶었구요. CSS에서 몇 가지 효과를 줘봤습니다. div의 가로 폭을 400px로 고정했구요. 테두리(border)속성을 이용해서 선을 그렸습니다. 텍스트의 색은 빨간색, 배경은 노란색으로 지정했는데요. 여기서는 단순하게 그림 하나 텍스트 한 줄이지만, 여러 가지 요소를 묶어서 한 번에 시각적 효과를 줄 때 이용하면 편합니다.
■ 이렇게 효과가 적용된 걸 확인할 수 있구요. 몇 가지 효과를 더 적용해볼게요.
■ 먼저 그림과 텍스트를 박스의 중앙에 위치하도록 'text-align' 속성값에 "center" 를 입력했구요. 테두리와 요소의 거리를 위해서 'padding' 값을 입력했습니다. 'border-radius' 속성은 테두리 모서리의 둥글기를 조절해주는 속성이구요. 'box-shadow' 속성을이용해서 박스 전체의 그림자를 만들어봤습니다.
■ 단순하게 생각나는 속성 몇 가지만 설정해봤는데요. 묶어주고 싶은 요소를 모두 div 태그로 묶어서 위치를 조절할 수도 있고, 각종 효과를 만들어서 좀 더 보기 좋게 만들 수 있습니다. 여러분은 좀 더 다양한 요소들을 묶어서 직접 해보셔요. 수고하셨습니다.
