한 번에 끝내는 파이썬 웹 개발 초격차 패키지 94일차

웹 & 프론트엔드 기본

오전에는 웹 / 앱 / 인프라 진단 가이드를 통해서 전체적으로 살펴보는 시간을 가져보았다. 정리도 할 겸 앞으로 어떻게 공부해야 좋을지 노션을 통해서 정리할 수 있었던 것 같다. 점심 이후에는 회사소개 간략히 살펴보고 나라장터 크롤링에 대해서 학습해보는 시간을 가져보았다. 결국 실패하고 말았다. 엑셀까지는 생성이 되는데 엑셀 안에 데이터값이 들어오지 않는 것이다. 그렇다고 URL을 제대로 읽어 들이냐 print 찍어보면 제대로 불러들이고 있다. python3이 문제인가 싶어서 코드를 전체 다 기록해두고 집에 와서 python2 버전으로 진행하고 싶었다. 하지만, 또 걸림돌이 많이 생겼다. 2버전은 pip 설치부터 애먹고 있다. 지금도 하다가 지쳐서 블로그 작성하러 들어온 셈이다. 왜 이렇게 호환성을 맞추는 것이 이렇게 어려운지 모르겠다. egg 에러 계속 뜨면서 pip upgrade 진행해도 무한 에러가 발생한다. 도저히 답이 안 나와서 속상하기만 하다. 크롤링 제대로 되는 것을 봐야 코드 수정하면서 내 입맛에 바꿔서 회사에서 쓸 수 있을 텐데 아직도 나의 코딩 실력의 부족이 크다는 것을 체감하게 된다.

CSS

속성 - 전환, 변환

index.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>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <div class="container">
        <div class="item">web</div>
        <div class="item">mobile</div>
        <div class="item">infra</div>
    </div>
</body>
</html>

main.css

.container .item {
    width: 100px;
    height: 100px;
    background-color: rosybrown;
    margin: 30px;
    padding: 10px;
    border-radius: 10px;
    transition: 1s;
}

.container .item:nth-child(1):hover {
    width: 200px;
    background-color: greenyellow;
}

.container .item:nth-child(2):hover {
    transform: rotate(45deg) scale(0.5);
}

.container .item:nth-child(3) {
    transform: perspective(300px) rotateX(45deg)
}

1 .container .item
   - width: 100px (가로 속성 : 100px)
   - height: 100px (세로 속성 : 100px)
   - background-color: rosybrown (배경 컬러 속성 : rosybrown)
   - margin: 30px (magin 속성)
   - padding: 10px (padding 속성)
   - border-radius: 10px (테두리를 둥글게 만드는 속성)
   - transition: 1s (변화시키는 속성)

2 .container .item:nth-child(1):hover
   - width: 200px; (가로 속성 : 200px)
   - background-color: greenyellow (배경 컬러 속성 : greenyellow)

3 .container .item:nth-child(2):hover
   - transform: rotate(45deg) scale(0.5) (회전하며 사이즈가 작아지는 속성)

4 .container .item:nth-child(3)
   - transform: perspective(300px) rotateX(45deg) (원근법으로 회전하는 속성)

CSS 전환, 변환에 대해 학습해보는 시간을 가졌다. hover 속성을 통해 마우스 커서가 가까이 가면 모션 효과가 발동하게 된다. web에 마우스가 가까이 가면 가로 사이즈가 커지면서 색상이 입혀진다. mobile에 마우스가 가까이 가면 회전하면서 작아지는 모습을 볼 수 있다. 이토록 전환과 변환에 대해 살펴볼 수 있었으며 CSS 변화는 무궁무진하다는 것이다.
94일 차는 여기서 마무리하고자 합니다.

패스트캠퍼스 링크 :https://bit.ly/37BpXi

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

'FastCampus > 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 Online.' 카테고리의 다른 글

한 번에 끝내는 파이썬 웹 개발 초격차 패키지 96일차 (0)	2021.12.10
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 95일차 (0)	2021.12.09
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 93일차 (0)	2021.12.07
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 92일차 (0)	2021.12.06
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 91일차 (0)	2021.12.06