ALLYES
[2022년 청년친화형 기업 ESG지원 사업 - 22] 본문
일시 : 2022.10.04
시간 : 9:00 ~ 18:00
오전 : 파이썬
오후 : 자바스크립트
오전 : 파이썬
- 라이브러리(library)
- 개념
- 모듈(module)이라 불림
- 자주 쓰는 함수, 변수들을 모아놓은 파이썬 파일
- 자주 사용하는 기능을 모듈화, 패키지화 하여 만들어둔 것
- 종류
- 표준 라이브러리
- 파이썬에서 기본으로 제공하는 라이브러리(파이썬 설치시 기본제공)
- ex) random
- 외부 라이브러리
- 개발자가 필요에 의해 개발한 패키지와 모듈의 집합
- 표준 라이브러리
- 모듈(module)
- 필요한 코드를 재사용하기 위해 변수나 함수 또는 클래스를 모아 놓은 파일
- 다른 파이썬 프로그램에서 불러와 사용할 수 있게끔 만든 파이썬 파일
- 다른사람이 이미 만들어 놓은 모둘을 사용할 수도 있고 직접 만들어서 사용할 수 있다
- 파이썬에서 사용할 수 있는 모듈은 확장자가 .py파일이다
- 개념
- Framework / Library / Module 차이점
- 로봇을 만드는 공장(Framework) : 설계
- 이 공장 안에는 로봇의 머리, 몸통, 팔, 다리를 만들 수 있는 파트(Library)가 있다.
- 로봇의 머리를 만드는 파트에는 눈, 코, 입을 생산하는 기계(Module)가 3개 있다.(Library > Module)
- 로봇의 몸통을 만드는 파트에는 기계가 1개가 있다.(Library = Module)
- 로봇을 만드는 공장(Framework) : 설계
- 데이터 분석에 특화된 모듈(라이브러리)
- Numpy
- 개념
- 고성능 과학꼐산을 위한 데이터분석 라이브러리
- Numerical Python 약자
- Python의 수치해석용 라이브러리
- 종류
- numpy.nadarray 클래스
- 동일한 자료형을 가지는 값들이 배열 형태로 존재
- N차원 형태로 구성 가능
- 각 값들은 양의 정수로 색인(index)이 부여됨
- ndaaray를 줄여서 array로 표현
- numpy.nadarray 클래스
- 특징
- 파이썬 자료형 list와 비슷한 형태
- 빠르고 효율적인 산술연산을 제공하는 다차원배열 제공(ndarray 클래스)
- 반복문 없이 전체 데이터 배열 연산이 가능한 표준 수학함수(sum(), sqrt(), mean())
- 개념
- Pandas
- 행과 열로 구성된 표 형식의 데이터를 지원하는 라이브러리
- Matpotlib
- 2D 그래프로 시각화가 가능한 라이브러리
- Numpy
오후 : HTML
- display
- 개념
- 가시속성
- 종류
- display:block
- display:inline
- display:none
- display:gird
- display:flex
- 개념
- Box
- margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,p,span,a{
background-color: pink;
}
/* block : 크기 지정 가능 */
div{
width: 200px;
height: 200px;
display: inline;
}
span{
/* inline : 크기 지정 불가능, 컨텐츠 만큼만 영역을 가질 수 있음 */
width: 200px;
height: 200px;
/* inline-block : 크기 지정 가능, 한줄에 여러개 배치 가능 */
display: inline-block;
}
a{
/* none : 화면에 안보이게 */
display: none;
}
</style>
</head>
<body>
<!-- display : 가시 속성-->
<!-- display 속성 : 기본값 - block -->
<div>하이</div>
<div>하이2</div>
<p>하이</p>
<hr>
<!-- display 속성 : 기본값 - inline -->
<span>하이</span>
<a href="">하이</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
display: none;
}
a:hover+span{
display: inline;
}
</style>
</head>
<body>
<a href="#">네이버</a>
<span>www.naver.com</span>
<br>
<a href="#">다음</a>
<span>www.daum.net</span>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
display: grid;
grid-template-columns: 200px 200px 500px;
grid-template-rows: 200px 200px 500px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
<div class="item">I</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
display: flex;
background-color: cadetblue;
}
.item{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: palevioletred;
/* top right bottom left */
margin : 20px 30px 40px 50px;
/* 모든방향에 동일 */
margin : 20px;
/* top,bottom / right, left */
margin: 20px 30px;
/* top/ right, left/ bottom */
margin: 20px 30px 40px;
/* 가운데 정렬(왼쪽, 오른쪽 마진 영역 동일하게) */
margin: auto;
/* margin-left/ margin-bottom/ margin-right 따로 구현 가능 */
margin-top: 50px;
}
</style>
</head>
<body>
<!-- 마진상쇄현상 : 마진 영역이 겹치는 경우에 둘 중에 더 큰 마진영역만 잡힘 -->
<div></div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
}
.div1{
background-color: aquamarine;
padding: 20px;
padding-top: 50px;
}
.div2{
background-color: yellow;
padding: 20px;
/* box-sizing : content+padding+border 크기 지정 */
/* 기본값 : content-box - 컨텐츠 크기만 적용 */
/* border-box : content+padding+border 크기로 가로 세로 길이 지정 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">안녕</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: bisque;
}
.div1{
/* border : 테두리굵기 선타입 선색깔 */
/* 선타입 : solid(실선) dotted(점선) dashed(대쉬 - ) */
border: 10px solid red;
box-sizing: border-box;
}
.div2{
/* border-radius : 테두리 둥글게 만들 수 있는 */
/* 왼쪽 상단 오른쪽상단 오른쪽하단 왼쪽하단 */
border-radius: 50px 0px 50px 0px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>'ESG' 카테고리의 다른 글
| [2022년 청년친화형 기업 ESG지원 사업 - 24] (1) | 2022.10.07 |
|---|---|
| [2022년 청년친화형 기업 ESG지원 사업 - 23] (1) | 2022.10.05 |
| [2022년 청년친화형 기업 ESG지원 사업 - 21] (0) | 2022.10.01 |
| [2022년 청년친화형 기업 ESG지원 사업 - 20] (1) | 2022.09.30 |
| [2022년 청년친화형 기업 ESG지원 사업 - 19] (1) | 2022.09.29 |
'ESG' Related Articles
more
