Kite adds AI powered code completions to your code editor, giving developers superpowers.

https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=dreamcoder&utm_content=description-only 

 

Kite - Free AI Coding Assistant and Code Auto-Complete Plugin

Code faster with Kite’s AI-powered autocomplete plugin for over 16 programming languages and 16 IDEs, featuring Multi-Line Completions. Works 100% locally.

www.kite.com

 

https://code.google.com/archive/p/spyderlib/downloads

 

Google Code Archive - Long-term storage for Google Code Project Hosting.

 

code.google.com

무료

https://www.sublimetext.com/

 

Sublime Text - the sophisticated text editor for code, markup and prose

Available on Mac, Windows and Linux

www.sublimetext.com

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=no5100&logNo=221295331722

 

슬릭에디트:(유료)

SlickEdit Pro 2020 x64 (25.0.2)

https://www.slickedit.com/?c=adwordscode&d=home&gclid=CjwKCAjwp_GJBhBmEiwALWBQk8usk3hp7HuZDJdiPOQu79zu_ukD0MIFuFN6M-mNuXro2NZzv9HvJhoCPJ0QAvD_BwE&utm_source=adwordscode&utm_medium=cpc&utm_campaign=se_adwordscode 

 

SlickEdit - The most powerful code editor available featuring source analysis (tagging), syntax expansion, beautifiers, beautify

 

www.slickedit.com

 

https://www.jetbrains.com/ko-kr/idea/promo/?source=google&medium=cpc&campaign=13012345842&gclid=Cj0KCQjw7MGJBhD-ARIsAMZ0eess1DttAkF78_tOPNF2Qgv-azKiHxrFo9t_6xutbmiS1w1Xi4wnzS0aAu5lEALw_wcB 

 

IntelliJ IDEA: 우수성과 인체 공학이 담긴 JetBrains Java IDE

 

www.jetbrains.com

https://atom.io/

 

A hackable text editor for the 21st Century

At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

atom.io

마이크로소프트 회사에서 만든 무료 코드 편집기

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

사용방법:

https://youtu.be/CeCfDdE82K0

파이참:무료4개월, 4개월이후 유료

https://www.jetbrains.com/ko-kr/pycharm/

 

PyCharm: JetBrains가 만든 전문 개발자용 Python IDE

 

www.jetbrains.com

 

Python은 1991 년에 개발 된 유명한 고급 프로그래밍 언어 중 하나입니다.

Python은 주로 서버 측 웹 개발, 소프트웨어 개발, 수학, 스크립팅 및 인공 지능에 사용됩니다. Windows, Mac, Linux, Raspberry Pi 등과 같은 여러 플랫폼에서 작동합니다.

Python IDE :

 

Notepad++ 8.1.4 release (무료)

https://notepad-plus-plus.org/downloads/

 

Downloads | Notepad++

 

notepad-plus-plus.org

Adobe

https://www.adobe.com/kr/creativecloud/plans.html?plan=individual&filter=all 

 

편집기 랭킹 TOP10

https://dev.to/jkmdroid/10-best-code-editors-for-2020-719

 

10 best code editors for 2020

So you just learned your first programming language. Or maybe you are tired of using your current cod...

dev.to

 

https://reactjs.org/

 

React – A JavaScript library for building user interfaces

A JavaScript library for building user interfaces

reactjs.org

 

 

 

 

'coding' 카테고리의 다른 글

LOGO 제작 사이트  (0) 2021.08.23
프로그래머들이 즐겨찾는 사이트 주소  (0) 2021.08.22
AWS ROUTE53으로 EC2에 도메인 연결하기  (0) 2021.08.14
동영상 삽입태그  (0) 2021.08.08
HTML 기본 골격  (0) 2021.07.25

 

유튜브링크: https://www.youtube.com/watch?v=gK7xnCqCucY 

혹은 아래의 링크로 들어가서 동영상을 보아도 됩니다.

https://www.youtube.com/watch?v=UkiLQYhDQ-k 

