📕 [ TIL ] : 1일차_2022.04.18.(월)

[ 20220418(월)_오늘의 TIL ]

[ 오늘 한 공부 범위 ]

• 웹 프로그래밍 A-Z 기초 KDT 실무형AI웹개발자 2회차 : 1주차 (1-1~1-16) ~ 2주차 (2-1~2-8)
  
• 파이썬 문법 기초 KDT 실무형AI웹개발자 2회차 : 1-1~1-15
  

❓ Learn about ? : 새로 배운 것

이번년도 3월 경, 내일배움단 합류 전 웹개발, 앱개발 과정을 수강했었기에 이번에 새로 배운 것들만 다시 복기차원에서 적어보았다. 자세한 코드는 나의 GitHub_에 게시할 예정이다.

vscode, mac, python3.x 환경에서 모든 코드를 작성하였다.
가상환경은 venv, anaconda 다 써봤는데 설정도 나중에 포스팅해야겠다.

사용한 Visual Studio Extension : live session, 단축키 ⌘L ⌘O

CSS : 뭔가를 꾸민다 = 가리킬 수 있어야 꾸미기 가능

HTML : 줄맞추기 중요, 단축키 안먹을땐 영한전환

style 뒷배경 세트 코드 : (같이 모여다닌다)

background-image: url(https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg);
                background-size: cover;
                background-position: center;

margin auto : 상하좌우 최대한 민다 (바깥여백)

(구글 웹 폰트 이용)
폰트넣기 : 타이틀 아래 link href= ~, <style * { font-family ~

CSS 파일 분리 : css파일 하나를 같은 폴더 내 만들어준다

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

부트스트랩 가져오기 (버튼에 가져올땐?) : <button class=""~ >

display flex 이용하면 flex안 내용물 정돈됨 :
background, flex는 저렇게 3줄, 4줄 모여다님

<style>
          .mytitle {
              background-color: green;
              width: 100%;
              height: 250px;

              background-image: url(https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg);
              background-position: center;
              background-size: cover;

              color: white;

              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
          }
      </style>

mytitle 안의 button은 이렇게 표현하자 :
solid white : 선굵기가 흰색이고 실선이다
transparent : 투명

.mytitle > button {
                width: 200px;
                height: 50px;

                background-color: transparent;
                color: white;
                border-radius: 50px;
                border: 1px solid white;
            }

hover : 마우스 올리면 실선 두꺼워지는 효과

.mytitle > button:hover {
              border: 2px solid white;
          }

이미지 어두워지게 조절 (0.5 수치 조절하면 밝고 어두움 조절 가능)

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg);
              background-position: center;
              background-size: cover;

마진 상하좌우 조정

.wrap {
              width: 1200px;
              margin: 20px auto 0px auto; 
          }

막간 이모티콘 모음 링크

그림자 들어간 포스트박스 CSS : box-shadow

.mypost {
              margin: 20px auto 0px auto;
              background-color: green;
              width: 500px;
              box-shadow: 0px 0px 3px 0px gray;
              padding: 20px;
              
          }

버튼 묶어줄때 하나씩 해서 flex로 묶기
오류 코드 :

<div class="d-grid gap-2 d-md-block">
              <button class="btn btn-primary" type="button">기록하기</button>
              <button class="btn btn-primary" type="button">닫기</button>
          </div>

모바일처리 : %

.wrap
max-width: 1200px;
              width: 95%;

.mypost
max-width: 500px;
              width: 95%;

자바스크립트 : 브라우저가 알아들을 수 있는 언어
alert 스펠링 주의 (오타로 꽤나 오류났었음)
script 안에 쭉 ~ 써내려가는게 자바스크립트
사실상 콘솔창이 스크립트창이랑 똑같은 것
script부분이 흰 화면(로드 안된 화면)에서 먼저 읽힘

1주차 숙제 > 나의 한계는?
샘플파일쪽 양옆너비 구현을 잘 못했었다.

