🐷전동준(Jeon DongJun)

Go with the flow

[web]HTML 기초 정리

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

강의를 들으며 배웠던 점들을 복습하며 내 나름대로 정리해봤다. HTML은 재밌으면서 재밌다.(?)


Web

  • HTTP(Hyper Text Transfer Protocol)

  • 클라이언트(고객, 요청) <-> 서버(요청 받는 입장, 응답해줌)

참고

Text Editor 종류

  1. notepad++
  2. sublime text
  3. atom
  4. vsc

통합개발환경(Intergrated Development Environment)

  1. Compiler(컴파일러)
  2. Interpreter(인터프리터)

HTML 언어 주석처리 코드 : <!-- -->

CSS 언어 주석처리 코드 : /* */

참고하면 유용한 사이트

  1. mdn : https://developer.mozilla.org/ko/
  2. w3schools : https://www.w3schools.com/
  3. w3c : https://www.w3.org/

1. HTML(Hyper Text Markup Language)

  • 하이퍼 텍스트(문서)를 표시하는 언어
  • 온라인 상의 문서(document)로 만들기 위해
  • 데이터를 구조화(단계) 시키는 언어

개발 환경

  1. VSC(비쥬얼 스튜디오 코드) 사용

  2. live server 확장

    • 해당 html문서에 변경사항을 바로바로 적용되는걸 확인할 수 있다!
    • image
  • html:5

    VSC(비쥬얼스튜디오 코드)에서 html:5를 치면 자동으로 html, head, body의 기본 구성요소를 자동으로 생성시켜준다.

    image

  • 페이지 주소 설명:

    image

    • http:// : 통신규약

    • 127.0.0.1 : 자기 자신(내 PC)의 IP 주소(Local Host)

    • 5500 : 포트(Port) / 여기까지가 기본적인 루트(root)

    • /web01-html/ : 폴더 경로

    • index.html : 파일 경로

기본 문법

  • <명령코드> 적을 내용 </명령코드>  이런 식으로 열고 닫아줘야한다.

  • 명령코드 안에는 style='color:red; 와 같은 속성들을 넣어줄 수 있음.

1) 문서를 정의하는 태그

  • <meta> : 문서 기본 정보
  • <title> : 제목
  • <script> : 자바스크립트 등등
  • <style> : CSS와 같은 스타일 언어
  • <link> : 외부 문서와 연결!

2) 블록 요소

3) 인라인 요소

4) 특수문자

  • 공백 : &nbsp;
  • & : &amp;
  • < : &lt;
  • > : &gt;

  • ' : &apos;

  • " : &quot;
  • © : &copy;

실습을 통한 정리

1. index

  • 프로젝트 폴더에 index.html를 생성한다.

  • html:5로 구성 요소를 간편하게 불러온다.

    image

  • index.html은 만들고자 하는 웹페이지에서 우리가 익히 알고 있는 Home의 역할을 한다고 보면 될 것 같다.

  • <h1> 태그로 문서의 제목을 입력해보고 <p>태그를 사용해 몇마디도 적어보자.

  • <body>
      
    <h1>FC KICKOFF</h1>
    <p>실력이 뛰어나지 않아도 됩니다. 모두가 즐기는 풋살팀입니다.</p>
  
</body>

  • 이렇게 페이지에 잘 출력될 것이다.

    image

2. 블록요소, 인라인요소

  • 블록요소와 인라인 요소의 특징은 위에 기본문법 부분에 적혀있다.

  • 기본적인 블록 요소

    • <h1> ~<h6>: 제목을 생성할 수 있는 요소로 문서를 구조화하며 숫자가 커짐에 따라 하위 구조라고 생각하면 된다.
    • <p> : paragraph의 약자 p로 하나의 문단을 나타낸다.
    • <div> : 플로우 콘텐츠를 위한 통용 컨테이너로, CSS로 꾸미기 위해 레이아웃을 지정해주는 블록요소다. 쉽게 말해 html문서를 내 입맛대로 분할시키는 요소
    • <aside> : 문서의 주요 내용에 간접적으로 연관된 부분을 사이드바로 표현하기 위해 사용
    • <hr> : 수평선. 줄 하나를 만들어준다.
    • <artice> : 문서에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획. 게시판과 블로그 글, 매거진이나 뉴스 기사를 생각하면 될 것 같다.

  • 기본적인 인라인 요소

    • <a> : 앵커. href 속성을 통해서 다른 페이지나 같은 페이지의 위치, 파일, 이메일 주소, 다른 URL로 연결 시켜주는 하이퍼 링크를 만들어 주는 요소

      • https:// 통신 조약 프로토콜을 사용하지 않으면 외부 링크로 갈 수 없다. 적지 않는다면 동일 폴더내의 파일이 없기 때문에 오류가 날 것이다. http 프로토콜을 적지 않는다면 내부 경로를 적어줘야 하이퍼링크가 제대로 작동한다.

        <a href='www.naver.com'>네이버 안가져</a>
