HTML 이미지 가운데 정렬과 크기 조정

$(document).on('click', id, function)

• id에 jquery로 이벤트를 걸 수 있다. 하지만 위와 같이 걸면 페이지를 새로고침 하거나 한번 실행을 할 때마다 click 이벤트가 계속 등록이 되기 때문에 나중에 click 이벤트가 여러 번 실행되는 현상이 발생한다. 이러한 점을 방지하기 위해서 stopImmediatePropagation() 메소드를 실행시켜줘야 한다.

---

헤더 이미지 변경하고 가운데 정렬&크기 조정 하는데 잘 안돼서 개 쌩쇼 조금 했다.

 

잘 안 됐던 점

 

1. 이미지가 헤더에서 먹힘

2. 이미지가 가운데 정렬이 안 됨

 

아래는 수정 전 코드이다.

<div style="margin: 0 auto;">
        <!-- <span class = "header-Title-M"><?php echo $r_code;?></span> -->
            <img src="../image/header/logo.svg">
        </div>

아래는 수정 후 코드이다.

<img src="../image/header/growers_logo.svg" style="display: block; margin: 0 auto; width:180px;" >

 

<img> 태그 안에 이미지 경로를 넣고, style="display: block; margin: 0 auto;" 를 이용해서 가운데 정렬을 할 수 있다. 그리고 width를 이용해서 이미지 크기 조정을 했다.