ch08 파이썬 패키지 설치 및 numpy, matplotlib 기초

 💡 이번 차시의 학습목표

✔ 파이썬 패키지 설치

✔ numpy, matplotlib 기본 사용

 

01. pip

  1. package installer for Python
  2. 파이썬 패키지를 설치하고 관리하는 패키지 매니저
  3. 프로그램을 설치할 수 있도록 도와주는 도구
  4. pip는 파이썬을 설치하면 기본적으로 포함되어 있음.
  5. cmd 에서 pip 입력 후 확인

02. 패키지 설치 방법

  1. 터미널에서 아래와 같은 명령어 입력 후 실행
    >> pip install [패키지 이름]​
  2. 설치된 패키지 리스트 확인
    >> pip list​

03. 대표적인 패키지들

  1. numpy
    1. 행렬이나 일반적으로 대규모 다차원 배열을 쉽게 처리할 수 있도록 지원하는 라이브러리
      1. 다차원 배열 자료구조인 ndarray 지원
    2. 수치해석 등 수학 및 과학 연산을 위해 효율적으로 구현된 기능 제공
    3. 공식 홈페이지
    4. 🌐 https://numpy.org/
  2. pandas
    1. 데이터 조작 및 분석을 위한 라이브러리
    2. 쉼표로 구분된 값, JSON, Excel과 같은 다양한 파일 형식에서 데이터를 가져올 수 있음
    3. 데이터를 표 형태로 다룰 수 있음
      1. 데이터의 종류
        1. Series(1차원 구조), DataFrame(2차원 구조), Panel(3차원 구조)
        2. Series, DataFrame을 많이 사용함
    4. 공식 홈페이지
    5. 🌐 https://pandas.pydata.org/
  3. matplotlib
    1. 데이터를 시각화(그래프, 도표 등)하기 위한 라이브러리
    2. 2차원 그래프, 막대그래프, 히스토그램 등 다양한 차트 지원
    3. 공식 홈페이지
    4. 🌐 https://matplotlib.org/
  4. scikit-learn(사이킷런)
    1. 머신러닝을 위한 라이브러리
    2. 학습/검증/예측 데이터로 데이터를 분리할 수 있으며 다양한 머신러닝 알고리즘을 지원함
    3. 공식 홈페이지
    4. 🌐 https://scikit-learn.org/stable/
  5. django(장고), flask
    1. 웹 개발을 위한 웹 프레임워크 라이브러리
    2. django는 데이터베이스와의 연동을 모두 지원하는 풀스택 프레임워크이며, flask는 데이터베이스 연동을 위해선 별도의 라이브러리를 사용해야하며, 상대적으로 가벼우며, 복잡하지 않은 웹 개발에 활용됨
    3. 공식 홈페이지🌐 flask: https://flask.palletsprojects.com/en/2.2.x/
    4. 🌐 django: https://www.djangoproject.com/
  6. beautiful soup, selenium
    1. html, xml 문서를 추출하고 구조적인 분석을 도와주는 라이브러리로 웹 크롤링에 많이 활용됨
    2. beautiful soup은 정적인 페이지, selenium은 마우스 동작, 키보드 동작 등의 기능도 프로그래밍으로 구현할 수 있도록 지원하여 보다 동적인 페이지 접근이 가능함
    3. 공식 홈페이지🌐 selenium: https://www.selenium.dev/
    4. 🌐 beautiful soup: https://www.crummy.com/software/BeautifulSoup/bs4/doc/

04. 실습 예제

 📌 실습코드는 코드박스에서 확인해주세요!

 

📥실습 코드

  1. numpy
    1. 설치 및 사용 방법
      # 설치
>> pip install numpy

# 사용
import numpy as np​
    2. 배열 정렬하기
      ex01_numpy_01.py

import numpy as np

# 배열 선언
arr = np.array([2, 1, 5, 3, 7, 4, 6, 8])
print(arr)
# 정렬 함수 호출
arr = np.sort(arr)
print(arr)
    3. 배열 합치기
      ex01_numpy_02.py

import numpy as np

# 배열 합치기
a = np.array([1, 2, 3, 4])
b = np.array([5, 6, 7, 8])
c = np.concatenate((a, b))
print(c)
    4. 배열 연산하기
      ex01_numpy_03.py

import numpy as np

# 배열 연산하기
a = np.array([1, 2, 3, 4])
print(a)
b = a + 10
print(b)
c = a - b
print(c)
    5. 배열 슬라이싱(특정 인덱스 범위만 접근)
      ex01_numpy_04.py

import numpy as np

