자기소개웹사이트만들기 #3

오늘 추가할건 호버기능과 링크연결이다

호버는 

 

http://www.css3studio.com/

CSS3Studio

이 사이트에서 

 

 

이렇게 맘에드는걸 복사해서 내 css랑 html을 학습한 제미나이에게 붙어넣고 코드수정을 부탁하고 붙여넣은 후, 나머지를 수정하여 작업했다 ㅎㅎ

근데 생각해보니 이거 이전에 이런건줄 모르고 혼자 끙끙대면서 했던 작업이였음

 

 

바로 요거

스킬에 마우스 올리면 이미지 바뀌는거 ㅠㅠ

 

 

 

---

 

링크걸기

 

링크를 하나하나 노가다로 넣어준다~

 

링크는 어떻게 만들었냐면> 구글드라이브에 영상을 업로드하고 링크를 가진 사람에게만 공개를 해서 만들면 된다

 

 

 

그리고 콘텍트에 요 3개에도 링크를 걸어준다.

<a href="인스타그램주소" class="link-inst" target="_blank">Instagram</a>
    <a href="https://essay7643.tistory.com/" class="link-tist" target="_blank">Tistory</a>
    <a href="유튜브주소" class="link-yout" target="_blank">Youtube</a>

 

 

 

 

 

---

 

 

마우스를 올리면 이렇게 호버돼서 나오고, 누르면 링크로 연결까지! 성공이당

 

 

 

 

 

---

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

 

 

지금까지한거

1. 반응형이라 크기에 맞게 칸수 조절되고 나머지도 이쁘게 배열되기

2. 배너에 글자랑 사진 넣고 반응형 배열하기

3. 로고 누르면 새로고침, 메뉴바 누르면 해당위치로 이동

4. 각 works에 썸네일 만들어넣고 호버랑 링크걸기

5. about me부분에 둥둥 떠다니는 이미지 넣어서 차별성주기

6. skills아이콘 만들고 호버기능넣기

7. favorite 사진3개, 소제목, 내용 넣고 반응형 배열하기

8. contact에 미리 만들어둔 위치에 글자넣고 반응형 배열, 호버, 링크넣기

9. 전체 글씨체, 색감 맞추기

10. 마지막 COPYRIGHT부분 반응형 배열하기 (모바일에서는 세로로나오게)

 

이제 디테일한거 수정하고 DOTHOME으로 도메인 추가하면 됨