JS, a태그에서 자바스크립트 수행 순서 / setInterval(동작시간조절) / white-space

JavaScript 수행 순서

 

• a태그에서 onclick 이 있을 경우

onclick를 먼저 수행하고 href로 이동하는 액션을 취한다.

<a href="http://www.naver.com/" onclick="alert('hi');">TEST1</a>

 

• onclick에서 return false가 있을 경우

href로 이동하는 액션을 취하지 않게 된다.

<a href="http://www.naver.com/" onclick="alert('hi'); return false;">TEST2</a>

 

• a태그에서 onclick 이 있을 경우( href = "#" )

onclick를 먼저 수행하고 href로 이동하는 액션을 취하는데

href="#"로 호출 함수를 숨겨버렸기 때문에

페이지가 이동하지 않게 된다.
갈 곳을 잃어버린 브라우저는 페이지의 상단으로 이동해버린다.

<a href="#" onclick="alert('hi');">TEST1</a>

---

동작 시간 설정하기

 

setInterval(() => {
}, milliseconds);

 

milliseconds : 1000초

1000초마다 불러오겠다.

setInterval(() => {
	let today = new Date();
	document.write(today.toLocaleString() + "<br>");
}, 1000);

 

() => {  } 함수를 1000초에 한번씩 호출하겠다.

setInterval(printTime, 1000);

 

단위 - 밀리세컨드 1/1000

 

함수 안에서 매개변수가 없는 함수를 호출할 때는 ( )는 없어야 된다.

함수 안에 있기 때문에 함수의 이름만 써주면 된다.

---

white-space

white-space	연속 띄어쓰기	부모 요소의 너비 벗어날 때 자동 줄바꿈
normal	모두 무시	O
nowrap	모두 무시	X
pre	모두 그대로 유지	X
pre-wrap	모두 그대로 유지	O
pre-line	띄어쓰기, 들여쓰기 무시 / 줄바꿈만 그대로 유지 연속된 띄어쓰기는 한번으로 처리	O

 

white-space: normal;
white-space 를 설정하지 않으면 기본값으로 설정된다.
연속으로 띄어쓰기(\s)를 하더라도 화면에서는 한 칸만 떨어지고, 들여쓰기(\t), 줄바꿈(\n) 모두 무시된다.
부모 요소의 너비를 벗어나면 자동으로 줄바꿈 된다.

white-space: nowrap;
부모 요소의 너비를 벗어나도 자동 줄바꿈이 일어나지 않는다.
연속으로 띄어쓰기(\s)를 하더라도 화면에서는 한 칸만 떨어지고, 들여쓰기(\t), 줄바꿈(\n) 모두 무시된다.

overflow: hidden;
text-overflow: ellipsis; /* 말 줄임 기호(...)  */

white-space: pre;
HTML의 <pre> 요소를 사용하는 것처럼 연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지된다.
부모 요소의 너비를 벗어나도 자동 줄바꿈이 일어나지 않는다.

white-space: pre-wrap;
HTML의 <pre> 요소를 사용하는 것처럼 연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지된다.
부모 요소의 너비를 벗어나면 자동으로 줄바꿈 된다.

white-space: pre-line;
줄바꿈 문자만 있는 그대로 처리해준다.
연속된 띄어쓰기와 들여쓰기는 무시하고, 띄어쓰기는 한 번으로 처리된다.