로고는 

position : absolute 로

좌측 상단에서 40 픽셀 

 

화면가운데 배치하는 방법은 로고와 방식은 동일하다 비율로 50%로씩 각각 적용하고

화면을 확인해보면 우측으로 쏠린것을 볼 수 있는데 이는

transform: translate(-50%,-50%); 

로 해결 이 가능하다 

 

애니메이션은 

@keyframes를 사용해서 함수호출하듯 사용하면 된다. 

 

 

 

@keyframes moveInLeft {

0% {

opacity: 0;

transform: translateX(-100px);

}

80% {

transform: translateX(20px);

}

100% {

opacity: 1;

transform: translateY(0);

}

}

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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">
        <div class="logo-box">
            <img src="./img/logo-white.png" alt="logo"  class="logo">
        </div>
        <div class="text-box">
            <h1 class="heading-primary">
                <span class="heading-primary-main">왕초보코딩탈출</span>
                <span class="heading-primary-sub">Hello World!!</span>
            </h1>
        </div>
    </header>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
* {
    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;
}
 
.header {
    height: 100vh;
    background-image: linear-gradient(
        to right bottom,
        rgba(232, 232, 232, 0.1),
        rgba(191, 191, 191, 0.1)),
    url("../img/main.jpg");
 
    background-size: cover;
    background-position: top;
    position: relative;
}
/* 로고 */
.logo-box {
    position: absolute;
    top:40px;
    left: 40px;
}
 
