728x90
๋ฐ์ํ
HTML
Aํ๊ทธ๋ก ๋ฒํผ ํด๋ฆญ์ ์ ํ ์ฐ๊ฒฐ
โช๏ธ <a href="tel">
/
" ์ฌ์ดํธ์์ ๋ฒํผ์ ํด๋ฆญํ๋ฉด
์ ํ๋ก ๋ฐ๋ก ์ฐ๊ฒฐ์ด ๋๋
์ ํ ๋ฒํผ์ ๋ง๋ค๊ณ ์ถ์ ๋๐"
//
[ ๐ ๊ธฐ๋ณธ ๋ฌธ๋ฒ ]
โช๏ธ aํ๊ทธ href ์ฌ์ฉ
โช๏ธ ํด๋ฆญ์ ์ ํ ์ฐ๊ฒฐํ๊ณ ์ถ์ ๋ฒํธ๋ฅผ href="tel:์ฐ๊ฒฐํ๊ณ ์ถ์ ๋ฒํธ์ฐ๊ธฐ" ์ ๋ ฅํ๊ธฐ
<a class="telLink" href="tel:031-000-0000">์ ํ ์ฐ๊ฒฐ ๋ฒํผ</a>
/
๐คcss๋ฅผ ์ ์ฉํด์ ์์ ์ด๋ฏธ์ง์ฒ๋ผ
๋ฒํผ์ ๊พธ๋ฏผ CSS ์ HTML ์ฝ๋์ ๋๋ค.๐ค
โฌ๏ธโฌ๏ธโฌ๏ธ
/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํ์ผ๋ค์ด๋ก๋๋ฒํผ๋ง๋ค๊ธฐ</title>
<style>
/* hyper link */
a,
a:link,
a:visited{text-decoration:none;}
a:active,
a:hover{text-decoration:none;}
.contactFile {
display: flex;
}
.contactFile .pdfDownload {
display: inline-block;
margin: 0px 10px 0px 0px;
width: 220px;
height: 50px;
background: #94989B;
box-shadow: 0px 12px 23px rgba(0, 0, 0, 0.1);
text-align: center;
color: #fff;
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 50px;
letter-spacing: -0.08em;
}
.contactFile .telLink {
display: inline-block;
width: 220px;
height: 50px;
background: #028CD7;
box-shadow: 0px 12px 23px rgba(0, 0, 0, 0.1);
text-align: center;
color: #fff;
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 50px;
letter-spacing: -0.08em;
}
</style>
</head>
<body>
<div class="contactFile">
<a class="pdfDownload" href="ํ์ผ๊ฒฝ๋ก" download>PDF ๋ค์ด๋ก๋ ></a>
<a class="telLink" href="tel:031-000-0000">๋น ๋ฅธ ์ ํด ๋ฌธ์ ></a>
</div>
</body>
</html>
โ
์ง์ ๋ธ๋ผ์ฐ์
โก๏ธ Chrome ํฌ๋กฌ : 14.0*
โก๏ธ Explorer ์ต์คํ๋ก๋ฌ 18.0
โก๏ธ Firefox ํ์ด์ดํญ์ค : 20.0*
โก๏ธ Safari ์ฌํ๋ฆฌ : 10.1
โก๏ธ Opera ์คํ๋ผ : 15.0
**Chrome 65์ด์ ๋ฐ Firefox๋ ๋์ผ์ถ์ฒ(same-origin)๋ค์ด๋ก๋ ๋งํฌ๋ง ์ง์์ด ๊ฐ๋ฅํฉ๋๋ค.
728x90
๋ฐ์ํ