스파르타코딩클럽 중 '나만의 프로필 링크 만들기' 리뷰!!
사용하는 것은 MS VS Code와 Github 정도이다.
언어 : HTML
HTML 공부하기
HTML의 기본 구성을 봐야 한다.
HTML은 크게 head 부분과 body 부분으로 나뉘어 있다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>head는 박스 꾸미기, 배경 꾸미기 등 꾸미기의 부분이고
body는 본문 내용 그림, 글 등의 부분이다.
head부분은 특히 링크의 제목, 임베디드 박스 꾸미기 등을 담당한다.
각 글, 그림 등을 꾸미려면 해당 부분을 지칭해주어야 하는데 이는
<div class="main"> </div>처럼 class를 지정하여 지칭할 수 있다.
body 안에는 h1, p, a 등 다양한 시작어들이 있는데 각 각 살펴보면
h1 : 주제목, h2 : 부제목, h3~h6 : 제목들(점점 작아짐)
p : 글
a : 박스 등을 나타내는 것
이다.
이번 수업에서 사용한 코드는
<body>
<div class="wrap">
<div class="profile"> </div>
<h1 class="main">Hanbyeol Lee</h1>
<p class="sub">코딩 좋아합니다.</p>
<a target="_blank" href="https://www.instagram.com/one__star.__/">인스타그램</a>
<a target="_blank" href="https://www.facebook.com/profile.php?id=100005510806343">페이스북</a>
</div>
</body>이다.
head를 살펴보면
페이지 제목, 꾸미기 등을 설정할 수 있다.
먼저, 페이지 제목의 코드는 아래와 같다.
<meta property="og:title" content="Hanbyeol Lee - 프로필 링크">
<meta property="og:description" content="프로필 만들기 코딩 테스트">
<meta property="og:image" content="1624844115.jpg">
<script type="text/javascript" src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/sparta.js"></script>
<title>르탄이 - 프로필 링크</title>여기서 메인 포인트는 <title>이다.
다음 <style>에서는 커스터마이징을 할 수 있다.
body의 클래스 접근은 아래 코드 처럼 할 수 있다.
body {
background-color: #44398A;
}
.profile {
width : 100px;
height : 100px;
border-radius: 100%;
border : 2px solid white;
background-image: url('1624844115.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;
justify-content: center;
align-items: center;
}
.wrap > a{
width: 300px;
height: 50px;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
color: #44398A;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
box-shadow: 3px 3px 5px 0px black;
}
.wrap > a:hover {
background-color: #d2d2d2;
}여기서 display-flex로 가운데 정렬하고 싶으면 이 코드에 주목하면 된다.
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;이번 소스코드는 아래와 같다.
이를 Github에 index.html과 필요한 사진 파일을 main에 업로드 후
설정에서 html 바로 로딩을 설정하면 아래 링크와 같이 나타난다.
https://hyonestar19.github.io/NamePage/
Hanbyeol Lee - 프로필 링크
프로필 만들기 코딩 테스트
hyonestar19.github.io
친구 할인
https://spartacodingclub.kr/?f_name=%EC%9D%B4%ED%95%9C%EB%B3%84&f_uid=62b809ce0babb4553b27d12b
스파르타코딩클럽
5주 완성! 코딩을 전혀 모르는 비개발자 대상의 웹개발 강의
spartacodingclub.kr