.logo {
    width: 120px;
    height: 70px;
}
 
 
.text-box {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
 
.heading-primary {
    color: #fff;
    backface-visibility: hidden;
}
 
.heading-primary-main {
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
 
    animation-name: moveInLeft;
    animation-duration: 5s;
    
}
 
.heading-primary-sub {
    display: block;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 15px;
    text-transform: uppercase;
 
    animation-name: moveInRight;
    animation-duration: 5s;
}
 
@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    80% {
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
 
@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    80% {
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

저작자표시 비영리

'웹 프론트엔드 > CSS-나의 홈페이지 만들기' 카테고리의 다른 글

3. 배경 이미지에 그라데이션 넣기  (0) 2020.04.01
2. CSS 폰트 설정 , 기본설정, 전체 배경 이미지 넣기  (0) 2020.04.01
1. 프로젝트 개요  (0) 2020.03.31

이미지에 그라데이션 추가하기

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

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

 

배경이미지에 그라데이션을 주기위해서는  다음과 같이 

 

linear-gradient() 함수를 사용해야합니다.

 

그라데이션에 대하여 아래 링크에서 더 많은 정보를 확인하세요

https://developer.mozilla.org/ko/docs/Web/CSS/linear-gradient

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
* {
    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;
}
 
.header {
    height: 100vh;
    background-image: linear-gradient(
        to right bottom,
       rgba(232, 232, 232, 0.3),
       rgba(191, 191, 191, 0.3)),
    url("../img/main.jpg");
 
    background-size: cover;
    background-position: top;
}
 
 
 
  

다음과 같이 linear-gradient() 를 사용하여 전체 배경 이미지에 그라데이션 효과를 주었습니다.

역시나 미적 감각은 없어서 ... 만들고 나니 이쁘진 않네요 ㅎㅎ

배경이미지를 좀더 이쁜걸로 바꿔봐야겠어요 

 

 

 

번외로 이미지 모양을 조정하려면

https://bennettfeely.com/clippy/

 

Clippy — CSS clip-path maker

About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape

bennettfeely.com

소스확인

https://github.com/seojeounghoon/css_v1_MyHomePage

저작자표시 비영리

'웹 프론트엔드 > CSS-나의 홈페이지 만들기' 카테고리의 다른 글

3. 우측 상단 로고 넣기 화면 중앙에 텍스트 넣고 간단한 애니메이션 효과  (0) 2020.04.02
2. CSS 폰트 설정 , 기본설정, 전체 배경 이미지 넣기  (0) 2020.04.01
1. 프로젝트 개요  (0) 2020.03.31

 

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;
}
 
  

결과 화면

저작자표시 비영리

'웹 프론트엔드 > CSS-나의 홈페이지 만들기' 카테고리의 다른 글

3. 우측 상단 로고 넣기 화면 중앙에 텍스트 넣고 간단한 애니메이션 효과  (0) 2020.04.02
3. 배경 이미지에 그라데이션 넣기  (0) 2020.04.01
1. 프로젝트 개요  (0) 2020.03.31

프로젝트 마무리 시 수정 예정

저작자표시 비영리

'웹 프론트엔드 > CSS-나의 홈페이지 만들기' 카테고리의 다른 글

3. 우측 상단 로고 넣기 화면 중앙에 텍스트 넣고 간단한 애니메이션 효과  (0) 2020.04.02
3. 배경 이미지에 그라데이션 넣기  (0) 2020.04.01
2. CSS 폰트 설정 , 기본설정, 전체 배경 이미지 넣기  (0) 2020.04.01

1. 배열 Array

배열에는 String , Number, undefined ,null, boolean 다 들어갈 수 있다.

    var empty = [];
    var language = ["JAVA", "C#", "PYTHON"];
    var number = [1,2,3,4,5,6];
    var etc = [7,"string", undefined, null, false];

    console.log(empty);
    console.log(language);
    console.log(number);
    console.log(etc);

    console.log(language[0]);
    console.log(language[2]);

2. Object 

배열과 비슷하다. Object의 특징은 Key - Value

    // object
    var objempty = {};
    var myObj = {
        key1: "value1",
        key2: "value2",
        key3: "value3"
    };

    console.log(objempty);
    console.log(myObj);
    console.log(myObj.key1);

 

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Arrays and Objects</h1>
</body>
</html>
<script>
    var empty = [];
    var language = ["JAVA", "C#", "PYTHON"];
    var number = [1,2,3,4,5,6];
    var etc = [7,"string", undefined, null, false];

    console.log(empty);
    console.log(language);
    console.log(number);
    console.log(etc);

    console.log(language[0]);
    console.log(language[2]);

    // object
    var objempty = {};
    var myObj = {
        key1: "value1",
        key2: "value2",
        key3: "value3"
    };

    console.log(objempty);
    console.log(myObj);
    console.log(myObj.key1);
   
</script>

결과

저작자표시 비영리

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

4. JavaScript Variables 변수 타입  (1) 2019.05.27
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

 

1. 문자 타입 

문자 타입은 " " 따옴표로 묶어줍니다.

 var stringType = "문자타입 입니다.";
 console.log(stringType);
 var myString = "문자 더하기"+ "문자";
 console.log(myString);

 

2. 숫자타입

 

Integer >   32-bit number ( -2,147,483,648 ~ 2,147,483,647)

Long >  64-bit number (-9,223,372,036,854,775,808  ~ 9,223,372,036,854,775,807)

Float >   3.4E+/-38(7개의 자릿수)

Double >  1.7E+/-308(15개의 자릿수)

var numberType = 5;
console.log(numberType * numberType);

var integerType = 10;
var longType1 = 9223372036854775808;
var longType2 = 9223372036854775807;
var floatType = 3.5;
var doubleType = 9310141419482.22;

 

3. 기타 

var booleanType = true;
var notAnumberType = NaN;
var undefinedType;
var nullType = null;

 

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>
        JavaScript Variables
    </h1>
</body>
</html>
<script>
//문자타입
    var stringType = "문자타입 입니다.";
    console.log(stringType);
    var myString = "문자 더하기"+ "문자";
    console.log(myString);
//숫자타입
    var numberType = 5;
    console.log(numberType * numberType);

    var integerType = 10;
    var longType1 = 9223372036854775808;
    var longType2 = 9223372036854775807;
    var floatType = 3.5;
    var doubleType = 9310141419482.22;
    var booleanType = true;
    var notAnumberType = NaN;
    var undefinedType;
    var nullType = null;


    console.log(integerType);
    console.log(longType1);
    console.log(longType2);
    console.log(floatType);
    console.log(doubleType);
    console.log(booleanType);
    console.log(notAnumberType);
    console.log(definedType);
    console.log(nullType);

    


</script>

 

결과

 

저작자표시 비영리

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

5. JavaScript Arrays , Objects  (0) 2019.05.28
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

1. alert() 사용하기

 

window.alert("alert 메시지~!!!");
alert("window. 을 빼고 함수를 호출해도 동일합니다.");

2. prompt() 사용하기

 

prompt("text", [default])

여기서 text는 메시지

[default]는 inputtype 이 text 이다.

var age = prompt("당신의 나이는 ??");
console.log("나의 나이는 :"+ age + "입니다.");

 

3.  confirm() 사용하기

보통 data를 삭제 또는 수정할 때 사용한다. 

 

var message = "정말로 삭제하시겠습니까??";
    result = window.confirm(message);
    console.log(result);
    if(result){
        console.log("삭제 되였습니다.");
    }else{
        console.log("취소 되었습니다.");
    }

경고 창에 예를 눌렀을 경우 true를 리턴한다.

 

아니오를 눌렀을 경우 false 를 리턴한다.

 

전체 소스

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>alert 사용하기</title>
</head>
<body>
    <pre>
        1. alert() 사용하기
        2. prompt() 사용하기
        3. .confirm() 사용하기
    </pre>
</body>
</html>
<script>
    //1. alert() 사용하기
    window.alert("alert 메시지~!!!");
    alert("window. 을 빼고 함수를 호출해도 동일합니다.");

    //2. prompt() 사용하기
    var age = prompt("당신의 나이는 ??");
    console.log("나의 나이는 :"+ age + "입니다.");

    var message = "정말로 삭제하시겠습니까??";
    result = window.confirm(message);
    console.log(result);
    if(result){
        console.log("삭제 되였습니다.");
    }else{
        console.log("취소 되었습니다.");
    }
</script>
저작자표시 비영리

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

5. JavaScript Arrays , Objects  (0) 2019.05.28
4. JavaScript Variables 변수 타입  (1) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

 

1. html tag에 text 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaSciprt DOM API를 사용해보기</title>
</head>
<body>
<p id="dom"></p>    
</body>
</html>
<Script>
    document.getElementById('dom').textContent = " DOM는 Document Object Model 의 약자입니다.";
</Script>

 

2. Body 속성 안에 h1 tag를 추가하여 보자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaSciprt DOM API를 사용해보기</title>
</head>
<body>
<p id="dom"></p>    
</body>
</html>
<Script>
    document.getElementById('dom').textContent = " DOM는 Document Object Model 의 약자입니다.";
    
    var element = document.createElement('h1');
    element.textContent = 'h1 element를 추가합니다. 어디에? body 안에';
    document.body.appendChild(element);
    
</Script>

저작자표시 비영리

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

5. JavaScript Arrays , Objects  (0) 2019.05.28
4. JavaScript Variables 변수 타입  (1) 2019.05.27
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
1. Javascript console.log  (0) 2019.05.25

 

크롬의 개발자 도구를 활용하여 JavaScript console.log() 사용법을 배워보겠습니다.

 

1. 기본

console.log("Hello World");

 

2. 변수를 활용하여 로그를 확인하기

//Logging variables

var hello = "안녕하세요";
console.log(hello);
var name = '왕초보';
var age = '15';
console.log("이름:", name, "나이:", age);

3. Placeholders 사용하기

//Placeholders

var greet = "안녕하세요~", who = "여러분~~" ;
console.log("%s, %s", greet, who);

4. Object 로깅

//Logging Objects

console.log({
    'Email':'aaaa@email.com',
    'Groups':{},
    'IsBoolean' :false,
    'IsNum':1
});

 

5. HTML elements 로깅

console.log(document.body);

저작자표시 비영리

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

5. JavaScript Arrays , Objects  (0) 2019.05.28
4. JavaScript Variables 변수 타입  (1) 2019.05.27
3. Javascript alert() , prompt(), comfirm() 사용하기  (0) 2019.05.27
2. JavaSciprt DOM API를 사용해보기  (0) 2019.05.27
1
2
3
4
1. create-react-app <projectName>
2. cd projectName
3. yarn start
 
cs


프로젝트를 생성하자 


App.js


(당일로 조회하면 데이터가 없다 그래서 하루 전 데이터를 조회하기위해 getData -1)을 했다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React, { Component } from "react";
import "./App.css";
import Movie from "./Movie";
 
const key = "발급받은 키";
 
const getDate = new Date();
const yDate = getDate.getTime(1 * 24 * 60 * 60 * 1000);
getDate.setTime(yDate);
var yYear = getDate.getFullYear();
var yMonth = getDate.getMonth() + 1;
var yDay = getDate.getDate() - 1;
 
if (yMonth < 10) {
  yMonth = "0" + yMonth;
}
if (yDay < 10) {
  yDay = "0" + yDay;
}
const resultDate = yYear + "-" + yMonth + "-" + yDay;
 
const res = resultDate.slice(0, 10).replace(/-/g, "");
 
class App extends Component {
  state = {};
 
  componentDidMount() {
    this._getMovies();
  }
 
  _renderMovies = () => {
    const movies = this.state.movies.map((dailyBoxOfficeList, index) => {
      return (
        <Movie
          rank={dailyBoxOfficeList.rank}
          movieNm={dailyBoxOfficeList.movieNm}
          key={index}
        />
      );
    });
    return movies;
  };
 
  _getMovies = async () => {
    const movies = await this._callApi();
    this.setState({
      movies
    });
  };
 
  _callApi = () => {
    return fetch(
      `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${key}&targetDt=${res}&itemPerPage=10`
    )
      .then(a => a.json())
      .then(json => json.boxOfficeResult.dailyBoxOfficeList)
      .catch(err => console.log(err));
  };
 
  render() {
    const { movies } = this.state;
    return (
      <div className={movies ? "App" : "App-loading"}>
        {movies ? this._renderMovies() : "로딩중 ..."}
      </div>
    );
  }
}
 
export default App;
 
cs



Movie.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from "react";
import PropTypes from "prop-types";
import "./Movie.css";
 
function Movie({ rank, movieNm }) {
  return (
    <div className="Movie">
      <h1>
        {rank}위:{movieNm}
      </h1>
    </div>
  );
}
 
Movie.propTypes = {
  rank: PropTypes.string.isRequired,
  movieNm: PropTypes.string.isRequired
};
 
export default Movie;
 
cs



  {movies ? this._renderMovies() : "로딩중 ..."}


데이터가 있으면 보여주고 그렇지 않으면 로딩중이라고 처리를 한다.




순위랑 영화이름만 가져왔는데 추가로 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
                "rnum": "1",
                "rank": "1",
                "rankInten": "0",
                "rankOldAndNew": "OLD",
                "movieCd": "20180290",
                "movieNm": "아쿠아맨",
                "openDt": "2018-12-19",
                "salesAmt": "3482471050",
                "salesShare": "33.8",
                "salesInten": "1154445750",
                "salesChange": "49.6",
                "salesAcc": "33936773431",
                "audiCnt": "384114",
                "audiInten": "96420",
                "audiChange": "33.5",
                "audiAcc": "3875972",
                "scrnCnt": "1158",
                "showCnt": "4594"
cs


더 많은 데이터를 제공하니 수정해서 연습해봐야겠다.~


그리고 극한직업? 재밌나보다 보러가야겠다~ 


저작자표시 비영리

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

1. react API를 활용하여 영화 순위 보여주기  (0) 2019.02.06
13. React/리액트 array.map 이해하기  (0) 2018.11.04
12. React/리액트 (props) 복습하기  (0) 2018.11.03
11. React/ 리액트 (컴포넌트 복습)  (0) 2018.11.03
10. React / 리액트 (props 와 state)  (0) 2018.10.27

+ Recent posts

티스토리툴바