# 배열 슬라이싱
a = np.array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
print(a[:2]) # 0~1번 인덱스
print(a[1:2]) # 1~1번 인덱스
print(a[3:8]) # 3~7번 인덱스
print(a[6:]) # 6번 인덱스 부터 마지막
  2. matplotlib
    1. 설치 및 사용 방법
      1. pyplot 모듈: 그래프 만들 때 주로 사용하여 import 추가
        ex01_numpy_04.py

import numpy as np

# 배열 슬라이싱
a = np.array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
print(a[:2]) # 0~1번 인덱스
print(a[1:2]) # 1~1번 인덱스
print(a[3:8]) # 3~7번 인덱스
print(a[6:]) # 6번 인덱스 부터 마지막​
    2. 2차원 그래프 그리기
      1. y축 값만 정의하기
        ex02_matplot_01.py

import matplotlib as mpl
import matplotlib.pyplot as plt

# plot(): 기본적인 x축, y축으로 구성된 2차원 그래프를 만들어주는 함수 
# show(): 정의된 그래프 출력

# y축 값만 정의 
plt.plot([1, 2, 3, 4])
plt.show()
      2. x축, y축 값 정의하기, 축 label 표시하기
        ex02_matplot_02.py

import matplotlib as mpl
import matplotlib.pyplot as plt

# x축, y축 값 함께 정의 
# plt.plot([1, 2, 3, 4], [2, 5, 6, 10])
x_values = [1, 2, 3, 4]
y_values = [2, 5, 6, 10]
plt.plot(x_values, y_values)
# 축 label 표시하기 
plt.xlabel("x axis label")
plt.ylabel("y axis label")
plt.show()
      3. 마커 표시하기
        1. 마커 옵션
        2. 🌐 https://matplotlib.org/stable/api/markers_api.html#module-matplotlib.markers
        ex02_matplot_03.py

import matplotlib as mpl
import matplotlib.pyplot as plt

x_values = [1, 2, 3, 4]
y_values = [2, 5, 6, 10]
# marker 표시(동그라미)
# plt.plot(x_values, y_values, "o")
# marker 표시(동그라미, 선)
# plt.plot(x_values, y_values, "o-")
# marker 표시(네모, 선)
# plt.plot(x_values, y_values, "s-")
# marker 표시(동그라미, 대시선)
# plt.plot(x_values, y_values, "o--")
plt.xlabel("x axis label")
plt.ylabel("y axis label")
plt.show()

 

 

 

 

ch09 HTML, CSS, Javascript 소개 및 선택자 활용

💡 이번 차시의 학습목표

✔ HTML, CSS, javascript의 역할 이해

✔ HTML, CSS, javascript 기초문법 다뤄보기

 

01. 웹 화면의 구성

  1. 거의 모든 웹사이트의 화면은 HTML, CSS, javascript로 구성됨
  2. 현재는 HTML5 라는 웹표준을 이용하여 웹페이지를 개발하고 있으며, 크롬, 사파리, 엣지 등 웹 브라우저를 이용하여 웹페이지를 이용할 수 있음
  3. html파일에 HTML, CSS, javascript문법을 활용하여 화면을 구성함
  4. 웹 화면 구성요소
    1. HTML(Hyper Text Markup Language)
      1. 웹페이지 화면의 내용 및 구조를 정의하는 언어이며, 태그를 사용해서 영역을 구분함
      2. 텍스트, 이미지 등을 표현함
    2. CSS(Cascading Style Sheets)
      1. 웹화면 요소에 대한 색상, 글꼴, 크기, 레이아웃 등을 지정할 수 있음
      2. 시각적 표현에 활용
    3. javascript
      1. 정적인 htm에 동적인 기능을 지정할 수 있는 프로그래밍 언어
      2. 요소변경, 시각적인 변경 등 화면에 대한 동작을 지정할 수 있음

02. 기초문법 이해하기

  1. 기본 구조
    1. 가장 기본적인 구조이며, 화면에 표현되는 내용은 body 태그 내에 작성함
      <!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>​


    2. 화면에 안녕하세요 텍스트 출력하기
      ex01_basic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    안녕하세요
