자주 쓰는 HTML 정리 / HTML 문법
자주 쓰는 HTML
HTML 정규표현식
https://0songha0.github.io/web-dev/2022-08-01-1
CSS, Javascript 파일 추가
<head>
<script src="Javascript파일경로/파일명.js"></script>
<link rel="stylesheet" href="CSS파일경로/파일명.css">
</had>
라이브러리 파일은 https://도메인/파일경로/파일명으로도 추가할 수도 있지만,
사이트에서 파일 제공 서비스를 중단하면 에러날 수 있으니 내려받아서 프로젝트 내부 절대경로로 추가하는 것이 좋습니다.
라디오 버튼 구현
<input type="radio" id="useYn_Y" name="useYn">
<label for="useYn_Y">사용</label>
<input type="radio" id="useYn_N" name="useYn" checked>
<label for="u_useYn_N">미사용</label>
더블클릭 이벤트 발생 시 함수 호출
<요소 ondblclick="함수명();">
프로젝트 favicon 이미지 설정
<head>
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon명.png" />
</head>
인라인 요소 추가
<div>
기존 요소
<span>이어 붙일 요소</span>
</div>
링크 새 창으로 띄우기
<a href="http://URL주소" target="_blank">링크</a>
target=”_blank” 속성을 넣어주면 링크를 새 탭으로 열 수 있습니다.
Input 최대 글자수 지정
<input type="text" maxlength="100">
maxlength 속성으로 input에 입력할 수 있는 글자수를 제한할 수 있습니다.
한글도 1자당 1문자로 계산되므로, 최대 한글 글자수는 100자 입니다.
textarea
textarea 사용 예시
<textarea name="NAME" id="ID" maxlength="100" placeholder="설명"></textarea>
javascript로 textarea 값 부여
document.getElementById("ID").value = '${VO명.변수명}';
DB에서 값 조회 후 result VO 변수에 담아 가져올 수 있습니다.
textarea 값 줄바꿈 이슈 해결
public void set변수명(String bokDetail) {
this.변수명 = 변수명.replace("\r\n", "\\n").replace("\n", "\\n");
}
VO setter에서 \r\n(윈도우 줄바꿈), \n(Unix/Linux/Mac 줄바꿈)을 \n로 치환해야 프론트에 에러 없이 노출됩니다.
HTML 공백 넣는법
<p class="txt">${VO명.변수명1} ${VO명.변수명2}</p>
\ 는 HTML에서 공백을 명시합니다.
HTML 이미지 삽입
<img src="${VO명.파일경로변수}" alt="대체텍스트">
파일경로 앞에 서버 도메인을 입력하면, 서버 루트 디렉토리에서부터 절대경로로 이미지를 찾습니다.
서버 도메인 없이 /파일경로.파일명.확장자만 입력하면,
서버 루트에 매핑된 프로젝트 src/main/webapp 폴더에서부터 절대경로로 이미지를 찾습니다.
이미지가 없으면 에러는 나지 않고, alt 속성에 지정된 텍스트가 표출됩니다.
Leave a comment