[스파르타 코딩클럽] 나만의 프로필 링크 페이지 만들기

연주·2022년 6월 21일
0

TIL

목록 보기
8/37

🏆 수업목표

  1. HTML, CSS의 기초 지식을 이해한다.
  2. 나만의 링크 모음 사이트를 만들고, 배포할 수 있다.

1. 오늘 배울 것

  • 나의 프로필 페이지 만들기!
  • 웹페이지의 동작 방식

    브라우저가 하는일은 요청을 보내고, 받은 걸 그대로 그려주는 것!
    HTML은 뼈대, CSS는 꾸미기, JavaScript는 움직이기!

2. HTML, CSS 기초

  • HTML 시작하기
<html>

<head>
	<!-- 웹페이지 보이지는 않지만, 필요한 설정을 해두는 곳이에요.

    우리가 집을 위해 미리 생각 해놓은 것을 적어두는 곳이라고 할 수 있죠!-->
</head>

<body> 
	<!-- 우리가 웹페이지에서 볼 수 있는 부분을 세팅하는 곳이죠. 

	  우리가 집에서 눈에 볼 수 있는 집 구조들을 설정하는 곳이죠.-->
</body>

</html>
  • CSS
<style>

.title {
	color: red;
	}
</style>

<body>
<h1 class="title">h1은 제목이에요.</h1>
</body>

// class 값을 title로 주고, title에 CSS 태그를 적용

3. 프로필 만들기

  • div 태그, h1태그, p태그를 이용해서 HTML과 CSS 코드를 만들어서 프로필을 만든다.

4. 링크 만들기

  • 가운데 정렬하기 태그
.wrap {
    width: 350px;
    margin: 30px auto 0px auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
  • 폰트 넣기!
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

* {
    font-family: "Pretendard",serif;
}

5. 배포하기

  • OG태그 수정하기 - 카카오톡 등 공유했을때 제목,내용,이미지 설정
<meta property="og:title" content="르탄이 링크 모음!">
<meta property="og:description" content="어서와 코딩은 처음이지?">
<meta property="og:image" content="르탄이.png">
  • github 이용
    gihub를 이용해서 html파일을 인터넷에 배포할 수 있다.

👏 완성작!

https://yeonju0511.github.io/mypage/


💬 웹개발 종합반이 끝나고 무료 강의로 프로필 링크 만들고 배포하는 과정이 있다고 해서 들었는데,
오랜만에 다시 초심으로 돌아간 것 같고, 복습이 되서 너무 좋았다!

profile
성장중인 개발자🫰

0개의 댓글