.png)
1. 스타일 시트로 css파일 연결하기
1-1) head에 link 태그를 이용하여 연결
외부에 있는 css파일을 html에 불러오기 위한 태그이다.
<link rel="stylesheet" type="text/css" href="name.css">rel="stylesheet"는 해당파일이 스타일시트(css)라는 뜻,
type="text/css"는 해당파일의 text형식이 css파일이라는 뜻,
href="name.css"는 해당파일의 경로를 의미
rel과 type을 지정하지 않고 href만 지정해도 연결은 됨
1-2) import를 이용하는 방법
style 태그안에 css 파일을 연동시키는 것
css파일 안에도 import를 통하여 다른 css파일을 연동시킬 수 있음
(font css 파일을 가져올 때 많이 사용하는 방법)
@import로 선언을 해주고, url()을 통해 해당 명령어가 주소라는 것을 인식시킨다. 그 후 ()안에 css파일의 경로를 입력해준다.
<head>
<title></title>
<style>
@import url("name.css")
</style>
</head>2. 전화번호 클릭시 전화거는 기능
href에 tel 태그를 이용하여 연결
a 태그 안에 있는 text를 클릭할 경우 모바일웹에서 전화를 연결하는 기능이다.
<a href='tel:전화번호'>링크에 표시할 내용</a>예를 들어 전화번호가 010-1234-1234일 경우 다음과 같이 표시할 수 있습니다.
<a href='tel:010-1234-1234'>010-1234-1234</a>모바일에서 접속할 경우 전화연결팝업이 생성됩니다.
MAC환경에서 해당 기능을 실행한다면 facetime이 연결됩니다.
rel(https://www.everdevel.com/HTML/mobile-atag-tel/)
3. Navigation 상단 고정
1-1) Postion: fixed
스크롤 시 엘리먼트를 고정시킬 수 있는 대표 속성
화면의 절대적인(absolute) 위치로 존재하며, 스크롤을 내려도 처음 위치한 곳에 고정(fixed) 되어 보이게 됩니다.
postion: fixed;1-2) Postion: sticky
Sticky 속성은 최초에 relative 속성처럼 동작하다가 스크롤이 득정 지점에 도달하면 요소를 고정(fixed) 시킬 수 있습니다.
postion: sticky;
top: 0;해당 속성을 사용하기 위해서는 top의 위치값을 써 주셔야 사용 가능합니다.
rel(https://url.kr/FItgTo)
4. 데이터값에 따른 가변그래프 생성
HTML의 data- 속성 사용하기
어느 Element에나 data-로 시작하는 속성을 사용하는 방법입니다.
화면에 안보이게 글이나 추가 정보를 Element에 담아 둘 수 있습니다.
<ul id="graph">
<li data-score="100%"><h3>HTML</h3></li>
<li data-number="50%"><h3>CSS</h3></li>
<li data-int="10%"><h3>Javascript</h3></li>
</ul>JavaScript 에서 접근하기
dataset 객체를 통해 data를 가져오기 위해서 속성 이름의 data- 뒷 부분을 사용합니다.
var graph = document.getElementById('graph');
graph.dataset.score // "100%"
graph.dataset.number // "50"
graph.dataset.int // "10%"CSS 에서 접근하기
attr 함수의 생성된 content를 사용하여 css를 사용한다.
#graph li::before {
content: attr(data-score);
}CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용 할 수 있습니다.
#graph li[data-score="100%"] { width: 100%; }
#graph li[data-score="90%"] { width: 90%; }
#graph li[data-score="70%"] { width: 70%; }