유튜브화면과 aws 서비스 레이아웃이 다름으로 내용을 잘 확인해야한다.

일단 인스턴스 화면에 들어가면

프라이빗 IPv4 주소

 172.31.38.23

퍼블릭 IPv4 DNS

 ec2-52-78-186-30.ap-northeast-2.compute.amazonaws.com | 개방 주소법 

탄력적 IP 주소

 52.78.186.30 [퍼블릭 IP]

 

이렇게 3종류 주소가 있는데 설정에 필요한 주소는 퍼블릭 주소와 탄력주소이다.

먼저 AWS관리 콘솔에 들어가서 Route 53 를 클릭한다.

Route 53 대시보드에서 DNS 관리

호스팅 영역으로 들어간다.

호스팅 생성 누르고

우측 하단에있는 호스팅 생성 누른다.

다음 레코드 새로생성 누르고 이름:www (w3개만 넣으면 됨.도메인 앞에 놓이는 문자입니다.)

유형:A-IPv4주소를 선택하고 

값: 탄력적 IP 주소

 52.78.186.30 [퍼블릭 IP] (주소를 입력합니다.)

 

여기서 탄력적 IP주소는 수시로 변할 수 있습니다.타인이 나의 IP주소를 가로채서 도용하는것을 막기위한 보안적인 대책입니다.

이렇게하면 하단에 완전한 도메인이 추가된 것을 볼수있습니다.

 

크라이언트의 검색창에 www.eonbae.com을  을 입력하면 

도메인을 열면 내가만든 웹사이트 화면이 뜨는것을 볼수있습니다.

참고로 

 Amazon LightSail을 통한 가상 서버 호스팅 이용하기 - 최원근 (AWS 솔루션즈 아키텍트) - YouTube

 

 

동영상 삽입태그:

HTML Video Example

HTML Video (w3schools.com)

동영상 삽입태그

https://www.codingfactory.net/11877

 

HTML / video / 동영상 삽입하는 태그

video video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML 5에서 추가된 것이므로, HTML 5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다. 문법

www.codingfactory.net

 

https://blogchannel.tistory.com/154

 

HTML 반응형 비디오 코드 동영상 모바일 적용

여러분의 블로그 동영상 제대로 돌아가나요? 글쓴이는 늘 고민이 하나 있었습니다. PC화면에서 640x360 크기로 동영상을 보여주면 아무런 문제가 되지 않지만 모바일 화면에서 보여주면 너무나

blogchannel.tistory.com

https://www.codingfactory.net/category/html

 

https://www.slickedit.com/?gclid=CjwKCAjwgb6IBhAREiwAgMYKRkQNgm_qshgWteNNqfq0GqvE5C07Xm5tPluZq5rRZJMKHo57Og09choCoNcQAvD_BwE 

 

SlickEdit - The most powerful code editor available featuring source analysis (tagging), syntax expansion, beautifiers, beautify

 

www.slickedit.com

동영상 

https://pixabay.com/videos/

 

Video 코드 및 기본태그

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>

<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body> 
</html>

 

 

2년이 지났지만 아직까지도 이 질문에 대해 정확한 해법을 준사람은 없다.

 

확인결과 Flask패키지 설정도 되어있는 상태이고 저장된 경로에도 문제가 없다.

app.py파일이 인식되지않는것과 연관성이 있을법도 하다.

app.py파일을 생성하면 python파일이 아니라 일반 text파일로 인식된다.동시에 Flask문자에 빨간색 파도 밑줄이 생긴다.

 

 

미디어 쿼리의 기본 문법

미디어 쿼리를 작성할 때에는 필요에따라 미디어 유형과 and 또는 ,콤마 논리 연산자로 조건을 적용할 수 있다.

@media [only 또는 not][미디어 유형][and 또는 ,콤마](조건문){실행문}

주:미디어 쿼리 구문은 대,소문자를 구별하지 않는다.

@media

