220711 월

1) 학습한 내용
멘토링을 통하여 질의응답

테스트프로그램
-사파리, 크롬, 익스플로러 등등을 통하여

소스코드로 테스트.

• 컴포넌트기능으로 되어있느냐 ?
• 중복은 많이 없고 단독으로 쓰여져있는가 ?

HTML에서 JavaScript 로드하기

https://opentutorials.org/course/1375/6620
http://www.tcpschool.com/html-tag-attrs/script-src

a href="#" ---> 보통 '#'은 홈으로 간다.

7월 11일 멘토링

1.원페이지 구현을 다했다고 어떻게 말할 수 있을까?
-> 테스트 문서 만들기(문서에다가 테스트 문서 만들어서 체크해야할 사항을 리스트로 모은다. 한명씩 타인(본인)의 페이지를 체크해본다.) 모두 패스가 되면 1차적으로 다한거임.
2. a태그에 #이 들어갈 경우 순서가 바뀔 수 있다.
3. VS 소스 콘트롤이 무엇인가요?
-> 터미널 기능을 GUI로 바꾼 편리한 기능이다.
4. [제안] 코드리뷰(중복여부, 독립적으로 구성되어 있는지)
5. 이미지 로딩이 다른 경우
-> 캐싱된 이미지인가? 아니면 컴퓨터 성능 차이
6. 컴포넌트 기반이 무슨 말인가요?
-> 객체들이 독립적으로 재사용 가능하게 하는 것. 공통된 것은 공통된 것으로, 컴포넌트들은 컴포넌트 중심으로
7. 카카오 지도 api 스크립트를 HTML과 분리하고 싶다.
-> 스크립트 태그 찾아보기 http://www.tcpschool.com/html-tag-attrs/script-src
8. [제안]서로 같은 기능 구현을 해보고 차이점을 이야기 해보기

top버튼 만들기

<div class="topBtn">
        <button class="move" id="topBtn" href="#"><i class="fa-solid fa-angle-up"></i></button>
        <a id="topBtn">TOP</a>
    </div>
	<script>
	$(function() {
   // 보이기 | 숨기기
	$(window).scroll(function() {
      if ($(this).scrollTop() > 250) { //250 넘으면 버튼이 보여짐니다.
            $('#topBtn, a#topBtn').fadeIn();
            } else {
            $('#topBtn, a#topBtn').fadeOut();
    	}
	});
   // 버튼 클릭시
	$("#topBtn").click(function() {   
	$('html, body').animate({
     scrollTop : 0    // 0 까지 animation 이동합니다.
    }, 400);          // 속도 400
    return false;
    });
	});
	</script>

css부분
.topBtn {
position: fixed;
z-index: 99999;
bottom: 7%;
right: 5%;
display: flex;
flex-direction: column;
align-items: center;
}
.topBtn a{
font-weight: 500;
font-size: 16px;
color: var(#a3a3a3);
}
button.move{
border-radius: 50%;
border: 2px solid var(#dddddd);
background: white;
cursor: pointer;
margin-bottom: 5px;}
button.move i{
padding: 5px;
font-size: 32px;}

top버튼구현
1. 위로 자연스럽게 올라가도록 구현.
2. 일정구간에서는 아이콘이 보이지않도록 설정.

2) 학습내용 중 어려웠던 점

3) 해결방법

4) 학습소감
단일 홈페이지를 만드는데 있어서 기본적인 html작업, css작업 자바스크립트를 활용하여 제작을 하고 깃을통하여 프로젝트를 공유를 같이 하여 합쳐보니 프로젝트를 하면서 협력과 개인웹개발능력이 좋아지는것같다고 느꼈다.