hyunjin

웹 본문

SISS/웹

웹

_h.j 2019. 3. 3. 20:01
728x90

이 웹사이트는 방학동안 공부한 내용을 복습해보기 위해 중요하다고 생각하는 부분들을 활용해 만들어 본 것을 추가한 사이트이다.

 

 

 

 

https://startbootstrap.com/themes/coming-soon/

 

이 사이트의 템플릿 소스를 이용했다.

여러 가지 템플릿 중 소스를 그나마 이해할 수 있는 것으로 골랐다.

만드는데 필요한 사이트들과 javascript를 head에 넣는다.

프레임 나누기를 활용해 만들었을 것이라고 예상했는데 div를 사용해서 만들었다.

큰 div위에 다른 div를 겹치는 방식으로 만들어졌다.

css  를 div, button, ico 등에 이용했다. 

버튼과 아이콘을 삽입하고 버튼과 아이콘의 이벤트를 넣었다.

 

배경 영상 수정도 포함해서

기존의 CSS를 수정해 배경, 버튼 , 아이콘의 속성을 조금 바꾸었다.

 

움직이는 문장 표현하기 위해 <marquee> 사용

 

 

<버튼>

-클릭하면 누른 횟수가 나오는 버튼

-버튼에 링크 거는 방법

button에 herf를 사용할 때 <a href ="#">를 사용하는 것이 아님! 

버튼 태그안에 onclick = "location.href = '#' "을 넣어줘야 한다.

ex)

<button type="button" onclick="location.href='joinUs.jsp' ">회원가입</button>

<button type="button" onclick="location.href='http://www.naver.com'">NAVER</button>

이런 식으로 사용

 

이미지에 링크를 걸 때도 마찬가지로 onclick속성을 이용하면 됨.

 

 

 

 

 

 

 

<아이콘>

-html의 아이콘 삽입해 링크 걸기

Font Awesome사용해보자

먼저

<head>에 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 추가

http://fontawesome.io/icons/  페이지 에서 아이콘 찾고

fa-search에서 <i로 시작하는 부분 복사하고 사이트에 붙여넣기

그 다음 코드로 아이콘 크기 조정해주고 html 코드 삽입!!

저 사이트가 열리지 않아 시도가 안된다.....

참고 https://iygames.tistory.com/15

 

일단 아이콘 이미지를 넣지 않고 링크를 걸어보자.

 

 

 

 

 

 

 

728x90

'SISS > 웹' 카테고리의 다른 글

웹3-2  (0) 2019.02.17
javascript3  (0) 2019.02.10
javascript2  (0) 2019.02.03
웹 javascript1  (0) 2019.01.27
'SISS/웹' Related Articles more