미디어 쿼리 문법의 시작을 알리는 부분이다.

[only 또는 not]

미디어 유형

[and 또는 ,콤마]

(조건문)

{실행문}

 

미디어 쿼리를 적용하려면?-링크 방식

미디어 쿼리를 적용하려면 CSS 파일 내에 미디어 쿼리를 작성해서 <link></link> 태그로 CSS 파일을 연결하여 적용해야한다.미디어 쿼리를 적용하는 방법은 여러 가지가 있지만 현재는 이 방식이 가장 많이 사용되는 방식 중 하나이다.

<link rel="stylesheet" href="mediaqueries.css">

이 방식은 HTML파일과 CSS 파일을 별도로 관리하므로 불러오는 속도도 빠르고 관리 면에서도 효율적이다.

 

 

HTML,JS,CSS설명

HTML <!DOCTYPE> 선언

정의 및 특징

DOCTYPE 선언은 HTML 문서에서 <html> 태그를 정의하기 전에 가장 먼저 선언되어야만 합니다.

 

이러한 DOCTYPE 선언은 HTML 태그는 아니지만, 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지 않습니다.

 

HTML 4.01에서 DOCTYPE 선언은 SGML을 기반으로 하기 때문에 DTD를 참조해야 합니다. DTD는 브라우저가 콘텐츠를 정확하게 표현하도록 마크업 언어에 대한 규칙을 명시합니다.

하지만 HTML5는 SGML을 기반으로 하지 않기 때문에 DTD를 참조할 필요가 없습니다.

출처:https://getbootstrap.com/docs/4.0/getting-started/introduction/

      https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

      http://tcpschool.com/html-tags/doctype

      https://codepen.io/davidjb/pen/ENGqpv

      https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML

      https://coding-factory.tistory.com/177

기본 HTML 예제:

<!DOCTYPE html>

<html lang="ko">

        <head>     

             <meta charset="UTF-8">     

             <title>HTML !DOCTYPE declaration</title>

        </head>

        <body>     

              <p>이 문서는 HTML 문서입니다.</p>

        </body>

</html>

 HTML5에서는 단 한 가지 방법으로도 DOCTYPE을 선언할 수 있다.

 

부트스트랩 HTML Code 

<!DOCTYPE html>

 

#메타태그 기본설치

<!-- Required meta tags -->

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

여기에서~

//content="width=device-width 웹 페이지의 크기가 모니터의 실제 크기를 따라가도록 만든 설정으로 모니터,스마트폰 등의 화면에 맞는 비율로 화면이 뜨도록 돕는다.
//initial-scale=1 보여지는 화면의 즘 정도를 1배율로 한다는 뜻으로 이 값을 크게 키우면 화면이 즘이 되어 크게보인다.
스마트폰에서만 효과가 있다.
//shrink-to-fit=no 애플 사파리 11버전에선 viewport 크기가 보여줘야할 내용보다 작으면 보여줘야할 내용을 줄여서 보여준다고 한다.그래서 "no"라는 명령어로 임의 줄임을 방지한다.
//user-scalable=yes 모바일 접속시 모바일 크기에 맞춘 화면을 렌더링에 설정

 

기본 CSS링크

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 

#<!-- Optional JavaScript -->

 

Bootstrap JS 기본골격

#jQuery first, then Popper.js, then Bootstrap JS

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"

integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"

integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"

integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Slim을 사용하지 않으므로 Jquery로 대체한다.즉

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"

integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"

integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

slim버전은 ajax을 사용할 수 없다.

글자 변경은 구글폰트에서 찾기:

https://fonts.google.com/?subset=korean

링크는 title 태그 아래에 설치한다.

 

끝!

 

http://bootstrapk.com/css/

