왕초보코딩탈출

세법-부가가치세

왕초보코딩탈출 — Mon, 30 Jan 2023 10:53:05 +0900

부가가치세 (1월 말)

- 부가가치세란 ?

부가가치세란 상품(재화)의 거래나 서비스(용역)의 제공 과정에서 얻어지는

부가가치(이윤)에 대하여 과세하는 세금이며, 부가가치세 과세대상 사업자는 상품을 판매하거나

서비스를 제공할 때 거래금액에 일정금액의 부가가치세를 징수하여 납부해야 한다.

부가가치세 = 매출세액 - 매입세엑

*부가가치세는 물건값에 포함되어 있기 때문에 실제로를 최종소비자가 부담하는 것입니다.

이렇게 최종소비자가 부담한 부가가치세를 사업자가 세무서에 납부하는 것입니다.

* 그러므로, 부가가치세 과세대상 사업자는 상품을 판매하거나 서비르를 제공할 때

거래금액에 일정금액의 부가가치세를 징수하여 납부해야 합니다.

Mac postgresql 설치 dbeaver 사용

왕초보코딩탈출 — Mon, 9 Aug 2021 09:30:27 +0900

Mac postgresql 설치 dbeaver 사용

postgresql 설치 dbeaver 설치

brew install postgresql

brew install --cask dbeaver-community

Terminal

psql postgres

유저 생성

postgres 라는 유저를 생성하고 비밀번호를 1234로 설정한다.

create user postgres password '1234';

testdb 라는 데이터베이스를 생성하고 encoding utf-8 로 만든다

create database testdb encoding 'utf-8';

testdb owner(주인)를 postgres 설정

alter database testdb owner to postgres;

testdb database에 대한 권한을 postgres

grant all on database testdb to postgres with grant option;

테스트2

왕초보코딩탈출 — Sun, 5 Jul 2020 16:51:38 +0900

Document

rejuva minerals

Multi Purpose Powder - Blush & Eye

Category: powder

$0.00

컬러

c# 문자열 의 깊이

왕초보코딩탈출 — Fri, 26 Jun 2020 17:36:32 +0900

문자열은 참조유형이다 이를 증명하기 위해 테스트를 해보자

타임아웃을 사용하여 문자열과 숫자타입 같은문자열, 문자열 연결, StringBuilder 의 예제이다

아래 결과를 확인해보면 완료되는 시간을 확인 할 수 있는데

참조유형과 값유형의 시간이 많이 차이가 난다.

그리고 같은 문자열을 입력한경우 같은 메모리를 공유하는것을 알 수 있다.

다른문자열을 입력 할 경우 기존에 메모리에 올려놨던 내용은 garbage collection으로 이동하게된다.

stringbuilder를 사용하면 문자열을 조합할때마다 새로운 변수를 생성하지 않고 결합할 수 있다.

내부에 함수가 존재해서 값들을 조합하거나 삭제할때에도 새로운 인스턴스가 생성되지 않는다.

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

using System;
using System.Diagnostics;
using System.Text;
 
namespace ConsoleApp1
{
    class Program
    {
        static void Main(string[] args)
        {
            //string type
            StringsImmutable();
            Console.WriteLine();
            Console.WriteLine();
            //integer Type
            IntegerType();
            Console.WriteLine();
            Console.WriteLine();
            SameString();
            Console.WriteLine();
            Console.WriteLine();
            StringConcat();
            Console.WriteLine();
            Console.WriteLine();
            StringBuilder();
 
            Console.ReadKey();
        }
 
 
        public static void StringsImmutable()
        {
            Console.WriteLine("StringsImmutable");
            string str = "";
            Console.WriteLine("Loop Start");
 
            var stopwatch = new Stopwatch();
 
            stopwatch.Start();
 
            for (int i = 0; i < 3000000; i++)
            {
                //유니크한 아이디 생성
                str = Guid.NewGuid().ToString();
 
            }
            stopwatch.Stop();
 
            Console.WriteLine("Loop End");
            Console.WriteLine($"Loop Excution Time In MS {stopwatch.ElapsedMilliseconds}");
          
        }
 
