코딩 강의를 듣다보면 짧은 시간 안에 결과물을 내는 수업보다는 기능을 적용해보는 내용이 상당히 많다. 기능만을 접하다보니 지루하기도 하고 나만의 무언가를 얼른 만들고 싶어서 잠시 샛길로 빠져나갔다 ㅎㅎㅎㅎ;; 역시 짧은 시간에 결과를 낼 수 있는 건 쉽고 재밌다. (이런 건 맨날 할 수 있을 것 같다 ㅎㅎㅎ)
프로필 페이지 제작
github을 통해 배포하기까지!!!
-개인 사업장을 운영하는 사람에게 유용할 것 같았다.
<tip>
1. <style>태그에서 전체 배경에 해당하는 색을 넣을 때는 그냥 body{}에 바로!!!('.body{}' 아님!!!)
2. <style> body에서 바로 background-image(배경에 사진 넣기 ㅎㅎㅎ)
3.<a>는 하이퍼링크!!
<!DOCTYPE html>
<html>
<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">
<meta property="og:title" content="anoth - 프로필 링크">
<meta property="og:description" content="anoth님의 즐겨찾는 링크 모음입니다">
<meta property="og:image" content="https://i.postimg.cc/15yTKPwc/20200712-233307.jpg">
<title>anoth - 프로필 링크</title>
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
font-family: "Pretendard",serif;
}
body{
background-color: #443434;
background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free_myprofile/%EB%B6%84%ED%99%8D+%EB%A5%B4%ED%83%84%EC%9D%B4/%EB%B6%84%ED%99%8D%EB%B0%98%EC%A7%9D%EC%9D%B4.png');
}
.profile{
width:100px;
height:100px;
background-color: white;
border-radius: 100%;
border: 2px solid grey;
background-image: url('https://i.postimg.cc/15yTKPwc/20200712-233307.jpg');
background-position: center;
background-size: cover;
}
.main{
color: white;
font-size: 20px;
margin-top: 30px;
margin-bottom: 10px;
}
.sub{
color:white;
font-size: 14px;
margin-top: 0px;
margin-bottom: 30px;
}
.wrap{
width:300px;
margin: 30px auto 0px auto;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.wrap>a{
width:300px;
height:50px;
background-color: grey;
border-radius: 8px;
margin-bottom: 10px;
font-size:14px;
font-weight: bold;
color: white;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
}
.wrap>a:hover{
background-color: white;
color: black;
}
.rtan {
width: 100px;
height: 170px;
background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free_myprofile/%EB%B3%B4%EB%9D%BC+%EB%A5%B4%ED%83%84%EC%9D%B4/%EC%95%89%EC%95%84%EC%9E%88%EB%8A%94%EB%A5%B4%ED%83%84.png');
background-position: center;
background-size: cover;
position: absolute;
bottom: 63px;
margin-right: 400px;
}
.pink {
width: 100%;
height: 95px;
background-color: gray;
bottom : 0;
position: absolute;
}
</style>
</head>
<body>
<div class="wrap">
<div class = "profile"></div>
<h1 class = "main">anoth</h1>
<p class="sub">웹툰, 코딩, 요리, 패션</p>
<a target="_blank" href="https://comic.naver.com/index">네이버웹툰</a>
<a target="_blank" href="https://coding-anoth.tistory.com/">coding-anoth</a>
<a target="_blank" href="https://www.youtube.com/c/paikscuisine">백종원의 요리비책</a>
<a target="_blank" href="https://www.youtube.com/c/%EC%98%A4%EB%8A%98%EC%9D%98%EC%A3%BC%EC%9A%B0%EC%9E%AC">오늘의 주우재</a>
<div class="pink"></div>
<div class="rtan"></div>
</div>
</body>
</html>'코딩' 카테고리의 다른 글
| 코딩교육 3주차(파이썬!!!!!) (0) | 2022.07.05 |
|---|---|
| +) 그라데이션 넣기! (0) | 2022.06.29 |
| 코딩교육 2주차(JQuery Quiz) (0) | 2022.06.26 |
| 코딩교육 2주차(포스팅박스 열기 닫기 감추기 ) (0) | 2022.06.26 |
| 코딩교육 2주차(이름도 생소한... JQuery) (0) | 2022.06.26 |