</body>
</html>​


      실행을 위해 extension에서 live server 검색하여 설치

    3. 태그 적용하여 출력해보기
      <h2>안녕하세요</h2>​


  2. CSS 적용해보기
    1. head 태그 내에 style 태그를 추가하여 화면 요소에 대한 스타일 지정
    2. 지정한 요소에 대해서만 해당 스타일 지정됨
      1. h2태그에 글자색을 빨간색으로 지정
        ex02_css.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        h2 {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>첫번째 div p 태그</p>
        <h2>첫번째 div h2 태그</h2>
    </div>
    <div>
        <h2>두번째 div h2 태그</h2>
        <h3>두번째 div h3 태그</h3>
    </div>
</body>
</html>​
    3. div 태그에 배경색을 노란색으로 지정
      div {
      background-color: yellow;
    }​

  3. javascript 적용해보기
    1. head 태그 내에 script 태그를 추가하여 javascript 코드 작성
    2. 버튼클릭하여 javascript 함수 호출해보기
      1. 버튼 클릭시 함수호출을 위해 onclick 속성 사용
        ex03_javascript.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
        function fun1() {
						console.log("콘솔에 출력됩니다");
            alert("안녕하세요");
        }
    </script>
</head>
<body>
    <button onclick="fun1()">버튼</button>
</body>
</html>​

03. CSS 선택자(Selector)

  1. HTML 요소를 선택할 수 있으며, CSS 스타일적용, javascript 에서 요소선택 등에 활용할 수 있음
    ex04_selector_01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="id1">
        <p class="class1">첫번째 div p 태그</p>
        <h2 class="class1">첫번째 div h2 태그</h2>
    </div>
    <div id="id2">
        <h2 class="class1">두번째 div h2 태그</h2>
        <h3 class="class2">두번째 div h3 태그</h3>
    </div>
</body>
</html>​


  2. 주요 선택자 문법
    1. 태그 선택자
      1. 스타일을 적용할 태그 이름을 쓰고 중괄호 안에 css 문법을 작성함
      2. h2 태그 요소에는 글자색 빨간색, div 태그 요소에는 배경색 노란색
        ex04_selector_02.html

h2 {
	  color: red;
    }
div {
    background-color: yellow;
    }​


    2. id 선택자
      1. id선택자는 하나의 html 문서에서 중복되는 id요소 값을 가지지 않도록 함
      2. id1 이라는 요소에 글자색을 파란색으로 지정. id3요소는 배경색 초록색
      3. id 선택자 사용할 때는 앞에 #을 붙임
        ex04_selector_03.html

#id1 {
      color: blue;
	    }
#id3 {
      background-color: green;
	    }​


    3. class 선택자
      1. class 선택자는 여러 요소에 적용하는 것이 가능
      2. class1 요소에 글자색을 빨간색으로 지정. class2 요소는 배경색 노란색
        1. 동시에 여러 디자인 적용가
      3. class 선택자 사용할 때는 앞에 .을 붙임
        ex04_selector_04.html

.class1 {
        color: red;
		    }
.class2 {
		    background-color: yellow;
		    }​



    4. 자손 선택자
      1. 하위 요소를 선택할 때 사용하며 공백을 이용하여 구분함
        ex04_selector_05.html

/* id1이 적용된 요소 내의 h2 태그 요소 */
#id1 h2 {
			   color: blue;
				}
/* id2가 적용된 요소 내의 class2 클래스가 적용된 요소 */
#id2 .class2 {
					    color: red;
							}​


    5. 결합 선택자
      1. div태그요소 중에서 id1이라는 id가 적용된 요소 선택
        div#id1 {
        color: blue;
        }​

 

ch10 Javascript DOM, BOM API

<aside> 💡 이번 차시의 학습목표

✔ javascript DOM API 활용

✔ javascript로 스크롤 제어

✔브라우저 개발자도구 활용하기

</aside>

01. javascript DOM API 활용하기

  1. DOM(Document Object Model, 문서객체모델)
    1. html 문서의 각 요소를 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 하는 인터페이스
    2. DOM 계층 이미지(출처: 위키백과)
  2. DOM API(Application Programming Interface)
    1. javascript에서 html요소를 제어하기 위해 제공되는 함수
    2. 객체 형태로 접근할 수 있으며, 현재 문서는 document로 접근함
    3. ✅주요 method
      1. getElementById(”id이름”): 해당 id 이름을 가진 요소를 가져옴
      2. getElementsByClassName(”Class이름”): 해당 class 이름을 가진 요소를 모두 가져옴
      3. getElementsByTagName(”Tag이름”): 해당 tag 요소를 모두 가져옴
    4. 실습
      1. id1 요소 가져와서 콘솔에 출력
      2. ele1 = document.getElementById("id1"); console.log(ele1);
      3. class2 요소 가져와서 콘솔에 출력
        1. 여러 개 요소를 가져오기 때문에 배열 객체처럼 인덱스로 접근 가능
        2. ele1 = document.getElementsByClassName("class2") console.log(ele1); console.log(ele1[0]);
      4. h2 요소 가져와서 콘솔에 출력
        1. 여러 개 요소를 가져오기 때문에 배열 객체처럼 인덱스로 접근 가능
        2. ele1 = document.getElementsByTagName("h2") console.log(ele1); console.log(ele1[0]);