        public static void IntegerType()
        {
            Console.WriteLine("IntegerType");
            int ctr = 0;
            Console.WriteLine("Loop Start");
 
            var stopwatch = new Stopwatch();
 
            stopwatch.Start();
 
            for (int i = 0; i < 3000000; i++)
            {
                ctr = ctr + 1;
 
 
            }
            stopwatch.Stop();
 
            Console.WriteLine("Loop End");
            Console.WriteLine($"Loop Excution Time In MS {stopwatch.ElapsedMilliseconds}");
 
        }
 
        public static void SameString()
        {
            Console.WriteLine("SameString");
            string str = "";
            Console.WriteLine("Loop Start");
 
            var stopwatch = new Stopwatch();
 
            stopwatch.Start();
 
            for (int i = 0; i < 3000000; i++)
            {
                str = "같은문자";
 
 
            }
            stopwatch.Stop();
            //메모리에 이미 있는지 확인 후 있다면 같다면 동일한 메모리 
            Console.WriteLine("Loop End");
            Console.WriteLine($"Loop Excution Time In MS {stopwatch.ElapsedMilliseconds}");
        }
 
        public static void StringConcat()
        {
            Console.WriteLine("StringConcat");
            string ctr = "";
            Console.WriteLine("Loop Start");
 
            var stopwatch = new Stopwatch();
 
            stopwatch.Start();
 
            for (int i = 0; i < 30000; i++)
            {
                ctr = "같은문자" + ctr ;
 
 
            }
            stopwatch.Stop();
            // 메모리생성 > 새로운 메모리 생성 > 첫번째 메모리는 garbage collection으로 이동
            Console.WriteLine("Loop End");
            Console.WriteLine($"Loop Excution Time In MS {stopwatch.ElapsedMilliseconds}");
        }
 
        public static void StringBuilder()
        {
            StringBuilder stringBuilder = new StringBuilder();
            Console.WriteLine("stringBuilder");
            Console.WriteLine("Loop Start");
 
            var stopwatch = new Stopwatch();
 
            stopwatch.Start();
 
            for (int i = 0; i < 30000; i++)
            {
                stringBuilder.Append("stringBuilder");
 
            }
 
            stopwatch.Stop();
            // 메모리생성 > 새로운 메모리 생성 > 첫번째 메모리는 garbage collection으로 이동
            Console.WriteLine("Loop End");
            Console.WriteLine($"Loop Excution Time In MS {stopwatch.ElapsedMilliseconds}");
 
        }
 
 
    }
}
 
Colored by Color Scripter

cs

웹 기획 프로세스

왕초보코딩탈출 — Mon, 1 Jun 2020 20:32:56 +0900

프로세스

클라이언트가 새로은 웹 또는 앱을 구축하려하거나 웹사이트 리뉴얼을 고려하는경우로 부터 시작합니다.

회사 규모와 상관없이 회사 전반적인 내용을 이해하고 개발 관련 지식을 함께 갖춘 사람은 거진 없다고 봅니다.

그렇기에 프로젝트 진행과정에서 쉽게 방향을 바꾸거나 원치않는 결과가 나오는 경우가 빈번하게 발생합니다.

그렇기 때문에 개발에 들어가기에 앞서 최대한 많은 정보를 수집하고 정리하는것이 중요합니다.

정보를 수집하고 정리하는 과정은 아래와 같이 정리해보았습니다. ^^

개발자를 살...

웹을 개발하는 과정은 절대 단순하지 않습니다.

클라이언트 입장이라면 아마 전체 일정을 보고 뭐가 이렇게 오래 걸립니까? 하고 놀라실수도 있겠네요

보급형?을 제외하고 말입니다.

개발기간이 오래걸리는 이유는 다음과 같습니다.

다음과 같은 내용에 준수한다면 비용과 시간을 줄일 수 있습니다.

1.단계 초안

개발사에서는 클라이언트를 처음 마주했을 때, 무엇을 만들고 싶습니까? 라는 처음 질문을 할 것입니다.

