728x90
๋ฐ์ํ
HTML
Aํ๊ทธ๋ก ๋ค์ด๋ก๋ ๋ฒํผ ๋ง๋ค๊ธฐ
โช๏ธ <a> Tag
/
" ์ฌ์ดํธ์์ ๋ฒํผ์ ํด๋ฆญํ๋ฉด
์ด๋ฏธ์ง ๋๋ ์๋ฃ๋ฅผ
๋ค์ด๋ฐ๋ ๊ธฐ๋ฅ์ ๋ง๋ค๊ณ ์ถ์๋๐"
/
[ ๐ ๊ธฐ๋ณธ ๋ฌธ๋ฒ ]
โช๏ธ aํ๊ทธ download ์์ฑ ์ฌ์ฉ
โช๏ธ ํด๋ฆญ์ ๋ค์ด๋ก๋ ํ๊ณ ์ถ์ ํ์ผ ์์น๊ฐ ์๋ ๊ฒฝ๋ก๋ฅผ href="ํ์ผ๊ฒฝ๋ก ์ ๋ ฅ ์์น" ์ ๋ ฅํ๊ธฐ
/<a class="pdfDownload" href="ํ์ผ๊ฒฝ๋ก" download> PDF ๋ค์ด๋ก๋ ๋ฐ๊ธฐ</a>โ
๐ ๋ค์ด๋ก๋ ํ์ผ ์ด๋ฆ ์ค์ ํ๊ณ ์ถ์ ๋
โช๏ธ download="์ ์ฅ๋ ํ์ผ์ ์ด๋ฆ"
<a class="pdfDownload" href="ํ์ผ๊ฒฝ๋ก" download="๋ค์ด๋ก๋ํ๋ ํ์ผ๋ช "> PDF ๋ค์ด๋ก๋ ๋ฐ๊ธฐ</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
๋ฐ์ํ