위코드 사전스터디 1주차 과제로 자기소개 페이지를 제작했다.
맨땅에 헤딩으로 제작하려니 세상에 이렇게 막막할수가..💦
우선은 나의 페이지 컨셉, reset css, google fonts 사용법을 알아보자
페이지 컨셉 잡기부터 시간을 반나절을 보냈다...😥
우선 웹페이지를 구상하여 이미지를 그려보았다.
제일 먼저 생각한건 simple is best! 라 생각하기 때문에 페이지를 딱 볼 때 보기쉬운 디자인으로 만들려고 시간을 많이 보낸 듯 하다 ㅎㅎ;
reset CSS 는 우리가 html로 코드를 작성하고 브라우저 실행시키면 기본으로 적용되는 stlye을 봤을 것이다.
이는 웹 브라우저 마다 default 값으로 스타일이 적용되어 있기 때문이다.
나는 기본 default 값으로 하기보다는 default 값을 초기화하여 새롭게 웹브라우저를 만들것이기에 reset.CSS를 적용시켰다.
html 파일에 link로 추가해도 되지만(이미 나는 많은 링크를 넣어놔서 복잡하기에), 나는 @import 방식으로 추가했다.
@import "reget.css";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,
nav,section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input:focus {
outline: none;
}
a {
color: inherit;
text-decoration: none;
}
기본적으로 Visual Studio Code 에 있는 폰트도 있지만 구글폰트를 이용해서 더 다양한 스타일을 위해 추가해보았다.
<head>
안에다가 링크주소를 넣으면 되고,html
css
생활코딩에서 github로 웹호스팅하는 법을 알기쉽게 설명해주신다.
2017년도 제작이긴 하지만 그래도 너무 좋은 영상이기에 꼭 한번 보시길 추천합니다.
!! 아 바뀐점이 있다면
master branch ☞ main branch 로 이름이 바뀌었다니 참고하세요~
(댓글에서 발견했습니다 ㅎㅎ)