02. javascript 로 스크롤 제어하기

  1. 페이지 높이 확인
    1. scrollHeight 속성으로 현재 페이지의 높이 확인
    2. height = document.documentElement.scrollHeight; console.log(height);
  2. css로 페이지의 높이를 지정한 후 페이지 높이 확인
  3. body { height: 3000px; }
  4. 스크롤을 제일 하단으로 내리기
    1. 브라우저 제어를 위해서 window 객체 활용
      1. BOM(Browser Object Model, 브라우저객체모델)으로 브라우저에 대한 제어를 할 수 있는 API
      2. window 객체로 브라우저의 제일 하단으로 스크롤 내리기
        1. scrollTo() method 활용
          1. 첫번째 매개변수는 가로, 두번째 매개변수는 세로 스크롤값
          height = document.documentElement.scrollHeight;
console.log(height);
window.scrollTo(0, document.documentElement.scrollHeight)

03. 브라우저 개발자도구 살펴보기

  1. 개발자도구
    1. 현재 웹페이지의 요소, 콘솔, 디자인 요소 확인 등을 할 수 있음
    2. 대부분의 브라우저(크롬, 사파리, 엣지 등)에서 제공
    3. 크롤링하고자 하는 웹사이트의 요소 분석을 위해 개발자도구 사용은 필수
  2. 개발자도구 살펴보기
    1. 크롬 브라우저에서 F12키를 누르면 우측에 개발자도구가 보임
    2. 파이썬 홈페이지 접속 후 개발자도구 확인
    4. 아래 그림과 같이 아이콘 클릭 후 홈페이지의 파이썬 로고 클릭
    6. 아래와 같이 파이썬 로고의 요소를 확인할 수 있음
    7. <img class="python-logo" src="/static/img/python-logo@2x.png" alt="python™" width="218" height="62">

      ch10 Javascript DOM, BOM API

      <aside> 💡 이번 차시의 학습목표✔ javascript로 스크롤 제어</aside>
      1. DOM(Document Object Model, 문서객체모델)
        1. html 문서의 각 요소를 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 하는 인터페이스
        2. DOM 계층 이미지(출처: 위키백과)

      2. DOM API(Application Programming Interface)
        1. javascript에서 html요소를 제어하기 위해 제공되는 함수
        2. 객체 형태로 접근할 수 있으며, 현재 문서는 document로 접근함
        3. ✅주요 method
          1. getElementById(”id이름”): 해당 id 이름을 가진 요소를 가져옴
          2. getElementsByClassName(”Class이름”): 해당 class 이름을 가진 요소를 모두 가져옴
          3. getElementsByTagName(”Tag이름”): 해당 tag 요소를 모두 가져옴
        4. 실습
          1. id1 요소 가져와서 콘솔에 출력
          2. ele1 = document.getElementById("id1"); console.log(ele1);
          3. class2 요소 가져와서 콘솔에 출력
            1. 여러 개 요소를 가져오기 때문에 배열 객체처럼 인덱스로 접근 가능
            2. ele1 = document.getElementsByClassName("class2") console.log(ele1); console.log(ele1[0]);
          4. h2 요소 가져와서 콘솔에 출력
            1. 여러 개 요소를 가져오기 때문에 배열 객체처럼 인덱스로 접근 가능
            2. ele1 = document.getElementsByTagName("h2") console.log(ele1); console.log(ele1[0]);

      02. javascript 로 스크롤 제어하기

      1. 페이지 높이 확인
        1. scrollHeight 속성으로 현재 페이지의 높이 확인
        2. height = document.documentElement.scrollHeight; console.log(height);
      2. css로 페이지의 높이를 지정한 후 페이지 높이 확인
      3. body { height: 3000px; }
      4. 스크롤을 제일 하단으로 내리기
        1. 브라우저 제어를 위해서 window 객체 활용
          1. BOM(Browser Object Model, 브라우저객체모델)으로 브라우저에 대한 제어를 할 수 있는 API
          2. window 객체로 브라우저의 제일 하단으로 스크롤 내리기
            1. scrollTo() method 활용
              1. 첫번째 매개변수는 가로, 두번째 매개변수는 세로 스크롤값
              height = document.documentElement.scrollHeight;
