.png)
위코드 사전학습을 진행하면서
HTML,CSS를 학습하고 학습한 내용을 바탕으로 자기소개 페이지를 만들어보자❗
What I learned
mailto
a href의 속성값으로 해당 이메일 주소로 바로 이메일을 보낼 수 있다.
<a href="mailto:kim@gmail.com"></a>top button
스크롤이 길어지는 페이지에서 탑버튼을 만들기로 했다.
- a href 태그 이용
이동하고자 하는 요소의 아이디로 링크를 걸어 이동할 수 있다.
<div id="head"> head</div>
...
<a href="#head">탑버튼</a>페이지 새로고침이 되지 않으며, 주소 뒤에 #가 붙는다.
- onclick속성 이용
좌표를 입력해 지정된 위치로 이동할 수 있다.
<div class="top-btn" onclick="window.scrollTo(0,0);"></div>세세한 좌표설정을 할 수 있으며 주소창에 #가 붙지 않는다.
페이지 새로고침이 된다.
우클릭 금지, 드래그 금지
페이지 전체에 적용할 경우 body 태그 안에 넣어준다.
<body oncontextmenu='return false'
onselectstart='return false'
ondragstart='return false'>
</body>oncontextmenu='return false' : 오른쪽 마우스 금지
onselectstart='return false' : 블럭 선택 금지
ondragstart='return false' : 드래그 금지
favicon 적용
favicon (Favorites icon)
주소창 옆에 작은 아이콘으로 보이는 이미지를 말한다.
웹사이트의 로고 역할을 한다.
파비콘을 적용하려면 jpg, png 파일 등을 ico 파일로 변환해주어야 한다.
아래 사이트에서 변환이 가능하다.
https://www.favicon-generator.org/
변환한 ico파일을 다운받은 후 index 페이지에 다음과 같은 소스를 삽입한다.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">일부 브라우저는 shortcut icon에서 실행되고 또 다른 브라우저는 "icon"에서 실행된다.
두 줄의 코드로 대부분의 브라우저에서 파비콘 표현이 가능하다.
blog 👉🏻 https://kimnamsun.github.io/