본문 바로가기
디지털 노마드 정보

나만의 링크 만들기, 스파르타 코딩클럽

by 주부케이 2022. 10. 18.

지금 3강째 듣고 있는 중입니다. 완전 html 특강입니다. 티스토리 html가 갑자기 막 이해되기 시작합니다. 아무것도 없는 빈 페이지에서 글자를 넣고, 프로필을 넣고 있습니다. 한 강의가 7분 남짓인데 한 강의만 들으면 탈진입니다. 너무나 기분이 좋은 탈진이요. 너무 뿌듯합니다. 네이버에서 스파르타 코딩클럽을 치시면 나오는데 거기서 무료강의로 공개돼있습니다. 너무 강추합니다. 아래는 제가 지금 배우는 것 순서를 기억하고자 씁니다. 오늘은 총명하지만 내일은 바보가 될 것이기 때문입니다. 금붕어 기억력을 자랑합니다.

1.코딩 프로그램을 깔고 폴더를 만든다
2.body는 화면 안, head는 그 바깥쪽 전체라고 생각
3. body예시로. class는 임의로 이름을 붙여주는 것. h1은 제목. 티스토리를 공부할때 배웠던 것처럼 문서 하나당 h1은 하나씩 있는게 좋다. 구글봇이 제목으로 인식. h1이 두개 있는것도 안좋다고 한다. 티스토리 처음 할때 배운 내용과 동일. 복습 굿. 아래의 세 줄이 기본이라고 할 수 있다.
<div class="profile"></div>
<h1 class="main">kimmy kim</h1>
<p class="sub">코딩 공부중입니다</p>
4. body에 있는 것에 대해서 전체적인 모양을 꾸며주는게 head에서 이뤄진다. "profile"이걸 꾸며주고 싶으면 head안에다 점을 찍고 쓰면 된다.
(1) 일단 전체 배경색
<style>
body{background-color:#(해당색 찾아서 넣기);}
(이때 .body라고 안써도 된다. 이건 위의 "profile", "main", "sub" 처럼 이름표가 붙어있을때 수식할때 씀)

(2) 그다음 그 안의 글자들 꾸미기
.profile{width: 100px;
height:100px;
background-color: green;
border-radius: 100%;
border: 2px solid white;
background-image: url('주부케이.jpg');
background-position: center;
background-size: cover;}
.main{color: white;
font-size: 20px;}
.sub{color: white;
font-size: 14px;}


하다가 적는걸로는 포기. 일단 완서하는데 집중했습니다. 지금 제대로 되는건지 몇가지 문의중입니다. 다만 페이지는 완성됐네요^^
https://kimmykim1986.github.io/mypage/

댓글


crossorigin="anonymous">