기본용어
- HTML 태그 : Element
- 값이 있는 속성 : Attribute
- 값이 없는 속성 : Property
image
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.img-list {
list-style: none;
padding: 0;
width: 640px;
margin: auto;
display: flex;
}
.img-list li {
width: 20%;
flex: 1;
}
.link {
display: block;
margin: 10px;
}
.img-list li img {
width: 100%;
}
.viewer {
width: 620px;
margin: auto;
padding: 0 10px;
}
#target {
width: 100%;
}
</style>
</head>
<body>
<ul class="img-list">
<li><a href="img/img01.jpg" title="테스트 이미지1" class="link"><img src="img/img01.jpg" /></a></li>
<li><a href="img/img02.jpg" title="테스트 이미지2" class="link"><img src="img/img02.jpg" /></a></li>
<li><a href="img/img03.jpg" title="테스트 이미지3" class="link"><img src="img/img03.jpg" /></a></li>
<li><a href="img/img04.jpg" title="테스트 이미지4" class="link"><img src="img/img04.jpg" /></a></li>
<li><a href="img/img05.jpg" title="테스트 이미지5" class="link"><img src="img/img05.jpg" /></a></li>
</ul>
<div class="viewer">
<img src="img/img01.jpg" id="target" />
</div>
<script>
document.querySelectorAll(".link").forEach((v) => {
v.addEventListener("click", (e) => {
// 링크에 대한 클릭 이벤트 발생 후 href 속성이 동작하게 된다.
// 아래 구문은 링크에 대한 클릭 이벤트 동작 후,
// href 속성이 동작하는 것을 방지한다.
e.preventDefault();
// 클릭된 링크가 갖는 속성값 가져오기
// --> 링크가 가르키는 원본 이미지의 주소
const k = v.getAttribute("href");
const t = v.getAttribute("title");
console.log(k);
console.log(t);
document.querySelector("#target").setAttribute("src", k);
document.querySelector("#target").setAttribute("title", t);
});
});
</script>
</body>
</html>-
flex: 1(=flex: 1 1 0)
flex-grow 속성과 flex-shrink 속성, flex-basis 속성을 축약해서 flex 속성으로 표현할 때 flex: 1 속성은 flex: 1 1 0 속성을 의미한다.
즉, flex-grow 속성의 값이 '1'이고 flex-shrink 속성의 값이 '1'이기 때문에 flex container의 크기에 따라 flex item의 크기도 커지거나 작아진다는 의미다. -
e.preventDefault();
a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다.
preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다.- 주로 사용되는 경우
- a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
- form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)
(출처: https://programming119.tistory.com/100 [개발자 아저씨들 힘을모아:티스토리])
- 주로 사용되는 경우
Hi