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지원 사업 - 23] 본문

ESG

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

Allyes_99 2022. 10. 5. 17:52

일시 : 2022.10.05

시간 : 9:00 ~ 18:00

오전 : HTML

오후 : Python

  • 공간분할태그
    • 개념
      • 경계를 분할하거나 영역을 나눌 때 사용하는 태그
    • 종류
      • <div>
      • <p>
      • <span>
  • 시멘틱태그
    • 개념
      • 사이트의 레이아웃을 설계하기 위한 태그
      • 태그에 의미부여
    • 종류
      • <header>
      • <nav>
      • <aside>
      • <section>
      • <article>
      • <footer>

 

  •  display
    • 개념
      • 요소가 화면에 보이는 방식 지정
    • 종류
      • block
      • inline
      • none
      • grid 
        • 두방향(가로-세로) 레이아웃 시스템(2차원)
        •  구성 : container, item
      • flex
        • 한 방향 레이아웃 시스템(1차원)
        • 구성 : container, item
  • position
    • 개념
      • 자유자재로 요소의 위치를 배치하는 속성
      • position 속성을 통해 문서 상에 요소를 배치하는 방법
      • top, right, bottom, left 속성을 통해 요소의 최종 위치 결정
    • 종류

 

  • position : relative
    • 요소 자기 자신의 원래 위치(static일때의 위치)를 기준으로 배치
    • 원래 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
    • 위치를 이동하면서 다른 요소에 영향을 주지 않는다.
    • 문서 상 원래 위치가 그대로 유지됨
  • position : absolute
    • static 속성을 가지고 있지 않은 부모 기분으로 움직임
    • 부모 중 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위 태그(body)가 기준
  • position : fixed
    • 화면을 기준으로 절대 위치 좌표 설정
<!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 {
            /* relative : position이 static일때를 기준으로 상하좌우로 조절 */
            position: relative;
            border: 1px solid red;
        }

        .s2 {
            /* 아래쪽으로 5px 이동, top: 위에서 누름 => 아래로 이동*/
            top: 5px;
        }

        .s3 {
            /* 위쪽으로 5px 이동, bottom : 아래에서 누름 => 위로 이동 */
            bottom: 5px;
        }

        .s4 {
            /* 오른쪽으로 5px 이동, left : 왼쪽에서 누름 => 오른쪽으로 이동 */
            left: 5px;
        }

        .s5 {
            /* 왼쪽으로 5px 이동, right : 오른쪽에서 누름 => 왼쪽으로 이동 */
            right: 5px;
        }
    </style>
</head>

<body>
    <!-- 따로 position 속성 값을 수정하지 않았으면 static(기본값) -->
    <span class="s1">span1</span>
    <span class="s2">span2</span>
    <span class="s3">span3</span>
    <br>
    <span class="s4">span4</span>
    <br>
    <span class="s5">span5</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>
        span {
            border: 1px solid red;
            /* absolute : 가장 가까운 부모 요소 영역을 기준으로 위치 결정 */
            /*  이때 부모의 position 속성은 static 아니여야함 */
            /*                              (relative, absolute, fixed) */
            /* static이 아닌 요소가 없다면 body를 기준으로 위치 결정 */
            position: absolute;
        }

        div {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin-top: 50px;
            position: relative;
        }

        .s2 {
            top: 10px;
            /* 오른쪽, 왼쪽 전부다 포지션이 잡혀서 요소의 크기 자체가 바뀔 수 있음 */
        }

        .s3 {
            right: 10px;
        }

        .s4 {
            bottom: 10px;
        }

        .s5 {
            left: 20px;
        }
    </style>
</head>

<body>
    <!-- div : position(static)-->
    <div>
        <span class="s1">span1</span>
        <span class="s2">span2</span>
        <span class="s3">span3</span>
        <span class="s4">span4</span>
        <span class="s5">span5</span>
    </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;
            position: absolute;
        }

        .s1 {
            background-color: aqua;
            left: 0%;
            top: 0%;
        }

        .s2 {
            background-color: aquamarine;
            right: 0%;
            top: 0%;
        }

        .s3 {
            background-color: blueviolet;
            bottom: 0%;
            left: 0%;
        }

        .s4 {
            background-color: brown;
            bottom: 0%;
            right: 0%;

        }
    </style>
</head>

<body>

        <div class="s1"></div>
        <div class="s2"></div>
        <div class="s3"></div>
        <div class="s4"></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: aquamarine;
            position: fixed;
            bottom: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><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>