클라이언트는 충분하게 고려했겠지만 막상 전달하려고하면 뒤죽박죽인경우가 있을 것입니다.

뒤죽박죽 설명은 최종 결과에 그대로 반영되게 되어있기때문에 .. 가장 중요한 단계라고 봐도 무방합니다.

그렇기 때문에 클라이언트는 명확하면서도 최대한 상세하게 정보를 제공할 의무가 있습니다.

클라이언트는 최소 어떤 비지니스를 할것이고 , 주 타깃은 누구이며, 최종 목표는 어디까지 입니다.

신발을 판매할것이며 주 타깃은 20-30대 젊은층이며 , 모델 동영상을 활용하여 고객 유입 시 노출 하여 상품의 정보를 빠르게 전달 하겠다?

더 디테일하면 할 수록 좋습니다.

이제 개발자인 저는 머리를 굴리겠죠?

쇼핑몰의 기본 프로세스가 들어가고 , 젊은 층이니 디자인은 좀더 화려하게 해야할것이고, 일반 쇼핑몰과 다르게 동영상을 많이 활용하겠군?

대략정인 일정과 , 예산에 대해서 정리가 가능합니다.

후에 설계와 개발 작업에 뼈대가 되는 과정이므로 정말 중요한 단계입니다.

초안단계에서 내용이 부실하다면 만족스럽지 못한 결과로 이어질 수 있고, 지연과 예산이 추가로 발 생할 수있으니

최대한 많은 자료를 준비하셔서 정해진 일정에 만족스런 결과를 낼 수 있게 하시기 바랍니다 ^^

추가로 * 말로 설명하지마시고 절대적으로 문서 문서화 하시길 적극!!!!!!추천드립니다.

정말 급한상황? 이라면 녹음이라도 하고 꼭 다시 듣고 부족한부분은 확인하고 또 확인하고 요청하고 요청하시길!!!!!

2.단계 : 계획

1단계가 마무리되면 해당 페이지의 구성을 정리합니다.

페이지의 계층 구조를 작성하며 전반적은 레이아웃을 구성합니다.

해더 , 사이드 메뉴 , 메인 콘텐츠 -> 한 화면에 상품은 몇개씩 노출 할것인가 등 전반적인 레이아웃을 구성하고

클라이언트에게 정확하게 전달합니다.

클라이언트는 제안 받은 자료를 신중하게 검토하고 의사를 확실하게 전달할 의무가 여기에 있습니다.

잘못된 예는 다음과 같습니다.

- 알아서 잘 만들어주시겠죠 믿겠습니다.

- 예산이 부족해서 뭐 이정도만 만들어야 할 것 같네요

잘 반영된 예는 다음과 같습니다.

- 결제를 진행하기전에 장바구니 같이 한번에 상품을 넣어두었다가 한번에 결제가 가능게 있었으면 좋겠네요

추가로 결제 하기전에 다른 고객이 해당 상품과 함께 구매한 목록을 보여주고 클릭하면 해당 상품으로 이동해서 추가 구매하는 것이 있었으면 좋겠습니다.

등?

2단계인 계획 단계에서는 변경이 비교적 자유기때문에 첨삭을 통해 후에 들어갈 비용과 시간을 줄입니다.

3 단계 : 디자인

이제 본격적으로 개발을 시작하는 단계로 개발자는 필요한 모든 정보를 활용하여 개발에 들어갑니다.

개발자는 클라이언트로 부터 받은 정보를 확인합니다. 앞서 말한 것과 같이 타깃튼 20-30대로 젊은 층을을 공략할 것입니다.

첫번째로 전체적인 색을 구성하는 것이 좋습니다.

색상이야말로 사이트에 방문했을 때 즉각적인 메시지를 전달하기 때문에 중요합니다.

장례식장 홈페이지를 핑크색으로 만들 순 없을 테니까요 ..

추가로 글꼴, 폰트 사이즈, 미디어 시각적인 요소들을 정리하여 모든 페이지에 통일성 또한 고려합니다.

흔히 말하는 UI UX가 여기에 해당합니다.

사용자 경험을 반영하여 디자인에 접목합니다.

