내가 좋아하는 쏘니의 팀인
토트넘의 프로필 웹페이지를 만들어봤다.
https://coder-jason.github.io/Tottenham-profile-page/
Welcome to Totthenham Hotspur
coder-jason.github.io
누가 가르쳐주는 사람이 없기에
쉬운 것 부터 익숙해지려고 한다.
저번 내용하고 겹치는 내용들이 있지만
익숙해지기위한 과정이다.
오늘 배울 내용은
1. 그라데이션 배경
2. 아이콘 가져다 쓰기 (인스타그램,페이스북 등등)
3. 마우스 커서를 대면 효과 나타나는 hover 사용.
4. 작은 화면에서도 화면 유지해주는 media 쿼리사용.
1. 그라데이션 배경
linear-gradient(첫번째색,두번째색)
나는 첫번째 색에 파란계열을 넣고, 두번째 색에 흰색계열을 넣었다.
위에서부터 파랑으로 시작해서 흰색계열로 내려가는 걸 볼 수 있다.
이게 가장 기본이고 다양하게 사용할 수 있다.
참고https://developer.mozilla.org/ko/docs/Web/CSS/linear-gradient
2. 아이콘 가져다 쓰기 (인스타그램,페이스북 등등)
지난 영화페이지 만들때 썼던 bootstrap cdn을 이용하여 font awesome icon을 쓸거다.
저번에 설명했지만 간단히 말하면 cdn은 Content Delivery Network의 약자로
다운로드 하지 않고 쓸 수 있게 해준다.
bootstrap cdn 검색후 css링크를 html링크태그주소에 복사해준다.
자세한 설명은 저번에 올렸떤 영화페이지 참고.
google에 font awesome icon 검색후
원하는 아이콘 검색.
맘에 드는거 선택 후 링크 주소 복사해서
쓸곳에 붙여주기만 하면 된다.
3. 마우스 커서를 대면 효과 나타나는 hover 사용.
인스타 그램에 마우스를 올렸더니 아이콘이 살짝 올라가고
검은색 배경에 노란색 아이콘으로 변하는 걸 볼 수 있다.
손흥민 선수에 마우스를 댄 모습이다.
하지만 배경도 같이 튀어나오면서 보기 안좋다.
img가 들어있는 상위클래스에
overflow: hidden; 을 해주었더니 확대는 되면서
사진밖으로 안튀어 나온다.
4. 작은 화면에서도 화면 유지해주는 media 쿼리사용.
css에 이걸 써주면 된다.
@media screen and (max-width: 770px) {}
모바일 화면에서도 자연스러운 화면 나오게 하기
더 다양한 사용법
viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법
앞으로 공개될 Mobile Firefox (Fennec) 1.1 에는 개선된 meta name="viewport" 태그를 지원한다. 이전 버전의 Fennec에서 viewport 속성(property)으로 width, height, 그리고 initial-scale 가 지원되긴 했지만 iphone과 android
developer.mozilla.org
HTML
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Totthenham Hotspur</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="row">
<div class="col">
<img src="assets/1.png">
</div>
<div class="col">
<h3>SON</h3>
<p>Position : FW</p>
<div class="social-link">
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
<div class="col">
<img src="assets/3.png">
</div>
<div class="col">
<h3>Ali</h3>
<p>Position : MF</p>
<div class="social-link">
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
<div class="col">
<img src="assets/2.png">
</div>
<div class="col">
<h3>Kane</h3>
<p>Position : ST</p>
<div class="social-link">
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
<div class="col">
<img src="assets/4.png">
</div>
<div class="col">
<h3>Sanchez</h3>
<p>Position : DF</p>
<div class="social-link">
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
}
body
{
background: linear-gradient(#192875,#d4d6e4);
background-repeat: no-repeat;
background-size: 1920px 1080px;
}
img {
background-color: #e8c168;
}
.line1
{
margin-right: 30%;
}
.row
{
background-color: #e0e8e6;
width: 80%;
margin: 4% auto;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.col
{
flex-basis: 25%;
text-align: center;
overflow: hidden;
}
.col img
{
width: 100%;
cursor: pointer;
transition: 1s;
}
.col img:hover
{
transform: scale(1.1);
}
.col p
{
margin: 20px 0;
}
.social-link .fa
{
width: 35px;
height: 35px;
line-height: 35px;
border: 1px solid black;
margin: 0 7px;
cursor: pointer;
transition: transform .5s;
}
.social-link .fa:hover
{
background: black;
color: yellow;
transform: translateY(-7px);
}
@media screen and (max-width: 770px)
{
.row
{
width: 95%;
}
.col
{
flex-basis: 50%;
font-size: 14px;
}
.social-link .fa
{
width: 35px;
height: 35px;
line-height: 35px;
}
}
'페이지 만들기' 카테고리의 다른 글
| 회원가입 페이지 연습 (0) | 2020.09.01 |
|---|---|
| 카드 뒤집기 연습 (0) | 2020.08.31 |
| 비전공자 - 페이지 만들기 (ft 요리 레시피) (0) | 2020.08.30 |
| 비전공자 - 영화페이지 만들기 (ft 영화 Begin Aagin) (0) | 2020.08.28 |