<a href='https://naver.com'>네이버 잘가져</a>

    • <b> : 굵은 글씨 요소.

    • <br> : 줄바꿈 요소.

    • <q> : 인용문

    • <u> : 언더바. 글씨에 밑줄을!

    • <span> : 인라인 컨테이너. 블록요소 <div>와 유사하지만 span은 인라인 요소.

  • 블록과 인라인 차이점

    • 요소들에 style을 입힘으로써 어떠한 차이가 있는지 확인해볼 수 있다.

    • 블록 요소 안의 인라인 요소에 배경색을 입혀도 블록에는 영향을 미치지 않는다.

    • 또한, 인라인 요소안에 블록은 포함 불가하다고하지만, 적용이 된걸 볼 수 있다. 허나 사용을 지양하자고 배웠다.

    • <body>
    
    <h1>block_inline</h1>
        
    <h2 style='background-color: blue;'>block</h2>
    <p>줄바꿈</p>
    <div>
        블록 요소 안에 텍스트, <strong>인라인 요소</strong> 포함 가능
        <p>블록 요소 안에 블록 요소 포함 가능</p>
    </div>
    
    <hr/> <!--줄 하나 생김-->
    
    <h2>inline</h2>
    <a href='#'>줄바꿈x</a>
    <q style='background-color: red'>인라인 요소 안에 텍스트, <b>인라인 요소</b> 포함 가능</q><br/>
    <span>인라인 요소 안에 <p>블록 요소</p> 포함 불가</span>
    <!--사용은 가능하나, 지양하자-->
    
    
</body>
    • image

3. 제목, 영역

  • 제목은 블록 요소인 <h1~6> 태그를 이용한다.

  • 문서를 구조화 시킬 때 사용하며, 1부터 6까지 사용가능하며 크기가 작아진다.

  • 영역은 블록 요소 <div>를 사용한다. 해당영역을 정해서 꾸미거나 영억 내에 영향을 행사할 수 있다.

  • <body>
      
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
  
    <div>영역을 정의</div>
    <div>
        <p>단락을 정의</p>
        <p>paragraph1</p>
        <p>paragraph2</p>
          
    </div>
  
</body>
  • image

4. 문자

  • 문자를 강조하거나, 기울이거나, 꾸며주는 역할을 하는 요소들을 사용할 수 있다.

  • 문자들은 인라인요소

    <body>
      
    <h1>TEXT</h1>
  
    <p>
        <b>진하게(&lt;b&gt;)</b><br>
        <strong>강하게(&lt;strong&gt;)</strong><br>
        <i>기울임(&lt;i&gt;)</i><br>
        <em>강조하여(&lt;em&gt;)</em><br>
        <small>작은 텍스트, 코멘트(&lt;small&gt;)</small><br>
        위<sup>첨자</sup>(&lt;sup&gt;)<br>
        아래<sub>첨자</sub>(&lt;sub&gt;)<br>
        <ins>내용 추가</ins>(&lt;ins&gt;)<br>
        <del>내용 삭제</del>(&lt;del&gt;)
    </p>
  
</body>

    image

5. 이미지

  • 이미지는 <img> 이미지 태그를 사용해서 불러올 수 있다.

  • <img> 태그 안에는 다양한 속성을 사용할 수 있다.

    • src : 불러올 그림의 경로를 설정
    • alt : 그림이 불러와지지 않았을 때 설명을 출력
    • width : 그림의 너비(가로)
    • height : 그림의 높이(세로)
    • width나 height의 크기는 픽셀(px: 해상도별 상대 크기)과 포인트(pt: 1pt = 약 0.72인치)로 설정할 수 있다. 추가로 %과 em으로 지정/상속 등에 대한 백분율(부모에 대한 상대크기)로도 지정해줄 수 있다.

  • 이미지 안에는 링크를 걸수도 있다. 해당 이미지를 출력하면 지정해놓은 내외부 링크로 연결해준다.

    • <a href='가고싶은 링크'>
	<img src='이미지 경로' alt='이미지 출력안되면 나오는 설명' width
