[내일배움단 ai트랙 3기] TIL 220829

[내일배움단 ai트랙 3기] TIL 220829

2022. 8. 30. 00:43ㆍ스파르타코딩클럽[AI트랙 3기]/TIL

22.08.29

오늘 본격적으로 개강이 시작되었다. 아.. 첫단추를 잘 꿰야하는데, 이거 이상한다 끼운거같기도 하고... 돌이킬 수 없다. 죽던지 끝까지하던지 둘중에 하나다. 시작했으니까... 본격적으로 출석체크도하고 하루 12시간 코딩... 진짜 양심적으로 말하면 딴짓거리하느라 4시간도 집중안한듯하다.. 얼른 팀원들에게 도움이 되어야할텐데 다른분들은 다 각자 잘하시는 것 같다. 나는 뭘해야할지 모르겠다...!! ㅋㅋㅋㅋ 이렇게 막막할 수가 있나. 첫 실무갔을때 느낌이 들었다....ㅠㅠ 오늘은 개인페이지 작성 마무리했고, 웹개발 강의를 처음부터 다시 들었다. 2주차까지는 완료할 계획이었으나... 집중못하는 바람에.. 낼부터 휴대폰 던진다. 우선 낼 수업전에 2주차 숙제를 제출하는 것이 목표. 할 수 있다. 음 그리고 튜터님과의 1대1 면담도 있었다. 자세한 내용은 아래에 적어두어야겠음. 그래도 첫번째 들을때는 도대체 무슨 소리를 하나 했는데 이 번에는 그래도 아, 여기서 이런게 쓰이는구나... 정도? 아직 내 머리속으로 이상황에서는 이걸 써야지하는 연상은 되지않는다. 튜터님께서 반복하고 익숙해지면 된다하셨는데... 믿는 수 밖에... 힘을 내고 낼부터는 더 집중한는 개발꿈나무가 되기를~~~~ 화이팅!

*실습 내용

ㅁ개인페이지 작성(완료)

1)container2에 이미지 수정
-<img src="url"> container2에 들어있는 모든 사진에 class를 걸어줄 수 있는가? -> 가능
<img class="img" src="url">, <img src="url" class="img">둘다 상관 없음. html에서 묶어주고 css가서 그림자 추가 해줌.
-이미지에 그림자 추가
filter: drop-shadow(10px 6px 6px #3c3c3) <css>
-크기, 길이,테두리 다 한 곳에 넣기
원래는 html에
< width="200px" height="250px" style="border-radius: 20px">해주는데, 이것을 css로 옮긴 후
width:200px;
height:250px;
border-radius : 20px;
해주면 정상적으로 작동.

2)item1,2/main에 그림자 효과
각각 box-shadow: 10px 10px 10px 1px #d8d8d8;<css>

3)item 1 수정
- tmi zone이라는 제목을 가운데로 옮기기
h1도 class 먹일 수 있음.
<h1 class="st">해서 css 가서 text-align:center;
-글자 여백 주기(안쪽 여백 > 패딩)
padding상 우 하 좌<css>
4)폰트 바꾸기
구글 폰트 주소 : https://fonts.google.com/?subset=korean
들어가서 link부분에 맨 밑에거만 복사해서 title 밑에 붙여넣기
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
그다음 밑에 CSS rules 적힌 부분 복사해서 <style>에 *{}안에 넣어줌.
+)주석처리 : crtl+/(주석은 html, css, js 다 다르게생김)
+)css 파일 분리 : 제목.css 한후 css style 부분의 모든 것을 잘라내기 하고 파일에 붙여넣음. 그 후 <llink rel="stylesheet" type="text/css" href ="제목.css">

