open:이미지-중앙-정렬-및-alt-표출

[javascript] 이미지 중앙 정렬 및 alt 표출

마크다운 이미지 생성시 alt 속성 값을 줄 수 있다.

snippet.bash
![alt 속성 값](이미지 경로)

HTML로 변환하였을 경우 alt 는 이미지가 없는 경우에만 나오므로 평소에는 보이지 않는다.

이미지들을 모두 중앙 정렬 하면서, alt 속성이 밑에 보이도록 하는 코드를 추가한다.

jquery는 추가 되어 있는 상황입니다.

snippet.html
<script>
  $(function(){    
    showAlt();
  });
 
  function showAlt() {   
    $('p>img').not('[id^="ccl"]').each(function(){
	$(this).css("display", "block");
	$(this).css("margin", "auto");
	var alt = $(this).attr('alt');
	if (alt != "" && alt != undefined && alt != '신고'){           
 	  var span = "<span class='caption'>"+alt+"</span>";
	  $(this).after(span);
	}
    });
  }
</script>

img 태그를 찾아서, display:block , margin:auto 속성을 준다. (← 중앙정렬)

Alt 값을 포함하는 span 태그를 생성해서 아래에 추가한다 (← Alt 표출)


  • open/이미지-중앙-정렬-및-alt-표출.txt
  • 마지막으로 수정됨: 2020/06/02 09:25
  • 저자 127.0.0.1