</a>

  • <map>태그를 이용해 이미지 전체가 아닌 특정 부분에만 링크를 걸 수도 있다.

    • <img src='이미지 경로' alt='설명입니다.' width='200px' height='200px' usmap=#맵네임 />
<map name='맵네임'>
	<area shape='모양' coords='25, 25, 175, 175' href='가고싶은 링크' alt='설명' />
</map>

  • 나는 치킨 그림을 출력했고 링크가 비비큐 사이트로 가게 만들었다. 치킨먹고싶다.

    <body>
      
    <h1>이미지</h1>
      
    <img src="./images/img.png" alt="치킨입니다흐읅.." width='400px' height='400px' />
  
    <a href='https://www.bbq.co.kr/main.asp'>
        <img src='images/img.png' alt='그림 링크입니다.' width='50px' height='50px' />
    </a>
  
    <br>
    <br>
    <br>
  
    <img src='images/img.png' alt='그림입니다.' width = '200px' height = '200px' usemap='#my' />
  
    <map name='my'>
        <area shape="rect" coords="25, 25, 175, 175" href="https://www.bbq.co.kr/main.asp" alt="그림일껄?">
    </map>
  
</body>

    image

6. 링크

  • HTML의 핵심! 링크를 사용하기 위해서는 앵커 태그를 사용해야한다.

  • <a>

  • 내부 문서, 외부 링크 모두 보내줄 수 있다. 외부 링크로 갈때는 꼭! https:// 적어주자!

  • 인라인 요소에 id 속성을 추가해놓고, 앵커태그에 id의 값을 속성에 넣어주면 해당 요소로 보내준다.

    <body>
      
    <h1>&lt;a&gt;</h1>
  
    <a href='https://lc.multicampus.com/k-digital'>MLP</a>
    <br>
    <a href='https://naver.com'>naver</a>
    <br>
      
    <a href='#a'>1번</a>
    <br>
    <a href='#b'>2번</a>
    <br>
    <a href='#c'>3번</a>
    <br>
  
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <p id='a'>1번이다.</p>
  
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <p id='b'>2번이다.</p>
  
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <p id='c'>3번이다.</p>
  
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
  
      
</body>

7. 리스트

  • <li> : 목차(리스트)의 항목을 만들어준다.

  • <ol> : Ordered List(순차적 목록). 사용하면 순차적인 목차를 생성할 수 있다.
  • <ul> : Unordered List(비순차적 목록).
  • <dl> : 정의형 목록.
    • <dt> : 정의형 목록의 제목(title)
    • <dd> : 내용
  • <body>
      
    <h1>목록</h1>
  
    <h2>순차</h2>
    <!--ordered list-->
    <ol>
        라면 끓이는 순서
        <li>냄비에 물을 받는다.</li>
        <li>물을 끓인다.</li>
        <li>스프를 넣는다.
            <ol>
                <li>끓기 전에?</li>
                <li>끓고 나서?</li>
                <li>그건 너의 선택</li>
            </ol>
        </li>
        <li>면을 넣고 끓인다.</li>
        <li>맛나게 먹눈당.</li>
    </ol>
  
    <br>
  
    <h2>비순차</h2>
    <!--unordered list-->
    <ul>
        굿전의 점심 리스트
        <li>소고기</li>
        <li>닭고기</li>
        <li>돼지고기</li>
    </ul>
  
    <!--deifinition list (description list)-->
    <h2>정의형 목록</h2>
    <dl>
        <dt>굿전</dt>
        <dd>
            <dl>
                <dt>할게</dt>
                <dt>너무</dt>
                <dt>많은</dt>
                <dt>동준이...</dt>
            </dl>
        </dd>
    </dl>
</body>
  • image

