프로젝트 (project.html)

1. 사전계획

• bootstrap grid system을 이용한 프로젝트 박스
• mouseover: 배경색 변경, 아이콘색 변경, 텍스트나타남, 위치이동
• mouseout: 배경색 변경, 아이콘색 변경, 텍스트나타남, 위치이동

2. 개발과정

(전체소스는 github에서 확인해주세요!)

2-1. bootstrap gridsystem 이용하기

responsive.css 파일에서 미디어쿼리를 576px, 992px 기준으로 사용하고 있으니
col-sm과 col-lg 사용

<!-- 프로젝트 박스 -->
<article class="project-box row fade-up">
	<!-- 좌측 이미지 -->
	<section class="project-img col-lg-5 col-sm-12">
		<img class="drag-none" src="images/project_catcha.svg" width="300" alt="catcha">
	</section>
	<!-- 우측 내용 -->
	<section class="col-lg-7 col-sm-12 project-info-box">
		<!-- 텍스트 영역 -->
		<article class="project-txt"></article>
		<!-- 버튼 영역 -->
		<article class="project-btn-wrap">
			<div role="button" class="project-btn" data-bg="49c7f2" onClick="window.open('/cat_cha')">
				<div class="btn-inner-box">
					<img class="btn-icon" src="images/view.svg" width="15" alt="view-btn-icon">
					<h6 class="btn-txt">View</h6>
				</div>
			</div>
      	</article>
	</section>
</article>

2-2. mouseover: 배경색 변경, 아이콘색 변경, 텍스트나타남, 위치이동

• 배경색 변경: 미리 적어놓은 data-bg색상값으로 배경색 변경,
• 아이콘색 변경: svg아이콘의 filter 값을 조정하여 흰색으로 변경
• 텍스트: opacity 조절하여 텍스트 나타남
• btn-inner-box를 left: 0px로 조정하여 버튼중앙에 보이게 함

$('.project-btn').on('mouseover', function (e) {
	var bgColor = this.dataset.bg;
	$(this).find('.btn-icon').css('filter', 'invert(100)');
	$(this).find('.btn-txt').css('opacity', '1');
	$(this).children('.btn-inner-box').css('left', '0px');
	$(this).css('background-color', `#${bgColor}`);
});

2-3. mouseout: 배경색 변경, 아이콘색 변경, 텍스트나타남, 위치이동

• 배경색 변경: 원래 배경색 #eee로 변경
• 아이콘색 변경: svg아이콘의 filter 값을 초기화
• 텍스트: opacity 조절하여 텍스트 없앰
• btn-inner-box를 원래값 left: 30px로 조정

$('.project-btn').on('mouseout', function (e) {
	$(this).find('.btn-icon').css('filter', 'invert(0)');
	$(this).find('.btn-txt').css('opacity', '0');
	$(this).children('.btn-inner-box').css('left', '30px');
	$(this).css('background-color', `#eee`);
});

3. 결과물

4. 개인적 코멘트

아이콘의 색상을 변경하는게 fontawesome을 사용했을때는
텍스트의 색상 변경하듯이 color 로 가능했는데
svg아이콘자체의 색상을 변경해야해서 열심히 구글링을 해봤다!
이번에는 filter의 invert값으로 조정을 해봤는데
이 외에도 여러가지 커스텀이 가능했음!
다음에 기회가 된다면 svg 커스텀 프로젝트를 만들어봐도 재밌을것같다