이미지<img> title 속성 | 블로그 이미지 위에 제목 글자 바로 보이기

이미지는 블로그 내용의 이해 증진과 화면의 심미성 강화로 가독성을 높이는 중요한 요소입니다. 이미지 타이틀 태그를 활용하면, 간단하고 깔끔하게 이미지 설명을 부연할 수 있어 매우 편리합니다. 구글 블로그의 최대 장점은 자신만의 독특하고 아름다운 블로그를 작성할 수 있는 점입니다.
특히 대세 일로에 있는 스마트폰의 효율적인 화면구성에 탁월한 ‘타이틀 바로 보이기’ 방법을 4단계로 소개합니다.

스크립트 삽입

블로그나 블로그 페이지 html 안에 아래의 스크립트를 삽입합니다.

<script>

  const div = document.getElementsByClassName('caption')

  Object.keys(div).forEach((key) => { 

  let caption = document.createElement('ontitle');

  caption.textContent = div[key]['title'];

  div[key].after(caption);

  })

</script>

1. 스크립트
2. 클래스 이름(caption). 임의로 제정할 수 있으나  장 2번과 같아야 합니다.
3. key
4. 타이틀의 속성 선택자 이름(ontitle). 임의로 제정할 수 있으나 스타일에서 그대로 사용해야 합니다.

타이틀 작성

타이틀이 이미지 위에 보이게 하려면, 아래처럼 반드시 div 안에 이미지 태그가 삽입되는 구조여야 합니다. 그리고 이미지 태그 안에 클래스 선택자 삽입과 함께 타이틀 태그를 작성해야 합니다.

<div id="ttbox">

<img src="" class="caption" title="대관령 목장"/>

</div>

타이틀 위치 조정

아래의 div 속성이 가장 무난한 것으로 판단되나, 다양한 속성의 조합 여하에 따라 타이틀 위치가 변경될 것으로 판단됩니다.

#ttbox{

    display:table; 

    position:relative;

    margin:auto;

  }

스타일 지정

크기, 색상, 글꼴, 배경 등 타이틀의 속성을 자유자재로 변경할 수 있습니다.

ontitle{

    position:absolute;

    color:#000;

    font-size: 17px;

    font-weight: 700;

    font-family: sans-serif;

    left: 0;

    right:0;

    bottom:0;

    top:0;

    padding: 5px;

    opacity:1;

    background-color:rgba(255,255,0,0.55);

    margin: 20px;

    border-radius:100%;

   }

1. 타이틀 속성 클래스 이름(ontitle). 임의로 제정할 수 있으나  장 4번과 같아야 합니다.
2. 타이틀 위치를 결정합니다.
3. 타이틀의 글자 색상을 결정합니다.

의 관련글