728x90
반응형

Front/HTML 46

[html] href속성 # / javascript:void(0) 차이

항목 #javascript:void(0)의미현재 페이지 최상단 이동JS 코드 실행 후 아무것도 하지 않음기본 동작페이지 최상단으로 스크롤 이동없음preventDefault 필요 여부필요 (evt.preventDefault())불필요SEO 친화도비교적 나쁨 (빈 링크)더 나쁨 (JS 직접 사용은 권장 안 됨)안정성/직관성중간 (제대로 막지 않으면 문제)더 안전하게 이벤트만 실행 가능 ✅ 왜 href="javascript:void(0)"은 SEO에 안 좋을까?링크로써 의미 있는 목적지가 없기 때문입니다.검색 로봇이 "이건 클릭해도 갈 곳이 없는 링크네"라고 판단합니다.내부 링크 구조를 파악하지 못하면 페이지 랭크 전달, 색인 등록 등 SEO 점수가 낮아집니다.즉, a 태그는 실제로 이동할 콘텐츠가 있을 때만..

Front/HTML 2025.07.06

[HTML] 알파벳(특히 띄어쓰기 없는 긴 문자열)이 자동 줄바꿈되지 않는 이유

✅ 문제 원인영문은 띄어쓰기(space) 기준으로 줄바꿈을 시도함.한글은 조합형 글자라서 단어 길이에 상관없이 자동 줄바꿈이 잘 됨.하지만 알파벳이 띄어쓰기 없이 계속 이어질 경우, 브라우저는 줄바꿈을 하지 않음 → 요소가 넘치거나 overflow 발생.✅ 해결 방법: CSS 적용word-break, overflow-wrap, white-space 속성 등을 조합하여 줄바꿈을 유도할 수 있습니다.div[name="tdlTtl"] { word-break: break-all; /* 단어 중간이라도 줄바꿈 허용 */ overflow-wrap: break-word; /* 긴 단어가 박스를 넘기지 않게 줄바꿈 */ white-space: normal; /* 텍스트 줄바꿈 허용 */ } 또는..

Front/HTML 2025.05.21

[HTML] autocomplete="off"를 사용하는 이유

민감한 정보 : 민감한 데이터(예: 비밀번호, 신용카드 번호, 개인 정보)를 처리하는 필드의 경우 보안을 강화하기 위해 브라우저가 값을 저장하고 자동으로 채우는 것을 방지할 수 있습니다. input type="password" autocomplete="off"> 동적 양식에서 자동 채우기 방지 : 동적 또는 반복 양식(단일 페이지 애플리케이션 또는 동적으로 추가된 필드가 있는 양식)으로 작업하는 경우 브라우저가 의도치 않은 곳에 잘못된 데이터를 자동 채우기하면 문제가 될 수 있습니다. 설정 autocomplete="off"하면 브라우저가 이전 양식 항목의 값을 자동 제안하지 않도록 할 수 있습니다.양식 동작 사용자 정의 : 사용자 정의 자동 완성 시스템이나 양식 필드 검증과 같은 일부 UX 시나리오의 경..

Front/HTML 2024.10.15

[HTML] rel="noopener noreferrer"

rel="noopener noreferrer"는 보안과 성능 측면에서 새 창을 열 때 사용하는 target="_blank" 속성의 단점을 보완하기 위한 속성입니다. 이 속성들은 주로 두 가지 역할을 합니다:1. noopener목적: 새 창이 부모 창에 접근할 수 없도록 만듭니다.설명: target="_blank"를 사용하면 새 창(또는 새 탭)이 열리는데, 이때 새로 열린 창이 window.opener 객체를 통해 부모 창에 접근할 수 있습니다. 악의적인 페이지가 이 기능을 악용하여 부모 창의 내용을 조작하거나 스크립트를 실행할 수 있습니다. rel="noopener"는 이런 상호작용을 방지하여 새 창이 부모 창에 접근할 수 없도록 막아줍니다.새 창에서 열기이렇게 설정하면 새 창은 참조 페이지에 대한 정..

Front/HTML 2024.09.12

[HTML] 영역바깥으로 텍스트가 나가는 현상 수정

https://dev-jwblog.tistory.com/82 [HTML, CSS] div 안에 텍스트가 범위 밖으로 나가는 현상 해결(자동 줄바끔 처리)간혹 HTML, JSP 화면을 개발하다가 div 태그 안에 width를 직접 정해주면, 텍스트가 자동으로 줄바꿈이 되지 못하고, div 영역 밖으로 텍스트가 벗어나는 경우가 발생한다. 1. 해결 해결 방법은 간단하dev-jwblog.tistory.com  해당  영역 안에 word-break: break-all 을 추가해주면 된다. => style

Front/HTML 2024.07.09
728x90
반응형