회원가입시 필요한 내용을 작성후에 가입버튼이 최상단에 있어 작성후에 스크롤을 다시 올려서 버튼을 누르는 상황은 만들지 말아야 하겠습니다 ..

또 장치간 호환성 또한 고려하여 반영영해야 합니다.

스마트폰에서도 사용가능한지 , 데스크톱만 사용하는 사용자라면 해상도를 어떻게 할것인지 등을 반영합니다.

이제 모든것이 정의가 되었다면, 프로토타입을 작성합니다.

프로토타입 관련해서 여기 이분이 정리를 잘해주셨으니 참고하세요

https://yslab.kr/94

4 단계 : 개발

개발자는 이제 개발에 들어갑니다.

html css 등

데이터베이스

등등 개발 환경을 구성하고 개발에 착수합니다.

개발 관련하여 글은 다른 카테고리를 참고 하시기 바랍니다.

여기서 주의해야 할 점은 웹을 개발한다고 가정하면 웹 표준에 맞게 하는 것이 중요하다 생각합니다.

내맘대로 짠다면 후에 나올 유지보수 단계에서 고생하니까요 ㅎㅎ

개발 프로세스의 또 다른 중요한 요소는 보안 입니다. 비밀번호, 사용자 정보 및 개인 컨텐츠와 같은 웹 사이트의 개인 데이터는 안전하게 보호되어야합니다. 이것은 기본 코드가 XSS와 같은 취약점이나 취약점을 허용하지 않도록하여 수행됩니다.

개발자를위한 최종 작업 중 하나는 웹 사이트 페이지에 특정 마크 업 을 추가하는 것 입니다. 이는 일반적으로 사용자에게 직접적인 영향을 미치지 않지만 schema.org 구조화 된 데이터 사용과 같은 검색 엔진 최적화 (SEO) 또는 Facebook 링크 공유 설명 및 이미지 태그와 같은 소셜 미디어 목적에 중요합니다.

5 단계 : 시작

이제 개발된 결과물을 최종 테스트 하는 단계 입니다.

최종 제품을 출시하기전에 기능, 성능 및 보안에 중점을 두고 한번 더 확인합니다.

확인이 완료되면 라이브 서버에 배포를 하게 됩니다.

고객은 종종 직원에게 웹 사이트를 사용하도록 요청하고 누락되거나 잘못된 컨텐츠, 끊어진 링크 (어딘가로 연결되는 링크)가 있는지,

온라인 양식이 올바른 이메일받은 편지함에 있는지 확인하도록 요청합니다.

웹 사이트가 게시되면 고객은 일반적 으로 Google 웹 로그 분석 또는 웹 마스터 도구와 같은 웹 분석 서비스 를 통합하는 데 사용되는 필요한 코드 스 니펫을 제공합니다 .

모든 것이 준비되어 실행되면서 고객에게 프로젝트 초기에 합의 된 모든 결과물을 제공 할 것 입니다.

일반적으로 웹 사이트의 소스 코드 파일 사용되는 로고 및 기타 자료를 말합니다 .

프로젝트의 복잡성에 따라 클라이언트는 관리자 패널, 고객 관리 등과 같은 사이트의 특정 기능을 올바르게 사용하기위한 교육 및 문서 도받습니다 .

6 단계 : 유지 보수

웹 디자인 프로세스의 마지막 단계는 모든 사람에게 친숙하지 않습니다. 불행히도 많은 고객들은 웹 사이트를 시작하면 개발사와의 협력을 끝내야한다고 생각합니다.

웹 사이트가 실제로 라이브 상태이고 아마도 모든 기대치를 초과했지만, 더 이상 최적화의 여지가 없다는 것을 의미하지는 않습니다. 시간이 지남에 따라 새로운 트렌드가 등장함에 따라 이는 더욱 사실입니다. 대행사는 일반적으로 A / B 테스트 를 사용하여 웹 사이트 가치를 극대화하기 위해 클릭률 및 전환과 같은 통계에 가장 영향을 미치는 변화를 결정합니다.