8. 표

  • <table> 태그를 사용해 표를 생성

    • borer 속성으로 표의 굵기를 정할 수 있다.
    • <caption> 태그로 표 제목 생성

  • <tr> 행 추가, <th> 열 추가 후 첫 행에 내용 입력, <td> 셀에 내용 입력

    • <td>의 rowspan과 colspan을 사용해 열, 행을 합칠 수 있다.
    • align = center, left, right 등으로 데이터의 정렬 가능

  • <colgroup>으로 각 컬럼(열)의 크기와 스타일 지정 가능

  • <thead> 표의 첫 행에 고정적으로 반영할 내용

  • <tbody> 표의 몸통 부분(중간)에 들어갈 내용

  • <tfoot> 표의 끝 행에 고정적으로 들어갈 내용

  • <body>
      
    <table border='3'>
        <colgroup>
            <col width='100px'>
            <col width='150px'>
            <col style='background-color: green;' width='200px'>
        </colgroup>
  
        <thead>
            <tr>
                <th>성명</th>
                <th>나이</th>
                <th>성별</th>
                <th>국적</th>
            </tr>
        </thead>
      
        <tbody>
            <tr>
                <td rowspan='2'>열 합치기</td>
                <td>28</td>
                <td>남</td>
                <td>대한민국</td>
                  
            </tr>
            <tr>
                <td>35</td>
                <td colspan='2'>미국 남자</td>
            </tr>
            <tr>
                <td>아무개</td>
                <td>12</td>
                <td>알수없음</td>
                <td>외계</td>
            </tr>
        </tbody>
  
  
        <tfoot>
            <tr>
                <td colspan='4' align='center'>행 4개 합치고 가운데정렬</td>
            </tr>
  
        </tfoot>
    </table>
  
  
  
</body>
  • image

9. 레이아웃

  • 레이아웃은 html문서의 기능이나 구획을 나누기 위한 페이지 구조화 작업이라고 생각하면 될 것 같다.

1) <div> 태그 이용

  • <div>로 id를 지정해 레이아웃을 짤 수 있다. ex) header, body, footer

  • 그 영역 안에서는 인라인 요소인 <span>으로도 세부 영역을 나눌 수 있다.

  • <address>를 사용해 문서 하단부에 Copyright 같은 부연 설명을 적어줄 수 도 있다.

  • 레이아웃을 지정해 놓고 <style>태그로 css를 입혀줄 수도 있다.

    • div : 영역을 나누는 선, 간격 등을 설정
    • body, left, right 등 id로 지정해 놓은 영역들의 크기를 조절가능
  • <!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 type='text/css'>
        *{
            padding: 0px;
            margin: 0px;
        }
  
        div{
            border: 1px dashed blue;
            margin: 10px;
              
        }
  
        #body{
            height: 400px;
  
        }
  
        #left{
            width: 48%;
            height: 90%;
            float: left;
        }
  
        #right{
            width: 48%;
            height: 90%;
            float: right;
        }
    </style>
</head>
<body>
      
    <div id='header'>
        <h1>제목</h1>
        <div>
            <span><a href='#'>메뉴1</a></span>
            <span><a href='#'>메뉴2</a></span>
            <span><a href='#'>메뉴3</a></span>
            <span><a href='#'>메뉴4</a></span>
        </div>
    </div>
  
    <div id='body'>
        <div id='left'>
            <p>내용1</p>
        </div>
        <div id='right'>
            <p>내용2</p>
        </div>
    </div>
  
    <div id='footer'>
        <address>Copyright &copy; All Rights reserved by GoodJeon</address>
    </div>
  
  
</body>
</html>
  • image

2) semantic

  • HTML5 버전에서는 div의 id를 사용해 따로 head, body, footer를 설정해줄 필요 없다.

  • <header>, <section>, <footer>를 사용해주면 된다. 대신 class속성에 ‘html5’를 지정해줘야한다.

  • <nav> 태그는 네비게이션 바를 구성해준다.

  • <article> 태그는 주 내용을 담는 구역

  • <body>
      
    <header class='html5'>
        <h1>제목</h1>
        <nav class='html5'>
            <span><a href='#'>메뉴1</a></span>
            <span><a href='#'>메뉴2</a></span>
            <span><a href='#'>메뉴3</a></span>
            <span><a href='#'>메뉴4</a></span>
        </nav>
    </header>
  
    <section class='html5'>
        <article class='html5' id='left'>
            <p>내용1</p>
        </article>
        <article class='html5' id='right'>
            <p>내용2</p>
        </article>
    </section>
  
    <footer class='html5'>
        <address>Copyright &copy; All Rights reserved by GoodJeon</address>
    </footer>
  
</body>
  • image

