37일차 - 제이쿼리 + ajax

밀레·2022년 11월 16일

코딩공부

목록 보기

100/135

1. 에밋

1-1. 제이쿼리 cdn

자바스크립트 외부연동

1-2. 비동기통신을 활용할 에밋 짜기

웹용 에밋과 좀 다름!

내가 짠 에밋.. 공부좀해

이꼴나잖아

정답

ul 굳이 div로 감싸지 않아도 됨.
img는 div로 감싸라.

정답 비주얼

공부하기

두번째 시도) class명 쓰기※※

2. 제이쿼리에 연동할 DB 생성

2-1. 데이터 다 해서 몇 개 필요한가? 12개

2-2. tab.js에 DB 생성

2-2-1) 데이터 타입들 정리하고 시작하기

2-2-2) const DB 배열 영역 생성

2-2-3) 정리한 데이터들 깔끔하게 집어넣기

2-3. 선택자잡기

2-3-1) 대표 이미지 / img src 속성 접근 -> 값 교체

	$('.titleImg img').attr('src', portfolioDB[0].titleImg )
<!-- ".titleImg의 img야, 속성접근.attr해서 값 바꿔넣을게" -->

2-3-2) 썸네일 이미지

일반적인 표현식 : for-in문
제이쿼리 특화식으로 써보자 : each
index = 순번
item = 각 이미지

li에 썸네일 이미지 삽입됨

2-3-3) 수능광고전단지 & 구체적인 설명

2-3-4) 링크

3. 부트스트랩5 스타일처리 (cdn)

하드코딩css 없이, 부트스트랩5로 스타일처리

내가 한 것

CSS

<style>
	ul, li{list-style: none;}
	.active a{color: red !important;}
</style>

HTML

<section id="portfolio" class="container px-0">
	<ul class="P_tabNm d-flex justify-content-center align-items-center px-0 mb-0 p-5">
		<li class="active mx-5"><a href="#" class="text-decoration-none text-dark fs-1">React</a></li>
		<li class="mx-5"><a href="#" class="text-decoration-none text-dark fs-1">Web</a></li>
		<li class="mx-5"><a href="#" class="text-decoration-none text-dark fs-1">Plan</a></li>
	</ul>

	<div class="tabconts d-flex">
		<div class="col-6 px-0 titleImg"><img src="" alt="대표이미지"></div>
		<div class="col-6 px-0">
			<ul class="d-flex thumbImg mb-5 px-0">
				<li class="col-4 me-2"><img src="" alt="" class="img-fluid"></li>
				<li class="col-4 me-2"><img src="" alt="" class="img-fluid"></li>
				<li class="col-4 me-2"><img src="" alt="" class="img-fluid"></li>
			</ul>
			<div class="description">
				<h2>제작노트</h2>
				<p>구체적인 설명</p>
			</div>
			<ul class="d-flex p_linkinfo mb-0 mt-5 px-0">
				<li class="ms-5 me-5"><a href="#" class="text-decoration-none text-dark fs-5">site</a></li>
				<li class="me-5"><a href="#" class="text-decoration-none text-dark fs-5">git</a></li>
				<li class="me-5"><a href="#" class="text-decoration-none text-dark fs-5">figma</a></li>
			</ul>
		</div>
	</div>
</section>

<script>
const portfolioDB = [
    {
        titleImg : './portfolio/big/ad/1.jpg',
        thumbImg : [
            './portfolio/thumb/ad/1.jpg',
            './portfolio/thumb/ad/2.jpg',
            './portfolio/thumb/ad/3.jpg'],
        descriptionH2 : '수능광고전단지',
        description : '이렇게 저렇게 만들었으니 나 고용해~',
        pLinkinfo : [ '사이트주소', '깃주소', '피그마주소' ]
    }
];


$(function(){
    $('.titleImg img').attr('src', portfolioDB[0].titleImg )

    // 제이쿼리 특화식으로 써보자 each
    $('.thumbImg img').each((index, item)=>{
        $(item).attr('src', portfolioDB[0].thumbImg[index])
    })

    // 수능광고전단지
    $('.description h2').html(portfolioDB[0].descriptionH2)
    
    // 구체적인 설명
    $('.description p').html(portfolioDB[0].description)
    
    // 링크 - 제이쿼리 특화식 each
    $('.p_linkinfo a').each((index, item)=>{
        $(item).attr('href', portfolioDB[0].pLinkinfo[index])
    })
    
	// 
    $('.P_tabNm li').click(function(){
        $('.P_tabNm li').removeClass('active');
        $(this).addClass('active');
    })
})
</script>