CSS | 이미지에 캡션 삽입하기: figure, figcaption

 

 

 

사진에 캡션; 사진제목을 추가하는 방법은?

그냥 img태그 뒤에 글자로 남기면 되는것인가? 아니면 <p>로 이미지 태그 뒤에 넣으면 되는 건가?

 

 

 

 

나만의 홈페이지 만들기 클로닝을 하고 있어요. 처음부터 내용과 디자인을 직접 구상한 것은 아니지만, 수업 내용에서 제공하는 것을 토대로 그대로 만들어 보고 있습니다. 이제 <header>, <div>, <nav>등등을 어떤 식으로 사용하는지는 익숙해 지고 있는데, 사진 아래 캡션을 다는 것에서 잠시 멈칫...! 

 

img태그 안에 alt로 표시하는 건 어차피 화면상에 보이지 않으니 소용이 없고,

그 뒤에 <p>태그를 만들어서 사진 제목을 붙이는 것도 뭔가 비효율적인 방법인 것 같습니다. p로 쓴다고 해도 이미지 바로 아래 부분 부터 사진 제목이 위치하게 되는 것도 아니니 모양이 이상해지고... 

캡션 폰트 사이즈 및 사진 크기나 사진 위치도 다시 배열을 할텐데 각각을 다 다른 CSS로 어떻게 해야 할지도 모르겠고, 점점 미궁에 빠지는 나...

 

답은

 

 

 

 

<figure>

<img>요소 앞뒤에 <figure>태그를 달아주는 것입니다.!! 그리고 캡션은 <figcaption>을 이용하는 거에요.

<figure>, <figcaption> 둘 다 오프닝, 클로징 태그를 달아줘야 하구요. 

<figcaption>은 <figure>의 parent tag가 되어야 하므로 상하관계를 잘 구분해 주시는 점만 유의해 주세요!

 

 

 

직접 figure를 적용해 보니 텍스트와 사진 배열도 마음대로 설정할 수 있고 캡션 폰트나 위치의 CSS를 한꺼번에 적용할 수도 있으니 아주 유용하더랍니다! 

 

<figure>... </figure> 

   <figcaption>...</figcaption> 참고해서 한번 활용해 보세요!