[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 표출)