*code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>아우디팀_자기소개_정진엽</title>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <style>
        *{
           font-family: 'Jua', sans-serif;
        }
        .item1{
            background-color: #73F1E8;
            border-radius: 20px;

            flex-grow:2;

            letter-spacing: 1px;
            line-height: 40px;

            font-style: normal;
            font-weight : bold;

            box-shadow: 10px 10px 10px 1px #d8d8d8;
            margin-right: 50px;

            padding-left : 30px;

            width : 600px;


        }

        .item2{

            text-align: center;

            background-image :url("https://postfiles.pstatic.net/MjAyMjA4MjdfMjQ3/MDAxNjYxNTY3MjY2Mzkw.5K6mObyWzUGc2-9arMdmUUxuia-lRp63GGjDcpvlLjIg.KNESPUj1XRPpsCWF0q0X5z1PWk6L8NMmHNyclm2iXm0g.JPEG.yeobdol/IMG_3566.JPG?type=w580");
            background-size : cover;
            background-position: center;
            border-radius: 20px;

            flex-grow:1;

            width: 260px;

            box-shadow: 10px 10px 10px 1px #d8d8d8;

        }
        .item3{
            #background-color: aqua;
            background-size : cover;
            background-position: center;
            border-radius: 20px;

            flex : 1 1 0;

            text-align :center;

            font-weight : bold;

            #box-shadow: 0px 0px 10px 0px #d8d8d8;

        }
        .item4{
            #background-color: aqua;
            background-size : cover;
            background-position: center;
            border-radius: 20px;

            flex : 1 1 0;

            text-align :center;

             font-weight : bold;

            #box-shadow: 0px 0px 10px 0px #d8d8d8;
        }
        .item5{
           #background-color: aqua;
            background-size : cover;
            background-position: center;
            border-radius: 20px;

            flex : 1 1 0;

            text-align :center;

             font-weight : bold;

            #box-shadow: 0px 0px 10px 0px #d8d8d8;
        }
        .item6{
            #background-color: aqua;
            background-size : cover;
            background-position: center;
            border-radius: 20px;

            flex : 1 1 0;

            text-align :center;

             font-weight : bold;

            #box-shadow: 0px 0px 10px 0px #d8d8d8;
        }


        .container1{
            display:flex;
            flex-flow: row wrap;


            #border: 1px solid black;

            height: 500px;

        }
        .container2{
            display:flex;
            flex-flow: row wrap;

            #border: 1px solid black;

            height: 300px;
            #justify-content: space-around;

        }
        .add{
            padding-left:6.1em
        }

        .main{
            #border: 2px solid black;
            background-color: grey;
            border-radius:20px;

            width: 1350px;
            font-size : 25px;
            font-weight: bold;

            box-shadow: 10px 10px 10px 10px #d8d8d8;
        }
        .footer {
            grid-area: footer;
            font-size: small;
            font-weight: 100;
            text-align: center;
            margin-top: 15px;
            color: #c6c6c6;
        }
        .img{
            filter:drop-shadow(10px 6px 6px #c3c3c3);

            width:200px;
            height:250px;
            border-radius : 20px;
        }
        .st{
            text-align: center;
        }

    </style>
</head>
<body link="#ff0000" alink="#00ff00" vlink="#0000ff">
    <h5>자기소개_정진엽</h5>
    <div class="container1">
        <div class="item1">
        <h1 class="st">&#128680;T.M.I ZONE&#128680;</h1>
        &#128512;MBTI : ENTJ-T<br>
        &#128513;장점 : 포기를 잘 안한다. 상황판단이 빠르다. 처세에 능하다.<br>
        &#129309;협업 스타일 : 상황에 맞게 내가 이끌어야 한다면 이끌고, 그렇지 않다면 따른다.<br>
        &#127984;궁극적 목표 : 건강하게 개발을 오래할 수 있는 개발자가 되는 것.<br>
            &#128421;블로그 주소 : <A href="https://pocachips.tistory.com/" target="_blank">티스토리 - https://pocachips.tistory.com/</A><br>
                <div class="add"> &emsp; <A href="https://velog.io/@_pocachip" target="_blank">VELOG - https://velog.io/@_pocachip</A><br>
                 &emsp;<A href="https://blog.naver.com/yeobdol" target="_blank">네이버 블로그 - https://blog.naver.com/yeobdol</A><br></div>
        &#129335;취미 : 여행, 축구, 웨이트, 전시감상, 커피, 글쓰기, 보드(스노우, 웨이크, 크루즈),<br>
            &emsp;&emsp; &emsp;&emsp;등산, 달리기, 주짓수, 복싱, 태권도, 피아노, 트럼펫, 사진, 음악 감상, 음주(위스키),<br>
            &emsp;&emsp; &emsp;&emsp;싸이클, 수영, 수집(신발, 축구유니폼, 옷), 공연관람
            </div>
         <div class="item2">
        </div>
        </div>
    <br>
    <div class="container2">
        <div class="item3">
            <img class="img" src="https://postfiles.pstatic.net/MjAyMjA4MjhfMjk2/MDAxNjYxNjQ2MjY0NDg3.ubPr51kLcI0hbUsW5Jne-TZYKDMm-UJ8GUub2N_B26gg.JgXiVFnGeg5c9se2qHsp11pUZH9xDpi0Cp8GbA7ebhEg.JPEG.yeobdol/IMG_0175.jpg?type=w580"><br>
                &#9992;여행을 좋아하구요
        </div>
        <div class="item4">
            <img class="img" src="https://postfiles.pstatic.net/MjAyMjA4MjhfNzIg/MDAxNjYxNjQ2MjY0Njkx.Lw4eS8osES_e4OOvorOhftcNabAB-28h1TEjIH-bijQg.Gs1f9xxFpep9Yj4abiJ1fLwNPcyGAJF2EAnetl1GFxsg.PNG.yeobdol/IMG_5192.png?type=w580"><br>
            &#128187;<A href="https://www.instagram.com/_pocachip/" target="_blank">SNS</A>도 열심히 합니다!
        </div>
        <div class="item5">
            <img class="img" src="https://postfiles.pstatic.net/MjAyMjA4MjhfNjQg/MDAxNjYxNjQ2MjY0NjI2.OSIA4jkjweGFPkml1gRIjk4rUsNo6xT78TF5jmmqK7gg.k0081GZealC93LAmE9hG2hwNzuAJOhmE58Z1Nw25Dh8g.JPEG.yeobdol/IMG_5191.jpg?type=w580"><br>
            &#128095;수집하는 것을 즐기구요
        </div>
        <div class="item6">
            <img class="img" src="https://postfiles.pstatic.net/MjAyMjA4MjhfMTc4/MDAxNjYxNjQ2MjY0NTA0.gNvnPXU_gcVrZNcvoF3tAYhNx0TfenAihkYRyL6OPr0g.6NIAt8TzGfncpJmUJQBFsy8JVkIsZZKu-BTV3mwwqrcg.JPEG.yeobdol/IMG_1229.jpg?type=w580"><br>
            &#9968;최근에는 등산에 빠졌어요!
        </div>
            </div>

    <p>
    <div class="main">
        &#128266;저를 한마디로 소개하자면 딱히 잘하는 것은 없지만 못하는 것도 없는 사람입니다.<br>
        &#128266;한 분야에 깊게 빠지기 보다는 여러가지 다 해보고 죽자는 마인드로 열심히 사는 사람입니다.<br>
        &#128266;개발공부를 이제 막 시작했는데 늦었다고 생각 안합니다.<br>
        &#128266;정신과 육체가 건강하고 발전을 멈추지 않는 개발자가 되는 것이 저의 꿈입니다!
    </div>
    <div class="footer">copyright 2022. JEONG JINYEOB All rights Reserved. </div>
</body>
</html>

ㅁ웹개발 종합반 복습(0주차 ~ 2주차 7강)

*1주차

ㅇflex활용하는 방법
display:flex;
flex=direction: column;
justify-content: center;
align-items:center;
ㅇ버튼에 바로 속성 먹여주는 법
<style>에서 .mytitle > button{} 해주면됨.
ㅇ배경화면 색깔을 투명하는 방법
background color: transpatent;
ㅇ버튼에 마우스 올렸을때 선 굵어지게 하는 방법
.mytitle>button:hover{
border: 2px solid white ; }
ㅇ배경 이미지를 어둡게 하기
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
ㅇ콘솔창 활용해서 개발하기
코드를 따로 파이참에 안쓰고 콘솔창에 바로써서 웹페이지의 반응을 볼 수 있음.

ㅇ1주차 과제 code

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <style>
        .mytitle {
            background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fpost.phinf.naver.net%2FMjAyMTExMTJfMjU3%2FMDAxNjM2Njg2ODM1MzI0.MhsU7fa4VEZ6RNsKoi_pShwVCqBaGmGiCrR48EzV-9Mg.ymdvMxVwChByHAYxs7z9wsHWkdrlUtbAv9ls2_H7eMkg.JPEG%2FIYY5YQYGYObdjEowjv2RahaMlvh4.jpg&type=sc960_832");
            background-position: center;
            background-size: cover;

            width: 100%;
            height: 250px;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .card{
            margin: 10px auto 0px auto;
            padding : 10px;
            width: 500px;

            align-text: center;
        }
        .mypost{
            max-width:500px;
            width:95%;

            margin : 20px auto 0px auto;

            box-shadow: 0px 0px 3px 0px gray;
            padding:20px;
        }
        .mybtn{
            margin-top:20px;
        }
        .cards{
            margin-top:50px;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>창모 팬명록</h1>
    </div>

    <div class="mypost">
      <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
          <label for="floatingInput">닉네임</label>
      </div>
      <div class="form-floating">
          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
          <label for="floatingTextarea">Comments</label>
      </div>

    <div class="mybtn">
            <button type="button" class="btn btn-dark">응원댓글남기기</button>
            </div>
        </div>

    <div class="cards">
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨 <cite title="Source Title"></cite></footer>
                </blockquote>
            </div>
        </div>
    </div>

</body>

</html>

*2주차
ㅇjquery
-js를 쉽게 쓰도록 짜둔 것(css의 부트스트랩과 동일)
-jquery사용을 위해 남이 만든 코드 가져와야함.
-부트스트랩 탬플렛에는 포함이 되어 있지만, 부트스트랩 안쓸거면 추가 해줘야하는 코드가 있음.(구글링 필요)
-제이쿼리는 class대신에 id 써줌.
-콘솔창 입력 $('#id').val('입력하고 싶은 내용') 콘솔->웹페이지 / 출력 $('#id').val() 웹페이지->콘솔
-class값과 id 값을 동시에 주는 것 가능.
-문자열을 html로 바꿔주기
< button>버튼</button>조차도 콘솔에서는 그저 문자열에 불과(html아님). 그런데 이것을 html로 바꿔줄 수 있는데 그것이 바로 $('#id').append(temp_html)하면됨(단, let temp_html을 위에 먼저 써줘야함)
let temp_html = `html로 만들고 싶은 부분을 넣어주세요`
하고 콘솔창에 입력해주면 바로바로 반응함.
-temp_html에서 그때그때 내용이 바뀌는 경우 : 변수를 꽂아줘야함. 방법은 ${변수} 하면 내용이 계속 바뀔 수 있음.
-버튼 누르면 나오고 다른 버튼 누르면 사라지게 하는 것 해보기
<script>안에다가 function open_box(){} / function close_box(){} 하고 html <button>에서 <button onclick="open-box()">
다시 <script>로가서 $('#post-box').show() 하면 상자 등장(닫기는 .hide() 해줌.

ㅁ이창호 튜터님 면담

-아이스 브레이킹 : 여행과 취미에 관한 고찰(주로 스쿠버 다이빙 경험), 내배캠 전 나의 행적(전공, 전에 하던일 등)

-면담의 목적 : 특별한 것은 없고 어려웠던 것이나 건의사항 등 파악.

-나의 질문

1)분업을 어떻게 하나?

프론트/백엔드 하는 팀도 있고 다양하다. 다양한 편집기를 활용하는데 vs코드에 라이프 쉐어(?)가 있어 다같이 동시에 편집이 가능하다. 나중에는 깃허브를 사용하게 될 것이다.

2)코딩을 하다가 막히는 부분이 유난히 많은 것 같은데 어떻게 해야할지 잘 모르겠다.

해답은 에러메세지에서 찾을 수 있다. 에러를 복사해서 구글링하면 수많은 사람들이 겪었던 오류중하나임을 알 수 있다. 필요한 것을 잘 찾는 것은 개발자가 갖추어야할 중요한 역량이다.

3)개발자로서 외주를 받아서 일을 할 수 있는 것으로 아는데 루트가 어떻게 되나?

보통 인맥을 타고 받거나 또는 외주 프리랜서로 등록하는 방법이 있다. 이바닥은 인맥관리가 중요하다. 오퍼 받아서 가는 경우도 있고..

4)개발자로서 건강하게 살 수 있나?(밤샘 근무등에 관한 우려)

당연히 건강관리 하기 힘들다. 하지만 통장에 꽂히는 돈을 보면서 금융치료라는 것을 한다.

5)지방에서 나고 자랐고 지방을 거점으로 생활하고 싶은데 지방에도 회사가 있나?

대부분 수도권이다. 초반에는 서울에서 보증금 없이 고시원 생활하면서 중기청 대출받아서 전,월세 자취방 구하는 경우가 많다.

'스파르타코딩클럽[AI트랙 3기] > TIL' 카테고리의 다른 글

[내일배움단 ai트랙 3기]미니 프로젝트(6+발표) (0)	2022.09.01
[내일배움단 ai트랙 3기]미니 프로젝트(5) (0)	2022.08.31
[내일배움단 ai트랙 3기]미니 프로젝트(3) (2)	2022.08.29
[내일배움단 ai트랙 3기]미니 프로젝트(2) (0)	2022.08.27
[내일배움단 ai트랙 3기] TIL 220826 (0)	2022.08.27

포카칩의 개발일지

포카칩의 개발일지

태그

최근글

댓글

공지사항

아카이브

'스파르타코딩클럽[AI트랙 3기] > TIL' 카테고리의 다른 글

관련글

티스토리툴바