<form>

     <div class="form-group">

           <label for="exampleInputEmail1">이메일 주소</label>

           <input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">

     </div>

     <div class="form-group"> <label for="exampleInputPassword1">암호</label>

           <input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">

     </div>

     <div class="form-group"> <label for="exampleInputFile">파일 업로드</label>

           <input type="file" id="exampleInputFile"> <p class="help-block">여기에 블록레벨 도움말 예제</p>

     </div>

     <div class="checkbox"> <label> <input type="checkbox"> 입력을 기억합니다 </label>

     </div>

            <button type="submit" class="btn btn-default">제출</button>

</form>

 

#Form group 과 input group 을 같이 쓰지 마세요

#Form group 과 input group 을 직접 같이 쓰면 안됩니다. 대신, input group 을 form group 내에 넣도록 하세요.

 

 

Slick Edit Pro Download 

https://www.slickedit.com/

 

SlickEdit - The most powerful code editor available featuring source analysis (tagging), syntax expansion, beautifiers, beautify

 

www.slickedit.com

Download를 누르면 됩니다.

Slick Edit Pro사용설명

https://www.youtube.com/watch?v=ow58VeCO2Yo 

 

부트스트랩 컴포넌트

https://getbootstrap.com/docs/4.0/components/alerts/

 

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

getbootstrap.com

1주차 숙제설명:이 페이지에서 내가 필요한 코드를 붙여넣기하는 방법으로 완성한다.

                     Dropdowns 을 선택하여 사용한다.

윗 사이트에 들어가서

Sizing 내부의

<div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">Default</span> </div> <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> </div>                     

를 복사하여  "주문자 이름" 을 만든다.

 

Custom select 내부의 수량부분을 선택

<div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <select class="custom-select" id="inputGroupSelect03"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div>

를 복사하여 "수량선택" 을 만든다.

 

다음은 "주문자 이름" 과 같은 방법으로 2번 연속 복사하여 붙인후 "Default"를 필요한 단어로 바꾸어 입력한다.

마지막으로 button에 onclick="order() 를 입력한다.

 

이하 완성된 숙제 내용

homework

index.html

 

<!doctype html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">


<style>
*{font-family: 'Jua', sans-serif;}
.item-img {

width: 500px;
height: 350px;
background-color: green;

background-image: url("https://scontent-gmp1-1.xx.fbcdn.net/v/t1.6435-9/182509403_274188331070798_8926967360613139965_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=8bfeb9&_nc_ohc=9VrbTzJe8iYAX_L8ghc&_nc_ht=scontent-gmp1-1.xx&oh=a1aac32c023a507fcc8e8498880d7302&oe=60F67CF3");
background-size: cover;
background-position: center;
}

.price {
font-size: 20px;
}

.item-desc {
width: 500px;
margin-top: 20px;
margin-bottom: 20px;
}

.item-oder {
width: 500px;
}

.btn-order {
margin: auto;
width: 100px;

display: block;
}

.wrap {
width: 500px;
margin: auto;

}
</style>
<script>
function order() {
alert("주문이 완료되었습니다!");
}
</script>
</head>

<body>
<div class="wrap">
<div class="item-img">

</div>
<div class="item-desc">
<h3>블루투스 방수 이어폰을 팝니다.<span class="price">가격:50.000/</span></h3>
<p>수영하면서도 음악을 즐길수있는 방수 이어폰입니다.</p>
</div>
<div class="item-oder">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">주문자 이름</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">수량</button>
</div>
<select class="custom-select" id="inputGroupSelect03">
<option selected>수량을 선택하세요!</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">주소</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">전화번호</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<button type="button" onclick="order() " class="btn btn-primary btn-order">주문하기</button>
</div>
</div>
</body>

</html>

논리 연산자 배우기

https://ko.javascript.info/logical-operators

 

논리 연산자

 

ko.javascript.info

 

Logical OR (||)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR

 

Logical OR (||) - JavaScript | MDN

The logical OR (||) operator (logical disjunction) for a set of operands is true if and only if one or more of its operands is true. It is typically used with Boolean (logical) values. When it is, it returns a Boolean value. However, the || operator actual

developer.mozilla.org

 

+ Recent posts