피드백 후

자세한 코드는 나의_Git 에 올릴 예정이다. (얼른 올려야겠다..!)

짝.홀수 판단 방법 (javascript 복습) > js, jQuery, Ajax문법은 html 파일의 script에 들어가 요긴하게 쓰인다.

let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0입니다.
let odd = 5;
console.log(odd % 2); // 2로 나눈 나머지가 1입니다.

짝.홀수 onclick 함수
(홀짝버튼, onclick="hey()"를 button 속성에 넣어준다)
함수는 script에 작성
(여기에 Ajax까지 들어가면 버튼 속성에 id값도 필요하다! class필요했던 것처럼)

<script>
      let count = 1;
      function hey() {
          if (count % 2 == 0) {
              alert('짝짝👏');
          } else {
              alert('홀홀🎅');
          }
						count += 1;
      }
  </script>

jQuery 사용 전 html에 import를 꼭 해줘야 한다.
(사용한다는 선언)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery가 뭘까요?
js library = jQuery (js의 더많은 기능 모아놓은거, CSS 부트스트랩처럼)

❓ 스스로 질문 및 피드백

• ‘스스로 질문’을 코드를 작성할때 옆에 써놓았었는데 한 곳에 모아놓아야겠다.
• 이번 스스로 질문은 파이썬 공부할때 많이 나왔다. → 파이썬 공부파일에 첨부해야겠다.
• 깃허브 에 파일을 커밋하자
• velog TIL을 쓰면서 기술 블로그는 어떻게 쓰는건지 차차 익혀가자
• TIL 말고도 다른 내용도 velog에 기술해보자 → 이를 노션에서 데이터베이스로 볼 수 있게 표로 정리해보자 (직관적으로 볼 수 있게)

📗 오늘의 후기

• 1주차 후기 : 동물의 숲 집 자랑하기 사이트를 팬명록 html을 응용해 만들었는데 (실제로 동물의 숲 섬꾸미기 했을 당시 잘 꾸며진 섬의 샘플파일을 찾아다니면서 갤러리에 저장하는 것이 꽤나 시간이 걸리는 작업이라) 추후 여느 게임 피드백 사이트(어떤 기능 추가해주세요, 무슨 업데이트 바랍니다 등)이나 아니면 자신의 쿠킹덤 왕국(왕국, 레벨업 등)을 자랑할 수 있는 팬(fan)사이트나 (크롤링을 이용한) 카테고리 모아보기같은 기능을 추가하고 싶다. 메인 화면에 카테고리별, 날짜별 분류 버튼이나 검색기능을 넣어서 작성자로 찾기 등 혹은 업데이트내역 볼수있는곳도 추가해보고 싶다. 공략사이트나 여러 게임 팁 등 공유할 수 있는 사이트를 만들어보고싶다.
  
• 2주차 진행중 후기 (~ing) : 오늘 해본 것 - 자바스크립트를 통한 페이지의 움직임 구현 ~ ing 후기 ) JQuery 부분이 가장 어려웠다. (11시간 경과 즈음이었어서 집중력이 더욱 흐트러졌었다) 다시 복습하게 되어 참 다행이다..!
  

🌱 마치기 전

팀원분들도 운영진분들도 멘토님들도 다들 서로 파이팅 해주셔서 긴 시간동안 (무려 12시간!)의 학습을 무사히 마칠 수 있었다!! (첫날이라 아직 적응이 안되어서 힘들기도 했는데, 그만큼 스파르타식 코딩은 빠른 적응이 필요한 커리큘럼이구나를 다시한번 느꼈다..!) 멘토님이 쓰러지지만 말고 잘 따라오라고 해주셨다..! (헉) 아직 많이 부족하지만 언젠가 다시 돌아보면 성장할 것이라 믿고 오늘 하루를 마친다!

PS.빠른 시일내에 깃허브를 활성화시켜서 커밋해야 할 것만 같다 (파일이 넘쳐난다..)