console.log(height);
window.scrollTo(0, document.documentElement.scrollHeight)

      03. 브라우저 개발자도구 살펴보기

      1. 개발자도구
        1. 현재 웹페이지의 요소, 콘솔, 디자인 요소 확인 등을 할 수 있음
        2. 대부분의 브라우저(크롬, 사파리, 엣지 등)에서 제공
        3. 크롤링하고자 하는 웹사이트의 요소 분석을 위해 개발자도구 사용은 필수
      2. 개발자도구 살펴보기
        1. 크롬 브라우저에서 F12키를 누르면 우측에 개발자도구가 보임
        2. 파이썬 홈페이지 접속 후 개발자도구 확인
        4. 아래 그림과 같이 아이콘 클릭 후 홈페이지의 파이썬 로고 클릭
        6. 아래와 같이 파이썬 로고의 요소를 확인할 수 있음
        7. <img class="python-logo" src="/static/img/python-logo@2x.png" alt="python™" width="218" height="62">

          ch10 Javascript DOM, BOM API

          <aside> 💡 이번 차시의 학습목표✔ javascript로 스크롤 제어</aside>
          1. DOM(Document Object Model, 문서객체모델)
            1. html 문서의 각 요소를 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 하는 인터페이스
            2. DOM 계층 이미지(출처: 위키백과)
          2. DOM API(Application Programming Interface)
            1. javascript에서 html요소를 제어하기 위해 제공되는 함수
            2. 객체 형태로 접근할 수 있으며, 현재 문서는 document로 접근함
            3. ✅주요 method
              1. getElementById(”id이름”): 해당 id 이름을 가진 요소를 가져옴
              2. getElementsByClassName(”Class이름”): 해당 class 이름을 가진 요소를 모두 가져옴
              3. getElementsByTagName(”Tag이름”): 해당 tag 요소를 모두 가져옴
            4. 실습
              1. id1 요소 가져와서 콘솔에 출력
                ele1 = document.getElementById("id1");
console.log(ele1);​​


              2. class2 요소 가져와서 콘솔에 출력
                1. 여러 개 요소를 가져오기 때문에 배열 객체처럼 인덱스로 접근 가능
                  ele1 = document.getElementsByClassName("class2")
console.log(ele1);
console.log(ele1[0]);​


              3. h2 요소 가져와서 콘솔에 출력
                1. 여러 개 요소를 가져오기 때문에 배열 객체처럼 인덱스로 접근 가능
                  ele1 = document.getElementsByTagName("h2")
console.log(ele1);
console.log(ele1[0]);​


          02. javascript 로 스크롤 제어하기

          1. 페이지 높이 확인
            1. scrollHeight 속성으로 현재 페이지의 높이 확인
              height = document.documentElement.scrollHeight;
console.log(height);
          2. css로 페이지의 높이를 지정한 후 페이지 높이 확인
             
            body {
      height: 3000px;
      }​
          3. 스크롤을 제일 하단으로 내리기
            1. 브라우저 제어를 위해서 window 객체 활용
              1. BOM(Browser Object Model, 브라우저객체모델)으로 브라우저에 대한 제어를 할 수 있는 API
              2. window 객체로 브라우저의 제일 하단으로 스크롤 내리기
                1. scrollTo() method 활용
                  1. 첫번째 매개변수는 가로, 두번째 매개변수는 세로 스크롤값
                  height = document.documentElement.scrollHeight;
console.log(height);
window.scrollTo(0, document.documentElement.scrollHeight)

          03. 브라우저 개발자도구 살펴보기

          1. 개발자도구
            1. 현재 웹페이지의 요소, 콘솔, 디자인 요소 확인 등을 할 수 있음
            2. 대부분의 브라우저(크롬, 사파리, 엣지 등)에서 제공
            3. 크롤링하고자 하는 웹사이트의 요소 분석을 위해 개발자도구 사용은 필수
          2. 개발자도구 살펴보기
            1. 크롬 브라우저에서 F12키를 누르면 우측에 개발자도구가 보임
            2. 파이썬 홈페이지 접속 후 개발자도구 확인
            3. 아래 그림과 같이 아이콘 클릭 후 홈페이지의 파이썬 로고 클릭
            4. 아래와 같이 파이썬 로고의 요소를 확인할 수 있음
              <img class="python-logo" src="/static/img/python-logo@2x.png" alt="python™" width="218" height="62">

 

'Python' 카테고리의 다른 글

[Python] 유튜브 크롤링(1)  (0) 2024.03.19
[Python] Selenium 소개 및 사용법  (0) 2024.03.18
[Python] 함수와 모듈  (0) 2024.03.11
[Python] 조건문과 반복문  (0) 2024.03.08
[Python] 파이썬 기본 문법  (0) 2024.01.30

+ Recent posts

티스토리툴바