22.10.12.Wed - 많이 부딪히자
오늘의 요약 = 많이 부딪히자
1.
리액트
- 무겁다
바닐라 > jQuery > 리액트 순으로 가볍다. 바닐라가 제일 가벼움
jQuery
잘하려면 HTML,CSS 를 잘해야 한다.
태그를 어떻게 구성할지가 중요.
유연하게 만들어야 한다.
- jQueryLibrary는 jQuery 코드 아래줄에 위치해야한다. 순서가 바뀌면 동작 안된다.
- em 태그
2 ~ 4 jQuery 사용 실습
CSS
- 큰것부터 작은것으로 적용
jQuery
- on을 사용
$('').on('click',function(){});
js 에 만들어진 태그는 검색엔진에서 검색이 안될 가능성이 있다.
리액트의 딜레마. 국내 포털사이트에서는.
검색이 안되는 웹페이지는 있어도 없는 것과 동일하다.
무서운 상황이다.
중요한 내용은 div 태그 안 내용을 담고 hidden으로 숨기면 검색해도 나온다.
싱글페이지 application이 좋은것만 있는 것이 아니다.(의미를 모름).
실습 코드
<!DOCTYPE html>
<html>
<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">
<meta name="keywords" content="이부분은 현재패이지의 가장 중요한 키워드8개 정도 나열" />
<meta name="description" content="이페이지의 정보를 설명할 수 있는 문장 2개정도 여기에 작성" />
<title>title</title>
<link rel="stylesheet" href="../CSS/normalize.css">
<style>
body{
width: 620px;
padding: 0;
margin: 20px auto; /* auto = 좌우로 정렬 */
background: #192839;
}
.thumbs{
width: 100px;
float: left;
}
#largeImg{
width: 512px;/*내용물의 사이즈와 동일하게 주었음*/
height: 292px;
padding: 5px; /* 수치계산하는 법 */
border: 1px solid white;
box-sizing: border-box; /* 모름 */
margin-left: 110px;
/* overflow: hidden; 캡션이 숨겨져 있게 만든다 */
}
.thumbs img{
border: 1px solid white;
padding: 5px;
margin-bottom: 3px;
}
.thumbs img:hover{
border-color: aqua;
}
#caption{
background-color: rgb(0, 0, 0,0.7);
border: 1px solid white;
padding: 10; /* 글자가 짤린다 */
color: white;
position: relative;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="../jQuery/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div class="thumbs">
<a href="../ex01/images/pic1.jpg" title="img1"><img src="../ex01/images/th_pic1.jpg" alt=""></a>
<em>첫번째 이미지 캡션- 술은 다양하게 먹어야 합니다.</em>
<a href="../ex01/images/pic2.jpg" title="img2"><img src="../ex01/images/th_pic2.jpg" alt=""></a>
<em>두번째 이미지 캡션-- 조금 긴내용입니다.....로봇의 시대가 옵니다</em>
<a href="../ex01/images/pic3.jpg" title="img3"><img src="../ex01/images/th_pic3.jpg" alt=""></a>
<em>세번째 이미지 캡션 -- </em>
</div>
<div id="largeImg">
<img src="../ex01/images/pic1.jpg" alt="image1"></img>
</div>
<script>
jQuery(document).ready(function($){
$('.thumbs em').hide(); //숨김
$('.thumbs a').on('click',function(){
//추가한 div id caption태그의 중복 생성을 지워라.
$('#caption').remove(); // 지우고 생성해야 1개가 유지된다.| 안지우면
//가지고 온후에 largeImg박스에 있는 img태그의 src속성값으로 넣어라.
$('#largeImg img').attr('src', $(this).attr('href') ); // id 밑의 img 선택을 안했음. 그걸 보고 정리 완료.
//클릭한 a태그 옆의 em태그의 값을 가져와/ 변수에 담아라.
let message = $(this).next('em').text(); //원하는 문자를 얻어왔다 (캡션에 들어갈 내용)
//새로운 div 태그를 추가
$('#largeImg').append('<div id="caption"></div>');
// 추가한 태그에 담은 값을 넣어라
$('#caption').text(message);
//숨겨진 캡션 박스의 높이를 구한후에 top의 위치를 위로 올린다.
let capSize = $('#caption').height() + 22;
$('#caption').animate({top : '-'+ capSize + 'px'},300);
return false; //다음페이지로 안넘어감.
})
});
</script>
</body>
</html>jQuery의 다양한 method
5 ~ 8 실습
'공부 > 오늘 배운것' 카테고리의 다른 글
| 22.10.14.Fri - 오류는 마법이다. 알고나면 허탈한 것이 (0) | 2022.10.14 |
|---|---|
| 22.10.13.Thu - 태산이 높다 하되 (0) | 2022.10.13 |
| 22.10.11.Tue - Class의 위계(상속),실습,jQuery 맛보기,제일 중요한 것. (0) | 2022.10.11 |
| 22.10.07.Fri - JS 잘하는 법 (0) | 2022.10.07 |
| 22.10.04.Tue - 함수,배열,객체 3형제 압박감이 몰려온다. (1) | 2022.10.04 |