초보자라도 이것을 읽으면 OK! 쉽게 SNS 버튼을 만들 수있는 방법! 【Bootstrap/HTML/CSS】
SNS 버튼을 표시하고 싶습니다.
프로그래밍을 배우기 시작하고 곧 2개월.
웹 앱을 만드는 것이 늘어났습니다.
거기서, 잘 생각하는 것이 「SNS 버튼을 깨끗이 표시시키고 싶다・・・」
▲ 코유 녀석을 페이지 하단에 깨끗하게 표시시키는 것이 초보자에게는 큰 한 걸음이다! ! !
그래서 자신에게 비망록도 겸하고 만드는 방법을 정리해 둡니다.
만드는 방법
"Bootstrap"이라는 CSS 프레임워크 사용
어디까지나 간단하게 만드는 것이 목적이므로, 「Bootstrap」을 사용합니다!
초보자에게 설명하면 html에 한 문장 조금 추가하는 것만으로 CSS가 편해지는 마법의 도구입니다!
그럼 다음 페이지에 SNS 버튼을 추가해 봅시다!
html
먼저 html 부분에 다음을 삽입합니다.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
이런 느낌이 듭니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>プロフィール</title>
<link href="style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
무려, 이것만으로 「Bootstrap」을 사용할 수 있게 되었습니다! 간단!
그런 다음 버튼을 삽입하려는 html에 다음 코드를 삽입합니다.
<ul class="profile-social-links">
<li>
<a target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
HTML은 이상!
css
이어 CSS!
다음을 Copipe로 돈
/*ボタン全体が入ってるブロック*/
.profile-social-links {
width: 218px;
display: inline-block;
float: right;
margin: 0px;
padding: 15px 20px;
background: #FFFFFF;
margin-top: 50px;
text-align: center;
opacity: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: moveIn 1s 3.1s ease forwards;
animation: moveIn 1s 3.1s ease forwards;
}
/*ボタンを横一列で表示する*/
.profile-social-links li {
list-style: none;
margin: -5px 0px 0px 0px;
padding: 0px;
float: left;
width: 25%; /*今回4つなので25%です*/
text-align: center;
}
/*ボタンの設定*/
.profile-social-links li a {
display: inline-block;
color: green; /*ボタンの色はここで変えてね！*/
width: 24px;
height: 24px;
padding: 6px;
position: relative;
overflow: hidden!important;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.profile-social-links li a i {
position: relative;
z-index: 1;
}
이상입니다! 간단하네요!
할 수있는 것
좋은 느낌으로 생겼어~~~~~ 기쁘다~~~~
덧붙여서, 버튼의 라인업은 이쪽! Youtube라도 있으면 좋겠지만~
<i class="fa fa-XXXX"></i>
여기의 XXXX 부분을 google나 yahoo로 바꾸는 것만으로, 버튼은 바뀝니다♪
나 같은 초보자 씨의 도움이되면 기쁩니다!
Reference
이 문제에 관하여(초보자라도 이것을 읽으면 OK! 쉽게 SNS 버튼을 만들 수있는 방법! 【Bootstrap/HTML/CSS】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/twtjudy1128/items/08bf601cf219fcef57dc
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
"Bootstrap"이라는 CSS 프레임워크 사용
어디까지나 간단하게 만드는 것이 목적이므로, 「Bootstrap」을 사용합니다!
초보자에게 설명하면 html에 한 문장 조금 추가하는 것만으로 CSS가 편해지는 마법의 도구입니다!
그럼 다음 페이지에 SNS 버튼을 추가해 봅시다!
html
먼저 html 부분에 다음을 삽입합니다.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
이런 느낌이 듭니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>プロフィール</title>
<link href="style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
무려, 이것만으로 「Bootstrap」을 사용할 수 있게 되었습니다! 간단!
그런 다음 버튼을 삽입하려는 html에 다음 코드를 삽입합니다.
<ul class="profile-social-links">
<li>
<a target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
HTML은 이상!
css
이어 CSS!
다음을 Copipe로 돈
/*ボタン全体が入ってるブロック*/
.profile-social-links {
width: 218px;
display: inline-block;
float: right;
margin: 0px;
padding: 15px 20px;
background: #FFFFFF;
margin-top: 50px;
text-align: center;
opacity: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: moveIn 1s 3.1s ease forwards;
animation: moveIn 1s 3.1s ease forwards;
}
/*ボタンを横一列で表示する*/
.profile-social-links li {
list-style: none;
margin: -5px 0px 0px 0px;
padding: 0px;
float: left;
width: 25%; /*今回4つなので25%です*/
text-align: center;
}
/*ボタンの設定*/
.profile-social-links li a {
display: inline-block;
color: green; /*ボタンの色はここで変えてね！*/
width: 24px;
height: 24px;
padding: 6px;
position: relative;
overflow: hidden!important;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.profile-social-links li a i {
position: relative;
z-index: 1;
}
이상입니다! 간단하네요!
할 수있는 것
좋은 느낌으로 생겼어~~~~~ 기쁘다~~~~
덧붙여서, 버튼의 라인업은 이쪽! Youtube라도 있으면 좋겠지만~
<i class="fa fa-XXXX"></i>
여기의 XXXX 부분을 google나 yahoo로 바꾸는 것만으로, 버튼은 바뀝니다♪
나 같은 초보자 씨의 도움이되면 기쁩니다!
Reference
이 문제에 관하여(초보자라도 이것을 읽으면 OK! 쉽게 SNS 버튼을 만들 수있는 방법! 【Bootstrap/HTML/CSS】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/twtjudy1128/items/08bf601cf219fcef57dc
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<i class="fa fa-XXXX"></i>
Reference
이 문제에 관하여(초보자라도 이것을 읽으면 OK! 쉽게 SNS 버튼을 만들 수있는 방법! 【Bootstrap/HTML/CSS】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/twtjudy1128/items/08bf601cf219fcef57dc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
