자기소개 페이지를 만들며 사용한 것들

html, css, 약간의 javascript 연습을 위해 자기소개 페이지를 만들었다. poiemaweb을 반정도 클론했다.

1. head

Typed

https://mattboldt.com/demos/typed-js//
글자 타이핑 하는 효과

$(function(){
    $(".typedmyname").typed({
        strings: ["반갑습니다","좋은 아침😬"],
        typeSpeed: 50,
        loop: true
    });
});

typedSpeed,backSpeed : 타이핑,지우는 속도. 숫자가 클수록 속도가 느려진다. 0부터 설정 가능하다
startDelay,backDelay : 타이핑 전 기다리는 시간 설정
cursorChar: 커서로 사용할 기호 설정. '_'이나 '|'이 가장 일반적인 형태일 것이다.
loop : 반복 여부

2. body

galleria

galleria는 갤러리를 생성해주는 jquery plugin이다

http://web.simmons.edu/~grovesd/comm244/notes/week13/galleria/galleria
파일을 다운로드/설치하고

<script src='../week4/libs/galleria/galleria.min.js'></script>

$(document).ready(function () {
    for (var i = 1; i < 10; i++) {
        var img = '<img src="../week4/images/' + i + '.jpg" width="600px" height="400px">'
        $('.galleryshop').append(img);
    }
    Galleria.loadTheme('../week4/libs/galleria/themes/classic/galleria.classic.min.js');
    Galleria.run('.galleryshop');
});

$( document ).ready()안에 넣어야 실행이 된다.
이미지 파일을 div안에 넣어야한다.

3. footer

fontawesome

하단에 이런 아이콘을 통해 나의 github나 연락처로 바로가기 버튼을 만들고 싶었다. 이 경우 아이콘은 fontawesome에서 찾을 수 있다. 무료회원도 사용할 수 있는 아이콘이 많다.
CDN, 다운로드 방식을 통해 이용할 수 있는데, CDN방식을 사용하려면 kits에 들어가 코드를 알 수 있다. 폰트어썸 아이콘의 장점은 CSS로 아이콘의 외관을 변경할 수 있다는 점이다. 아이콘을 움직이게끔 하는것도 가능하다.

.icon i{
    display: inline-block;
    color: white;   
    font-size: 20px;
    margin-right: 10px; 
}

<a target="_blank" href="https://github.com/"><i class="fab fa-github"></i></a>

i태그 밖에 a태그로 링크를 걸어 사용했다.