https://github.com/seojeounghoon/css_v1_MyHomePage

 

seojeounghoon/css_v1_MyHomePage

css project Hompage Design . Contribute to seojeounghoon/css_v1_MyHomePage development by creating an account on GitHub.

github.com

안녕하세요 왕초보 코딩 탈출입니다. 이것저것 많이하긴했지만 시간이 없다는 핑계로 블로그에 올리지 못했네요 ㅠ 

퍼블리셔는  아니지만  웹이 앱이건 디자인이 많이 발목을 잡아서 CSS를 공부하면서 올려볼까합니다.  

 

오늘은 간단하게 폰트설정하고 개발을 위해 기본 설정 하고 전체 배경 이미지를 넣겠습니다.

 

우선 폴더 구조는

index.html

css/style.css

img/

 

index.html 파일을 만들고 

css 와 img 폴더를 생성하고 

css 에는 style.css 파일을 생성합니다.

img폴더에는 차후에 이미지를 깃에 같이 포함해서 올릴테니 다운받으시면 됩니다. 

 

우선 기본 html 내용을 작성하고 

<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

다음과 같이 구글 폰트를 가져옵니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Font -->
 
    <!-- CSS -->
    <link rel="stylesheet" href="./css/style.css">
    
 
    <title>왕초보코딩탈출</title>
</head>
<body>
    <header class="header">
        hello World!!!!
    </header>
</body>
</html>
 
 

 

다음으로 

모든 페이지의 margin, padding 을 0으로 주고  box-sizing: border-box 로 기본 설정하겠습니다.

 

그리고 body에 폰트의 기본 설정들과 컬러 라인높이등을 미리 설정해 둡니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color:#777;
}
 

이제 index.html 에 작성해둔 header 에 전체 이미지 넣기

 

1
2
3
4
5
6
.header {
    height: 100vh;
    background-image: url("../img/main.jpg");
    background-size: cover;
    background-position: top;
}
 
 

결과 화면

내가 사용해본 애디터 툴은 AtomBrackets  이렇게 두가지 이다.

설치방법은 간단하니 설치하여 두가지 다 사용해보는 것을 추천드립니다.

Atom의 경우 유명한 GIthub , Brackets의 경우 Adobe 둘다 막강하죠 

사실 뭘 쓰나 먼져 접한 툴을 사용할 가능성이 크죠 ㅎㅎ 둘다 너무너무 사용하기 좋기 때문입니다.


설치방법은 

Atom

https://atom.io/



 

아톰 화면


Brackets

 http://brackets.io/




 두가지 다 설치나 사용은 어렵지 않습니다.

다만 개인적인 소견으로는 입문에게는 브라켓은 한글을 지원하기 때문에 

초보차에게 더 편할것 같아요  익숙해지면 아톰도 사용해 보시길 권장해드립니다.


'웹 프론트엔드 > HTML' 카테고리의 다른 글

1. HTML 웹 디자인 학습 사이트 모음  (2) 2018.02.15
1강 HTML5  (0) 2018.02.04

+ Recent posts