오랜만에(?) 스파르타코딩클럽 무료강좌인 '나만의 프로필 링크 페이지 만들기'로 코딩 공부를 해보았다. SQL 개발자 시험에 보기 좋게 불합격한 이후라 더욱 자신감이 하락한 지금, 코딩의 ㅋ자도 모르는 사람들을 더 환영한다는 이 강의.. 과연 어떨지 일단 들어보기로 한다.
이 강의는 총 43분짜리 강의이기 때문에 며칠에 나눠 들을 필요 없이 한방에 다 듣고 숙제 제출까지 끝내볼 예정이다!
주로 연예인, 인플루언서, 온라인 샵 운영자들이 인스타그램이나 페이스북, 틱톡 등에서 나만의 프로필 링크를 한곳에 정리해 놓는 서비스로 '링크트리'를 사용하곤 한다. 이 링크트리같은 서비스는 판매나 홍보 목적 뿐만 아니라 대학교나 모임에서 링크를 모아서 공유하는 용도로 활용할 수 있는데,
이번 스파르타코딩클럽 무료강좌로 유료 서비스를 이용하지 않고 스스로 이 페이지를 만들어 볼 수 있다!!
웹페이지의 동작 방식:
브라우저가 하는 일은 1) 요청을 보내고 2) 받은 걸 그대로 그려주는 것!
👉 받은 것에 들어있는 것이 HTML, CSS, Javascript
👉 HTML은 뼈대, CSS는 꾸미기, Javascript는 움직이기
먼저 네이버를 해킹하면서 동작 원리를 살펴보았다. 페이지 소스를 볼 수 있는 우클릭 '검사'를 통해 네이버 화면의 일부 메뉴를 바꾼 상태로 노출시키는 작업. 배포할 땐 github 서비스를 활용! 코딩할 땐 VS code로!
(다운로드 👉 https://code.visualstudio.com/Download)
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
* 여기서 잠깐! VS code는 전세계적으로 제일 많이 쓰이는 마이크로소프트의 개발환경이다.
오늘은 강의내용 따라하는 순서 그대로를 나중에 혼자서도 따라할 수 있도록 기록해보려고 한다.
1. 바탕화면이나 원하는 위치에 오늘 프로젝트를 위한 폴더를 만든다. (바탕화면에 만들라고 하는데, 난 바탕화면 지저분해지는 게 싫어서 외장 메모리에 만들었다.. 이정도는 똑같이 안 따라해도 문제되지 않겠지;)
2. vs code의 file 메뉴에서 open folder를 눌러 내가 만든 폴더를 선택하고, explorer 밑에 내가 만든 폴더 빈 공간에 대고 new file을 눌러 이름을 index.html이라고 적어준다. ENTER!
3. 스타르타코딩클럽이 준비해준 코드스니펫을 복사해서 내가 만든 index.html에 붙여넣기 하고 ctrl+s로 저장한다.
4. 1번에서 만들어둔 폴더에 생성된 index.html 파일을 눌러서 열어주면, 코드스니펫에 저장된 대로 '테스트'라는 글자가 화면에 뜨게 된다.
5. 코드스니펫에 들어있는 '주요 태그모음'을 복사해서 '테스트'라고 적혀있던 body부분에 붙여넣기 한 후, tab키를 활용해 정렬을 해준다.
6. 꾸밀 때는 원하는 태그에 이름표를 주고 head 안에 style을 활용해서 꾸며준다.
** 예를 들어 h1의 이름을 mytitle이라고 붙인다고 가정했을 때엔 h1 class="mytitle" 이라고 이름을 붙여주고, 그 위에 head 안에 <style> </style> 사이에 .mytitle을 불러 {} 사이에 color:red; 라고 입력하면 h1 (대제목)의 컬러가 빨간색으로 바뀌게 된다.
// 여기서 기존에 복붙했던 태그를 모두 삭제하고, style 태그만 그대로 둔다! //
<본격 만들어보기>
7. 날 대표할 수 있는 이미지를 폴더 안에 준비해 놓는다.
8. 배경색 만들기부터! body 전체를 칠해버리면 되는데, 하나밖에 없는 태그엔 이름표를 달아줄 필요가 없다.
** style 태그 안에:
body {} 입력하고 그 안에 background-color : #44398A; 를 입력해준다. (색상은 원하는 걸로 지정하면 됨)
9. profile 만들기! div태그로 구역을 만들어주고 "profile"이라는 이름표도 붙여준다.
10. style 태그 안에 profile, 즉 div 태그를 꾸며줄 차례. width와 height를 100px씩 주고, 일단 보여야 하므로 배경색을 아무거나 준다. 테두리 border-radius를 100%로 설정해 동그랗게 만들어주면 프로필란이 만들어지는데, 여기에 border를 2px solid white로 주어 테두리를 만들어준다.
11. background-image: url('') 안에 아까 폴더 안에 준비해둔 파일명을 그대로 갖다붙이고, background-position을 center로 맞춰준 후 background-size를 cover라고 입력한다.
12. h1 그리고 p태그를 활용해서 프로필 사진 밑에 들어갈 이름을 적어주면 된다.
** h1과 p에도 main과 sub라는 이름표를 각각 주고, 스타일 태그에서 폰트 색상이나 사이즈를 지정해준다.
13. 여태까지 만들었던 소스들을 묶어서 가운데 정렬! 방법은
** body 안에 div태그를 새로 생성한 후, 이전에 작성했던 div, h1, p태그 소스를 전부 복사해서 그 안에 붙여넣기 한다.
*** 새로 생성한 div에 class="wrap" 이라고 이름을 주고, 스타일 태그로 가서 .wrap {} 안에 배경색을 넣고, 양쪽에서 여백을 밀어준다는 개념으로 가운데 정렬을 해준다.
14. wrap사이즈를 가로 300px 로 맞춰주고 margin을 30px auto 0px auto로 준다. 박스 안에서도 사이즈를 맞춰야 하는데, 여기선 display flex라는 코드스니펫을 복붙해준다.
** 배경색 줬던걸 지우고 새로고침하면 정렬 잘 된 프로필과 소개란이 뜬다.
15. 링크를 만들 차례! 링크는 a태그로 만든다.
** a태그모음 코드스니펫을 p태그 밑에 복붙해 주고
16. 붙여넣기한 링크모음을 박스 형태로 바꿔준다. 먼저 width height를 .wrap 안에 300 50px씩 주고, 배경색을 하얀색으로, 테두리를 동그랗게 radius 8px로. margin bottom 으로 박스 사이사이 띄워주기.
17. 폰트 사이즈와 굵기, 컬러를 바꿔준 후 아까 썼던 display flex 코드스니펫 네 줄을 그대로 다시 불러와 붙여넣기 한다.
** 이 과정에서 박스 왼쪽 위에 붙어있던 애들이 가운데 정렬이 되고, 이다음 text-decoration을 none으로 주어 a태그에 기본으로 붙어있는 텍스트 밑줄을 없애준다. box-shadow도 각각 설정해서 박스 그림자를 만들어준다.
18. 코드스니펫에 있는 글꼴을 불러와서 style태그 시작부분에 붙여넣기!
19. 마우스 커서를 올렸을 때 박스 색깔이 변하게 만드는 작업을 할 차례.
** .wrap < a:hover{} 를 바디 안에 새로 입력하고, 그 안에 background-color: #f2f2f2;를 주면 마우스를 올렸을 때 옅은 회색으로 변하는 걸 확인할 수 있다.
<배포>
20. 이제 마지막 단계! 먼저 아까 복붙했던 body태그 안에 있는 애들을 내껄로 바꾼다. a태그 안에 있는 링크와 이름을 바꿔주면 된다.
21. head 부분에 있는 meta 태그를 바꿔서 카카오톡 등에 공유했을 때 노출되는 문구를 설정해준다.
22. 인터넷에 내 사이트를 올려서 누구나 볼 수 있도록 만드는 방법. 먼저 https://github.com/에 가입한다.
23. github에 내가 만든 index.html파일과 이미지 파일을 업로드하고 활성화시킨다.
아래 링크를 통해 이 '링크트리' 무료로 직접 만드는 강의를 들을 수 있습니닷 :)
https://spartacodingclub.kr/?f_name=%EC%A1%B0%EB%AF%BC%EC%A7%80&f_uid=61c51b707b3272c573ea69a2
스파르타코딩클럽
5주 완성! 코딩을 전혀 모르는 비개발자 대상의 웹개발 강의
spartacodingclub.kr
그 외 코드스니펫 모음!
html 코드스니펫
<!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="르탄이 - 프로필 링크">
<meta property="og:description" content="어서와 코딩은 처음이지?">
<meta property="og:image" content="공유할 이미지">
<script type="text/javascript" src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/sparta.js"></script>
<title>르탄이 - 프로필 링크</title>
</head>
<body>
테스트
</body>
</html>
주요 태그 모음 코드스니펫
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<h1>h1은 제목이에요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6 h 뒷 숫자가 커질수록 글자 크기는 작아져요. </h3>
<a href="https://spartacodingclub.kr/"> 하이퍼링크 </a>
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/logo_teamsparta.png" width="300"/>
<input type="text">
<button>버튼입니다.</button>
display flex 코드스니펫
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
a태그모음 코드스니펫
<a target="_blank" href="https://spartacodingclub.kr/">스파르타코딩클럽</a>
<a target="_blank" href="https://hanghae99.spartacodingclub.kr/">항해99</a>
<a target="_blank" href="https://chang.spartacodingclub.kr/">창업 부트캠프 창</a>
<a target="_blank" href="https://ddingdong.spartacodingclub.kr/">띵동코딩</a>
'니모의 기록 > 하찮은 개발일지' 카테고리의 다른 글
| SQL 초보자(a.k.a 나자신)를 위한 개념 정리 (0) | 2022.05.20 |
|---|---|
| 데이터베이스(DB)와 SQL이 필요한 이유 (ft.스파르타코딩클럽 강의자료) (0) | 2022.04.09 |
| SQL 개발자 과정 - 1일차 기록 (0) | 2022.04.09 |
| 개발은 1도 모르는 비전공자의 SQLD 자격증 도전! (2) | 2022.03.17 |
| SQL 개발일지 (4) - Subquery 사용법부터 실전에서 유용한 SQL 문법까지! (0) | 2022.03.13 |