그리고 처음에 사이트를 구성한 팀 이외의 다른 디자인, 기능 또는 컨텐츠 와 관련 하여 결과 수정 또는 기타 업데이트를 구현할 수있는 사람은 누구 입니까? 다른 대행사를 사용하여 웹 사이트를 가장 자주 수정하면 매우 작은 변경에도 비용이 많이 들고 구현 시간이 길어집니다.

3. .NET Framework CLR

왕초보코딩탈출 — Mon, 20 Apr 2020 16:28:08 +0900

CLR

서울우유 1급A우유

COUPANG

www.coupang.com

해당 글은 광고를 포함하고 있습니다.이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.

.NET 응용 프로그램이 어떻게 컴파일 되는지 알아야 개발하는데 도움이 되지 않을까?

우선 각각 C# , VB 각각의 언어로 프로그램을 작성하면 해당 컴파일은 언어에 맞게 컴파일 하여 exe를 생성한다.

여기서 Intermediate Language 중급언어 IL 코드는 반 컴파일 또는 부분 컴파일 또는 CPU 독립적 인 부분 컴파일 코드입니다.

CLR 의 핵심 기능은 다음과 같다

Security Manager
JIT Compiler
Memory Manager
Garbage Collector
Exception Manager
Common Language Specification (CLS)
Common Type System (CTS)

Security Manager

보안관리자는 크게 두가지로 나뉩니다.

CAS (코드 액세스 보안)
CV (코드 검증)

이 두 구성 요소는 기본적으로 사용자가 어셈블리에 액세스 할 수 있는지 현재 사용자의 권한을 확인하는 데 사용됩니다. CLR은 또한이 코드에 어떤 종류의 권한 또는 어떤 종류의 권한이 있는지, 운영 체제에서 안전하게 실행할 수 있는지 여부도 확인합니다. 따라서 기본적으로 이러한 유형의 검사는 보안 관리자가 유지 관리합니다.

JIT Compiler

JIT 컴파일러는 MSIL 코드를 시스템에서 실행되는 기본 코드로 변환합니다. 네이티브 코드는 시스템 하드웨어에서 직접 이해할 수 있습니다. JIT는 실행 직전에 코드를 컴파일 한 다음이 변환을 메모리에 저장합니다.

Memory Manager

메모리 관리자 구성 요소는 응용 프로그램에서 사용할 변수 및 오브젝트에 필요한 메모리를 할당합니다.

Garbage Collector

닷넷 응용 프로그램이 실행되면 많은 개체가 만들어집니다. 특정 시점에서 이러한 객체가 필요하지 않을 수 있습니다. 따라서 가비지 콜렉터는 작은 루틴 일 뿐이며 백그라운드 프로세스 스레드라고 말하고 애플리케이션에서 현재 사용하지 않는 오브젝트를 식별하고 해당 오브젝트의 메모리를 할당 해제하는 백그라운드 프로세스 스레드라고 말할 수 있습니다.

Exception Manager

이 구성 요소는 프로세서를 리디렉션하여 catch를 실행하거나 런타임에 예외가 발생할 때마다 차단합니다.

Common Type System (CTS)

.NET Framework는 C #, VB.NET, J # 등과 같은 많은 프로그래밍 언어를 지원합니다. 모든 프로그래밍 언어에는 고유 한 데이터 형식이 있습니다. 한 프로그래밍 언어는 다른 프로그래밍 언어 데이터 형식을 이해할 수 없습니다. 그러나 한 언어로 코딩하여 다른 언어로 호출하려는 상황이있을 수 있습니다. 이러한 언어 간의 원활한 통신을 보장하기 위해 가장 중요한 것은 두 가지 언어로 정의 된 유형이 공통 데이터 유형으로 컴파일되도록하는 공통 유형 시스템 (CTS)이 있어야한다는 것입니다.

CLR은 모든 프로그래밍 언어의 데이터 유형을 실행합니다. 이것은 CLR이 모든 프로그래밍 언어에 공통 인 자체 데이터 유형을 포함하기 때문에 가능합니다.

