내가만든 이력서다😉
첫번째 나만의 이력서
간단하게 만들어 보았다.
꽤나 많은 시간이 걸렸지만 만들고나니 뜻깊다!
기본적인 html 과 css
html 에서 태그를 기본적으로 배웠다 하지만 아직 내가 친해져야할게 너무나도많다
기본적인 태그!
<head>
<meta charset = "UTF-8">
<link rel="stylesheet" href="css파일명.css">
</head>
<title>
<h1> <-- headline1?
</h1>
<body>
<div,section,article>
</div,scetion,article>
</body>
<footer>
</footer>과 같은 태그들!이런것들과
css로 꾸며주기위한
태그를 따로 만들기도
<div class="junghoon">요렇게 css에서 꾸며주기위해 css는
.junghoon{
text-align:center;
color:blue;}요런식으로 쓰게 된다
이렇게 기본적인걸 책으로는 공부를했지만
직접 써보고 익힌건 처음이었다
코드라이언에서 비디팅 코드란 것이 정말 신선했다!
박스에서도 구성하는 걸 배웠다
margin
= 그림에서 보다시피 바깥 과 상자라인 사이
padding
= 텍스트와 상자라인 사이
border
=상자 solid 등등 종류가 다양했다https://developer.mozilla.org/en-US/docs/Web/CSS/border 이 사이트에서 다양한 상자 스타일을 골라서 작성할수있었다.
박스섀도우 정하기
box-shadow: 15px 50px 70px 10px rgba(0,0,0,0.1);앞에서부터 첫번째는 그림자의 위치 좌우 두번째는 그림자 위치 상하
세번째는 그림자의 블러 네번째는 스프레드 =퍼짐정도 이다.
폰트 불러오기
폰트는 구글 폰트에서
use on the web 을 이용해 @import 를 통해
불러와 css에서 사용할수있었다
그리고 잊지 말아야할건
*{
font-family:'';
}를 통해 모든 html의 문서에 적용시켜준다 *을 빼먹지말자
float
이것도 배웠다
설정한 태그안에 텍스트를 둥둥 뜨게하여 위로 올리는것인데
둥둥 뜨게할 내용들만 태그하여 css에서
.float-wrap{
overflow:hidden;
}이라고 작성해 사용한다 왜 overflow인지는 모르겠다고 하셨고 외우자!
반복 또 반복
이렇게 배운것이 빈 공간에서 막상 작성하려고하면
하나도 머리에 떠오르지않는다
어떤 순서로 어디서부터 뭘 적어나가야할지 눈앞이 캄캄하다
계속해서 작성하고 친해지는 연습을 반복해야겠다!
Every day Learning and kaizen