본문 바로가기

개발(Development)/HTML, CSS11

[HTML] a 태그 하이퍼링크 비활성화(disable) 방법 a 앵커 엘리먼트 자체는 disable 옵션을 제공하지 않는듯 하지만, href 속성 조정을 통해 하이퍼링크를 비활성화 시킬 수 있다. a 태그의 하이퍼링크 비활성화 시키는 법 href = "#" 설정 링크는 걸리지만, 이동을 안 함 href 속성 자체를 제거 링크 자체가 안 걸림 동적 비활성화: 자바스크립트로 a 태그를 취득해서, href속성을 제거하면 된다. 링크 토글 document.querySelector(".disableLink").removeAttribute('href'); 추가 팁 비활성화 상태를 표시하기 위해 글자색을 변경하려면, a태그에 클래스를 설정해두고, CSS를 통해 조정해두면 된다. (물론 자바스크립트로 태그.style.color 값을 조정해도 된다.) 링크 비활성화.. 2021. 1. 4.
[CSS] HTML: 이미지 태그 img 여백 뜨는 문제 해결방법 img 엘리먼트에 공백 생기는 현상 및 해결 방법 a 엘리먼트 내에 img 삽입시 여백이 발생하는 현상 img, a태그 자체는 패딩도 마진도 없는데, 이미지가 뜨는 현상이 발생할 때가 있다. 자세히 보면 이미지 아랫부분이 미세하게 떠있다. 해결방법 아래의 두가지 방법중 하나를 적용하면 된다.(상황에 따라 선택 필요) img 태그의 CSS vertical-align 속성을 bottom으로 설정. img 태그의 CSS display속성을 block으로 설정. /* 첫번째 방법 */ img { vertical-align: bottom; } /* 두번째 방법 */ img { display: block; } 해결 완료 후 모습 a태그 내부에 떠있던 이미지가 여백 없이 꽉 찬다. 해결 완료! 2021. 1. 3.