Notice
Recent Posts
Recent Comments
Link
«   2026/03   »
일 월 화 수 목 금 토
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
Tags
more
Archives
Today
Total
관리 메뉴

ALLYES

[2022년 청년친화형 기업 ESG지원 사업 - 24] 본문

ESG

[2022년 청년친화형 기업 ESG지원 사업 - 24]

Allyes_99 2022. 10. 7. 08:52

일시 : 2022.10.06

시간 : 9:00 ~ 18:00

오전 : HTML

오후 : 파이썬

오전 : HTML

 

  • 스타일 시트 선언 방식
    • 종류
      • 인라인 스타일
        • 요소 내 style 속성으로 스타일 지정
        • ex) <p style ="color:blue;">인라인스타일</p>
        • HTML 코드 읽기 불편
      • 내부 스타일
        • head요소 내 style 요소 생성한 후 스타일 지정
        • ex) <head> <style> p{color:blue;} </style></head>
      • 외부 스타일 방식
        • <link>태그로 외부파일에 접근하여 스타일 지정
        • ex) <head> <link rel ="stylesheet" href = "파일명.css"> </head>
      • 임포트 방식
        • 스타일시트 안에 @import를 이용해 외부파일의 스타일 지정
        • ex) @import url(mycss.css);
    • 우선 순위
      • !important  : 모든 우선순위 다 무시 => 우선순위 1순위
        • 인라인 > 내부 > 외부 > 임포트
        • id > class > 타입 > 전체
        • 나중에 선언 > 먼저 선언

 