</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">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <style>
        a{
            /* fixed : 화면상 특정위치에 고정시키는 속성 */
            /* 위치 영역 :  body */
            position: fixed;
            right : 10px;
            bottom: 10px;
        }
    </style>
        <title>Document</title>
</head>

<body>
    <p id="top">top</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>
    <a href="#top"><span class="material-symbols-outlined">
            arrow_upward
        </span></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>
        div{
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .d1{
            background-color: aqua;
            /* z-index: 요소가 겹쳐 있을 때 어떤 요소가 가장 앞으로 나오게 할 건지 */
            /* 속성값으로 지정한 숫자가 크면 클 수록 앞에 나옴(상대적) */
            z-index: 3;
        }
        .d2{
            background-color: blue;
            top: 50px;
            left: 50px;
            z-index: 2;
        }
        .d3{
            background-color: burlywood;
            top: 100px;
            left: 100px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></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">
    <style>
        div{
            width: 600px;
            height: 300px;
            border : 1px solid red;
            /* visible : 기본값(컨텐츠가 영역을 벗어나더라도 전부 보이게 함) */
            overflow: visible;
            /* hidden : 영역을 벗어나는 컨텐츠는 숨김(보이지않음) */
            overflow: hidden;
            /* scroll : 영역을 벗어나는 부분은 스크롤을 내려서 확인 가능 */
            overflow: scroll;
            /* auto : 영역을 벗어나면 스크롤 생김, 안벗어나면 스크롤바도 생성 x */
            overflow: auto;
        }

    </style>
    <title>Document</title>
</head>
<body>
    <div>
        <pre>
            Cos ah ah I’m in the stars tonight
    So watch me bring the fire and set the night alight
    Shoes on get up in the morfffffffffffffrn
    Cup of milk let’s rock and roll

    </pre>
    </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;
            background-color: rgb(176, 38, 255);
            position: relative;
            /* animation */
            animation-name: ani;
            /* 생명주기 */
            animation-duration: 2s; 
            /* 무한반복 */
            animation-iteration-count: infinite;
            /* 방향 */
            animation-direction: alternate;
            /* 에니메이션 지연 */
            animation-delay: 2s;
        }
        div:hover{
            animation-play-state: paused;
        }
        @keyframes ani{
            0%{  /* 시작 */
                left: 0px;
                background-color: rgb(176, 38, 255);
            }
            50%{ /* 중간 */
                background-color: aqua;
            }
            100%{ /* 끝 */
                left: 500px;
                background-color: rgb(0, 174, 255);
            }
        }
    </style>
</head>
<body>
    <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>
        .d{
            width: 500px;
            height: 300px;
            background-color: burlywood;
            position: absolute;
        }
        .d1{
            width: 100px;
            height: 100px;
            background-color: rgb(216, 92, 92);
            z-index: 1;
            position: absolute;
            left: 100px;
            animation-name: ani;
            animation-duration: 1.5s; 
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        .d2{
            width: 100px;
            height: 100px;
            background-color: rgb(75, 182, 224);
            z-index: 1;
            position: absolute;
            right: 100px;
            animation-name: ani2;
            animation-duration: 1.5s; 
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        .d1:hover{
            animation-play-state: paused;
        }
        .d2:hover{
            animation-play-state: paused;
        }
        @keyframes ani{
            0%{
                bottom: 0%;
                border-radius: 50px 50px 50px 50px;
            }
            100%{
                bottom: 200px;
                border-radius: 0 0 0 0;
            }
        }
        @keyframes ani2{
            0%{
                top: 0%;
            }
            100%{
                top: 200px;
                border-radius: 50px 50px 50px 50px;
            }
        }
    </style>
</head>
<body>
    <div class="d">
        <div class="d1"></div>
        <div class="d2"></div>
    </div>
</body>
</html>

점심시간

오후 : Python

# pandas 모듈을 import하고 pd라고 부르겠음
import pandas as pd

 

# Series() : 1차원의 시리즈 데이터 생성, 대소문자 구분 주의! 앞은 대문자 S
population = pd.Series([9668465,3391946,2942828,1450062])
population

 

# 시리즈 값 확인
population.values

 

# 시리즈 인덱스 확인
population.index

 

# 시리즈 타입
population.dtype

 

# 시리즈 이름 지정
population.name = '인구'
population.index.name='도시'

 

 

 

 

'ESG' 카테고리의 다른 글

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