10. form(매우중요!!!!!)💦

  • <form> 태그를 불러오면 action속성이 있다. action 속성에는 요청에할 주소를 적어준다.
  • method 속성은 요청(request)의 방식을 정한다.
    • get 방식
      • header 부분에 저장
      • 주소 부분에 query string으로 보인다.
    • post 방식
      • body 부분에 저장
      • 주소 부분에 query string이 안보인다.
      • 주로 밝혀지면 안되는 정보들을 주고 받을 때 사용할 것 같다.
    • queryString이란?
      • url(주소)?name=value&name=value 와 같은 형태
      • HTML의 <input> 인풋 태그의 다양한 타입을 이용해서 받은 값들을 value형태로 서버에 전송(요청) submit 할 수 있다.
  • <form> 안에 <filedset>으로 구성
    • <legend> 태그로 제목 설정
    • <input> 태그의 다양한 type(속성들)
      • text : 문자를 입력 받을 수 있다.
      • password : 입력받는 문자가 가려진 상태로 나온다.
      • radio : 라디오 버튼 같이 생김. 같은 name일 경우 옵션이라고 생각하면 편하다.
      • checkbox : 말그대로 선택박스. 다수 선택 가능
      • button : 그냥 버튼이다.
      • reset : 해당 문서의 input에 적었던 내용들이 모두 초기화
      • submit : action 속성에 적어놓은 링크로 전송
  • <body>
      
    <form action='html-form-res.html' method='get'>
        <filedset>
            <legend>회원가입</legend>
  
            <p>ID : <input type='text' name='id' /></p>
            <p>PW : <input type='password' name='pw' /></p>
            <p>Email 수신 여부<br/>
                <input type='radio' name='rdo' value='y' />y
                <input type='radio' name='rdo' value='n' />n
            </p>
            <p>관심분야<br>
                <input type='checkbox' name='web' value='web' />WEB<br>
                <input type='checkbox' name='ai' value='ai' />Data Science<br/>
                <input type='checkbox' name='engi' value='engi' />Data Engineer<br>
            </p>
            <p>하고싶은 말<br>
                <textarea name='etc' cols='60' rows='10'></textarea>
            </p>
            <p>
                <input type='button' value='그냥 버튼' /><br>
                <input type='reset' value='취소' /><br/>
                <input type='submit' value='전송'/>
            </p>
        </filedset>
    </form>
      
  
</body>

  • image

  • sumbit 버튼을 눌렀을 때 나오는 ? 부터의 부분이 queryString

    image

11. select

  • 여러가지 중 하나를 선택할 수 있는 select 기능을 만들어준다.

  • <optgroup> 을 사용하면 선택지 안에서 카테고리도 정할 수 있다.

  • <body>
      
    <h1>select</h1>
  
    <form action='html-form-res.html' method='get'>
        <p>
            점심
            <select name='lunch'>
                <option value='chicken'>치킨</option>
                <option value='pizza'>피자</option>
                <option value='sushi'>초밥</option>
                <option value='yangjangpi'>양장피</option>
                <option value='maratang'>마라탕</option>
            </select>
        </p>
          
  
        <p>
            저녁
            <select name='dinner'>
                <optgroup label='한식'>
                    <option value='sinseonlo'>신선로</option>
                    <option value='dduckgalbi'>떡갈비</option>
                    <option value='cowhead-kukbab'>소머리국밥</option>
                    <option value='bulgogi'>불고기</option>
                    <option value='oct-stir-fry'>낚지볶음</option>
                </optgroup>
                <optgroup label='양식'>
                    <option value='steak'>스테이크</option>
                    <option value='pasta'>파스타</option>
                    <option value='taco'>타코</option>
                </optgroup>
            </select>
        </p>
  
  
        <p>
            <input type='submit' value='선택' />
              
        </p>
  
  
    </form>
  
  
  
</body>
  • image

느낀점

이전에 해왔던 파이썬 공부보다 재밌는건 왜일까.. 눈에 결과물이 확실히 보여서 그런거 같다.

개인적인 프로젝트의 초석으로 딱일거 같다. 연습해야겠다.🤦‍♂️

2022

[web]jQuery 복습 3

2 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 2

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 1

16 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리4

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리3

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리2

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리1

7 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]CSS 기초 정리

9 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]HTML 기초 정리

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[Pandas]pandas 연습

3 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑

2021

[Python기초]module

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