#i3{
    font-size: 30px;
    color: chocolate;
}
/* 외부스타일, import 방식 : 개발이 어느정도 마무리/ 분리할때 */
#i2{
    font-size: 80px;
    color: cornflowerblue;
}
<!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">
    <!-- 외부스타일 #i2-->
    <link rel="stylesheet" href="./Ex24css선언방식.css">
    <!-- 내부스타일 #i1-->
    <!-- 임포트 방식 @import -->
    <style>
        @import url(Ex24.css);

        #i1 {
            font-size: 30px;
            color: aquamarine;
        }
        /* 내부스타일 방식 : 개발중에 사용 */
        #i2 {
            color: blueviolet;
        }
        /* !important : 모든 우선순위 다 무시 - */
        p{
            color: green !important;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <!-- 인라인방식 : html 코드 읽는게 불편 / 개발 끝나고 나서 -->
    <p style="font-size: 50px; color: brown;">인라인방식</p>
    <p id="i1">내부스타일</p>
    <p id="i2">외부스타일</p>
    <p id="i3">임포트방식</p>
</body>

</html>
  • 자바스크립트(Javascript)
    • 개념
      • 객체 기반의 스크립트 프로그래밍 언어
    • 특징
      • 모든 웹 브라우저에서 동일하게 동작
      • 웹 브라우저에서 실행 결과를 즉시 확인
      • 다양한 용도의 프로그램 개발
      • 다양한 자바스크립트 공개 API
      • 다양한 라이브러리와 프레임 워크
<!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>
</head>

<body>
    <a href="#">자바스크립트 무작정 따라하기!!!!!!!!!!!!</a>
    <br><br>
    <button id="btn1">디자인바꾸기 짠!</button>&nbsp&nbsp<button id="btn2">되돌리기 짠!</button>
    <br>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>

    <h1>오늘은 12/08일</h1>

    <p>즐거운 JavaScript 수업입니닷!</p>
    <!-- html 내에 자바스크립트를 작성할 수 있는 영역 -->
    <script>
        document.querySelector("#btn1").addEventListener("click", function(){
            document.querySelector("body").style.backgroundColor = "black"
            document.querySelector("body").style.color = "white"
        })

        // 아이디 btn2 클릭 시 배경색 하양색으로 글씨색 검정색으로
        document.querySelector("#btn2").addEventListener("click", function(){
            document.querySelector("body").style.backgroundColor = "white"
            document.querySelector("body").style.color = "black"
        })
    </script>
</body>

</html>
  • JavaScript 입출력 
    •  document.write()
      • html 문서내에 출력
    • console.log()
      • console창에 출력
    • alert()
      • 알림 팝업창으로 출력
        • prompt("출력내용". "입력내용")
          • 입력창에 통한 입력문
        • confirm("출력문작성")
          • 확인 및 취소를 통한 입력문
    • 변수
      • 사전적의미로는 "변화를 줄 수 있는" 또는 "변할 수 있는 수"
      • 프로그래밍에서는 데이터를 담는 공간
  • Java vs Javascript

<!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>
</head>
<body>
    <script>
        // html 문서에 출력(화면에 출력)
        document.write('HTML 문서 내에 출력');
        // console창에 출력(개발중)
        console.log("콘솔창에 출력");
        console.info("콘솔창에 정보출력")
        console.warn("콘솔창에 경고출력")
        console.error("콘솔창에 오류출력")

        //팝업 알림창에 출력
        alert("알림창에 출력")
    </script>
</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>
</head>
<body>
    <script>
        //prompt : 입력창을 통해 키보드로 입력받을 수 있음
        //prompt("질문내용") / prompt("질문내용", "기본값")
        var a = prompt("질문.", "대답.");
        console.log(a);

        // confirm : 확인/취소를 입력받을 수 있음
        // boolean 타입으로 반환
       var b = confirm("질문내용");
       console.log(b);
    </script>
</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>
</head>
<body>
    <script>
        // var : 재선언 가능, 재할당 가능
        var a = 1;
        console.log(a);
        var a = 3; // 재선언
        console.log(a);
        a=4;    //재할당
        console.log(a);

        // let : 재선언 불가능, 재할당 가능
        let b =1;
        console.log(b);
        // let b = 3;
        console.log(b);
        b=5;
        console.log(b);


        // const : 재선언 불가능, 재할당 불가능
        const c = 1;
        console.log(c);
        // const c =3;
        // console.log(c);
        // c=5;
        // console.log(c);

    </script>
</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>
</head>
<body>
    <script>
        var name = prompt("이름을 입력하세요.");
        console.log("어서오세요!");
        console.log(name +  "님, 환영합니다!🎉");

    </script>
</body>
</html>

 

  • JavaScript 자료형

오후 : Python

 

  • Pandas
  • 개념
    • 데이터 조작 및 분석을 위한 라이브러리
  • 종류
    • Series Class
      • 1차원
      • 인덱스 + 값
    • DataFrame Class 
      • 2차원
      • 행과 열을 가지는 표와 같은 형태
      • 서로 다른 종류의 자료형이 모인 형태
# Series() : 1차원의 시리즈 데이터 생성, 대소문자 구분 주의! 앞은 대문자 S
population = pd.Series([9668465,3391946,2942828,1450062])
population
0    9668465
1    3391946
2    2942828
3    1450062
dtype: int64
# 시리즈 값 확인
population.values

out : array([9668465, 3391946, 2942828, 1450062], dtype=int64)
# 시리즈 인덱스 확인
population.index

out : Index(['서울', '부산', '인천', '광주'], dtype='object')
# 시리즈 타입
population.dtype

out : dtype('int64')
# 시리즈 이름 지정
population.name = '인구'
population.index.name='도시

out : population
도시
서울    9668465
부산    3391946
인천    2942828
광주    1450062
Name: 인구, dtype: int64

 

 

 

 

 

 

 

 

 

 

 

'ESG' 카테고리의 다른 글

[2022년 청년친화형 기업 ESG지원 사업 - 26]  (0) 2022.10.11
[2022년 청년친화형 기업 ESG지원 사업 - 25]  (0) 2022.10.07
[2022년 청년친화형 기업 ESG지원 사업 - 23]  (1) 2022.10.05
[2022년 청년친화형 기업 ESG지원 사업 - 22]  (1) 2022.10.04
[2022년 청년친화형 기업 ESG지원 사업 - 21]  (0) 2022.10.01
'ESG' Related Articles more