GitHub 웹 포트폴리오 -2 : HTML 템플릿 이용, 유튜브 영상 첨부, 이메일 보내기 구현

html5up.net의 spectral 템플릿을 이용하고 필요한 기능을 수정해서 포트폴리오를 만들려고 한다

https://html5up.net/spectral

Spectral by HTML5 UP

---

 

다운로드한 파일을 압축 해제하면 다음과 같은 파일들이 있다

vscode를 켜고 파일들을 넣은 뒤 live server를 켜고 작업을 시작했다

코드들을 보면서 템플릿을 수정했고 내가 원하는 기능은 추가했다

 

 

1. 프로젝트에 유튜브 영상 첨부하기

<!-- index.html -->

<div class="video-wrap">
	<!-- 영상 소스 -->
    <iframe 
        width="100%" 
        height="100%" 
        src="https://www.youtube.com/embed/V6vTG9MVplU" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
    </iframe>
    <!-- 영상 소스 -->
</div>

/* main.css */

/* 영상 반응형 16:9 비율유지*/
.video-wrap {position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-wrap iframe,
.video-wrap object,
.video-wrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}

 

클래스명이 image인 div는 템플릿에서 제공하는 대로 사용했고

아래에 video-wrap부터 작성해서 사용했다

영상 소스는 유튜브에서 얻을 수 있다 ( 공유 -> 퍼가기 )

잘 적용된걸 확인했음

 

2. 이메일 보내기

사이트 이동 없이, 외부 프로그램 실행 없이 이메일을 보낼 수 있도록 여기 를 참고했다

GitHub - dwyl/learn-to-send-email-via-google-script-html-no-server: An Example of using an HTML form (e.g: "Contact Us" on a web

 

한글로 번역해주신 감사한 분이 계신다 

 

 

구글 스프레드시트와 app script에 변경이 조금 생겼는데 위치만 바뀌어서 조금만 보면 이해할 수 있었다

 

2-1. Sample Spreadsheet 복사

 로그인하고 사본 만들기를 눌러준다

 

2-2 확장 프로그램 - Apps Script를 켜준다

 

2-3 내 이메일로 변경해준다

2-4 파일 - 버전 관리

2-5 새로운 버전 저장

2-6 게시 - 웹 앱으로 배포

2-7 Project version을 제일 마지막 버전으로 선택하고 업데이트

2-8 이메일을 보내기 위해 인증해야 함

 

2-9 웹앱 업데이트가 끝나면 나오는 URL을 복사해둔다

2-10 index.html에 코드를 작성한다

 

- index.html의 끝(</body> 직전)에 javascript코드를 추가한다

<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>

- Form태그를 작성한다

( 각각의 Form태그의 name 속성은 Google 시트의 칼럼명과 같아야 함 )

( Form 태그의 class는 gform이어야 함 )

( Form 태그의 action속성을 위에서 복사한 URL로 작성해야 함 )

<section id="cta" class="wrapper style4" >

    <form class="gform form-shell" method="post" action="복사한 주소">
        <div class="text-input-area">
            <div class="field">
                <label for="name" class="form-text">성함</label>
                <input type="text" name="name" id="name" autocomplete="off" />
            </div>
            <div class="field">
                <label for="email" class="form-text">이메일</label>
                <input type="text" name="email" id="email" autocomplete="off" />
            </div>
            <div class="field">
                <label for="message" class="form-text">내용</label>
                <textarea style="resize: none;" name="message" id="message" rows="3" autocomplete="off"></textarea>
            </div>
        </div>

        <ul class="actions stacked ">
            <li><input class="button fit primary" type="submit" value="메일 보내기"  /></li>
            <li class="form-text">coqoa28@gmail.com</li>
            <li class="form-text">010-3907-2354</li>
        </ul>
        <!-- form이 submit되면 나타나는 메시지 -->
        <div style="display:none" class="thankyou_message">
            <h5 >감사합니다 확인 후 연락드리겠습니다.</h5>
        </div>
    </form>
    
</section>

- <section id="cta" class="wrapper style4" > 태그는 템플릿에서 제공해준 코드임

 

이메일 수신 확인

추가되는 기능은 추후에 작성 예정