컴파일시 모든 언어 별 데이터 유형이 CLR의 데이터 유형으로 변환됩니다. .NET의 모든 프로그래밍 언어에 공통적 인이 CLR 데이터 형식 시스템을 CTS (Common Type System)라고합니다.

CLS (Common Language Specification)

CLS는 CLR의 일부입니다. .NET은 많은 프로그래밍 언어를 지원하며 모든 프로그래밍 언어에는 언어 사양으로 알려진 코드 작성을위한 고유 한 구문 규칙이 있습니다. 즉, 모든 프로그래밍 언어에는 자체 언어 사양이 있습니다.

2. .NET Framework 란?

왕초보코딩탈출 — Mon, 20 Apr 2020 09:34:58 +0900

.NET Framework

닷넷 프레임워크가을 하기전에 COM 이라는 것이 있다. COM 은 마이크로소프트사의 기술로

윈도우 응용프로그램을 만들거나 웹 응용프로그램을 만드는 기술입니다.

하지만 여기엔 큰 단점이 있었는데 ...

OOP 즉 객체지향의 모든 기능을 지원하지 못했고,

윈도우 OS만 실행이 가능하다는 단점이 있습니다.

!! 이로인해 .NET Framework가 등장 하게 된 것입니다.

우선 의미부터 파악해본다면

.NET 에서 . <- (닷) 이 의미하는 것은 객체지향을 , NET은 인터넷를 의미합니다.

고로 .NET은 객체지향을 통해 인터넷 기반 응용 프로그램을 구현 할 수 있다로 정리 할 수 있겠습니다.

그럼 여기서 Framework는 무엇일까?

프레임 워크는 소프트웨어입니다. 또는 프레임 워크는 어디서나 실행될 수있는 응용 프로그램을 개발하기 위해 함께 통합 된 많은 소규모 기술의 모음이라고 말할 수 있습니다.

--------------------------------------------------------------------------------------------------------------------------

.NET 프레임 워크는 크게 2가지를 지원하는합니다.

1. BCL (Base Class Libraries)

2. CLR (Common Language Runtime)

BCL 은 마이크로 소프트에서 만들었으며, BCL이 없으면 .NET 코드를 작성 할 수 없습니다.

BCL 은 .NET Framework 를 설치할 때 설치가 되며, 정의된 클래스가 포함되어 있어 응용 프로그램을 개발 할 때 클래스를 사용해서 개발을 합니다.

CLR은 Common Language Runtime의 약자이며 .NET 프레임 워크에서 MSIL (Microsoft Intermediate Language) 코드를 원시 코드로 변환 한 다음 실행 하는 핵심 구성 요소 입니다.

정리를 하자면 .

.NET은 많은 프로그래밍 언어와 많은 기술을 지원하는 프레임 워크 도구입니다.

60개 이상의 언어를 지원하지만 대표적으로

VB.NET
C # .NET
VC ++. NET
J # .NET
F # .NET
Jscript.NET

NET 프레임 워크에서 지원하는 기술은 다음과 같습니다.

ASP.NET (Active Server Pages.NET)
ADO.NET (Active Data Object.NET)
WCF (Windows Communication Foundation)
WPF (Windows Presentation Foundation)
WWF (Windows Workflow Foundation)
AJAX (비동기 JavaScript 및 XML)
LINQ (언어 통합 쿼리)

3. 우측 상단 로고 넣기 화면 중앙에 텍스트 넣고 간단한 애니메이션 효과

왕초보코딩탈출 — Thu, 2 Apr 2020 22:45:42 +0900

로고는

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 -->
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
 
    <!-- 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

3. 배경 이미지에 그라데이션 넣기

왕초보코딩탈출 — Wed, 1 Apr 2020 23:44:27 +0900

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

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

퍼블리셔는 아니지만 웹이 앱이건 디자인이 많이 발목을 잡아서 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

2. CSS 폰트 설정 , 기본설정, 전체 배경 이미지 넣기

왕초보코딩탈출 — Wed, 1 Apr 2020 23:04:42 +0900

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 내용을 작성하고

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

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 -->
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
 
    <!-- 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;
}
 

 

결과 화면