📌null과 undefined

• null 변수 초기화를 통해 명시적으로 빈 값을 변수 안에 할당한 상태
• undefined 변수를 선언만 한 상태
  ✔🛑**tip! 차이점**

1. typeof 어떠한 데이터 타입인 지 출력해줌 console.log(typeof null); -> object 왜 오브젝트인가? 태생적으로 가지고 있는 버그임! 수정못해! console.log(typeof undefined); -> undefined
   
2. console.log(null == undefined); true console.log(null === undefined); false
   
3. 부정문(!)

   console.log(!true); true의 반대 false
   console.log(!false); false의 반대 true

   console.log(!null); true console.log(!!null); true의 반대 false console.log(!undefined); true console.log(!undefined); true의 반대 false
   
4. 연산자 console.log(10 + null); null=0 console.log(10 + undefined); NaN(Not a Number)

📌참조타입

• ✅함수(function) 임의의 숫자 2개를 전달받아서 덧셈 기능 제작

  함수 선언(함수를 제작만 한 상태 (동작은 x))
  function sum() {
    console.log(10 + 10);
  }    

  함수 호출
  sum();
  여러 번 호출 가능!

• Parameter(매개변수) , Argument(인수)

  function sum(num1, num2, ...) {
    console.log(num1 + num2)
  }
  매개변수 : num1 ,num2

  sum(10,20); ✔30
  sum(100,50); ✔150
  인수 _ 호출 시 전달되는 값

  풀네임 호출
  function fullName(firstName, lastName) {
    console(firstName + "" + lastName);
   } 

  fullName("Chulsoo","Kim") 💯Chulsoo Kimm

📌자바스크립트 2번째

• 자바스크립트 코어

  ➡변수선언 var comic; (comic 박스를 생성한 상태) ➡변수 초기화 comic = "원피스"; (comic 박스 안에 원피스 데이터를 할당한 상태) console.log(comic); = 원피스 ➡변수선언&초기화(동시) var apple = "사과"; ➡ 변수 동시 선언 var a, b, c; ➡ 변수 동시 초기화 var d = 10 , e = 20 , f = 30;
  
• 작성 방법 캐멀 케이스 var mathScoreStudent = 10; 스네이크 케이스 var math_score_student = 10;
• *🛑주의점 * ✔ var math-score-student = 100; ( 사용 x ) ✔ var _math; var $math; 외 특수 문자는 사용할 수 없음 ✔ var 10apple; (숫자가 먼저 나올 수 없음) 의미가 불분명한 단어 사용을 쓰지 않기

데이터 타입 = 데이터의 종류

• 문자열 (String) var msg1 = "Hello World" (큰따옴표) var msg2 = 'Welcome' (작은따옴표) ✅ex) she's girl var msg4 = "She's girl"; var msg5 = 'She's girl';
  
• 숫자(Number)
• 논리

학습 소감

외울 게 산더미!!! 어렵지는 않은데 깔끔하게 정리되지 않아서 고민,

📌JavaScript

웹사이트에 좀 더 액티브한 느낌을 주기 위해 사용

• 활용 ✔ 하이브리드앱 ✔ node.js : 자바스크립트 언어로 제작된 서버 개발 도구 ✔ 자바IoT : 자바스크립트를 활용한 사물인터넷
  
• 인간에게 친숙한 하이 레벨 언어
  
• 특징 자바스크립트 코어 - 개발언어의 문법적인 언어 클라이언트 측 자바스크립트 - 브라우저 제어 서버측 자바스크립트 - node.js
  

• 설정하는 방법

1.src로 연동

<script src=""></script>

2. html에 < script > 태그 작성(다이렉트)

   <script>
   console.log("Welcome")
   </script>

• 주석 넣는 법

1./* */ (전체적인 주석) 2.// (한 줄 주석) ➡전체 주석 안에 한 줄 주석 넣을 수 있음!

자바스크립트 코어

학습소감

html, css 실습할 때 자바도 같이 넣고 싶었다. 배울 수 있어서 좋은데 아직은 기초 of 기초 단계라서 ...⭐ 빨리 강의를 듣고, 개인적으로도 정보를 찾고 난 뒤 실행해봐야겠다.

📌** 유튜브 메인 카피캣**

학습소감

간단해서 별 무리 없이 소화함

📌유튜브 왼쪽 영역 카피캣

✔check word-break 텍스트를 줄바꿈할 때 사용하는 속성값

• word-break : keep-all; 단어 단위로 줄바꿈
• word-break : break-all; 글자 단위로 줄바꿈

학습 소감

비교적 심플하고 간단해서 무난하게 넘어감
다만 줄바꿈이 마음에 들지 않아서 더 공부해야겠다는 생각이 듬 너튜브 소스를 자세히 살펴봐야겠다.

📌유튜브 상단영역 카피캣
✔check 강의에서는 로그인까지만 넣었지만 더 카피캣해보고 싶어서 이미지도 넣어봄 다만, 정렬이 제대로 안되서 구글링을 통해 새로운 속성을 알았음. 부모요소에 display:table ;를 넣고 자식요소에 display:table-cell; vertical-align:middle;를 넣으면 수직,수평 가운데 정렬이 깔끔하게 된다, 다만 왜 되는가! 왜 이런 설정을 하는가에 대해선 더 공부해야함..

학습소감

트위치 상단영역과 비슷해서 별 무리는 없었다.

CSS 부가 설명

reset , normalize

• reset default로 설정된 css 스타일 초기화하는 작업 0부터 시작한다는 느낌?? ✔참고 사이트 https://meyerweb.com/eric/tools/css/reset/
  
• nomalize 브라우저별 디자인스타일 오차를 줄이기 위한 작업 reset처럼 다 갈아엎는 작업은 아님 최근 많이 사용하고 있음 단, 익스플로러에선 지원안됨! ✔ 참고사이트 https://necolas.github.io/normalize.css/

CSS 변수 자주 사용되는 값을 임의의 변수로 만드는 것 코드 양도 줄일 수 있고, 수정할 때도 편하고... 직관적인듯 자바스크립트에서도 사용!

학습소감

오늘은 추가 설명이다보니 큰 무리는 없었다. 트위치 카피캣에서 보던 희귀한 코드가 css 변수였다는 걸을 알아서 꿀잼!

📌트위치 홈페이지 카피캣 마무리

✔check! 애니메이션 적용

.video-section .video-wrap .image-wrap img {
    width: 100%;
    height: 100%;
    transition: transform 0.15s linear; }

.video-section .video-wrap .image-wrap:hover img {
    transform: translate(10px, -10px); }

학습소감

오늘은 특별히 어려운 점은 없었다.

📌트위치 홈페이지 콘텐츠 영역 카피캣

✔checkpoint!

• 이미지 삽입, 크기설정 css

  background: url('../img/notebook.jpg') no-repeat center;
  background-size: cover;

• 크기 조정 부모 min-width값이 정해져있음에도 불구 하고 자식 포지션 값이 absolute이다보니 부모의 width가 불명확해지면서 요소들이 어그러짐 부모 포지션 값을 relative로 설정하면 기준이 브라우저로 되면서 min-width 값이 작동됨!

학습소감

트위치가 비교적 최근에 만들어진 홈페이지이다보니 디테일적으로 잡아야할 부분이 더 많은 것 같다. 연습을 많이 해야할듯!

📌트위치 왼쪽영역 카피캣 간단한 부분이라서 코드작성은 빠르게 했음 정렬 부분을 세밀하게 잡는 작업이 오늘의 포인트 !

상단영역 브라우저 크기를 줄였을 때 상단 부분 정렬이 으스러지게 된다. 이럴때는 min-width 값을 설정해야함! (설정 후)
왼쪽영역 스크롤 왼쪽영역 부분에 따로 스크롤을 넣기 위해선 position 값을 fixed로 설정! fixed로 설정하면 위치기준이 브라우저로 됨. overflow-y의 값을 auto로 설정하면 스크롤이 나옴! 스크롤 디자인은 자바스크립트로 하는 듯?

학습소감

스크롤 넣는 방법을 새롭게 알아서 재미있었다.

📌네이버오디오클립-카테고리 카피캣 지난 강의 부분이지만 깜빡해서 오늘했다(머쓱) 비교적 간단한 부분이라서 쉽게 끝낼 수 있었음!

✔정렬부분 ul을 정렬할 때 space-between을 주로 사용했었는데 li 가 많을 경우 width값을 정해놓지 않는다면 between 정렬이 깨지게 된다.
이럴때 justify-content의 값을 flex-start로 설정하고 margin 값을 설정해주면 깔끔!
✔nth-child부분 박스 부분 컬러를 다양하게 주고 싶다면 가상선택자 nth-child를 사용!

• nth-child(odd)= 홀수 요소
• nth-child(even)= 짝수 요소

📌트위치 상단영역 카피캣 상단 부분은 스크롤을 내려도 고정이 되어있기 때문에 position의 값을 fixed로 설정!

학습소감

뜬금없지만 class 이름 정하는게 가장 어렵지않나...? 라는 생각이 든다.

📌네이버 오디오클립 홈페이지 오른쪽 카피캣 aside 부분 선생님과 다르게 소스를 작성했다. 노란색 박스 부분을 after로 넣었는데 괜히 이렇게 넣었나라는 생각도 들고... 위치 설정도 은근 어려웠고..

학습소감

vertical-align이 까다롭다는 생각이 들었던 실습! position과 display가 헷갈려서 그렇다는 얘기겠지...

📌네이버 오디오클립 홈페이지 왼쪽영역 혼자서 하느라 속도가 더디다...😂

오늘의 오디오 클립 부분 크롬으로 검사하다가 텍스트 줄바꿈 부분에 대해 공부하고 싶어서 따로 찾아봄! world-break , word-wrap ,white-space!

button 부분 위치 설정이 어렵다. 애매모호!

학습소감

반복되는 부분이 많아서 혼자서 해보자라는 다짐으로 하고있는데 쉽지 않다... 근자감 이었던 것인가!!!

📌네이버esports 홈페이지 오른쪽 영역 카피캣 구글 웹폰트를 통해 폰트를 나눔고딕으로 바꿔봄!
✔구글웹폰트 사이트 https://fonts.google.com/

📌네이버 오디오클립 상단 영역 카피캣 혼자서 만들어보고 있는 중!

학습소감

오디오클립 헤더부분이 이전 사이트 헤더보다 까다로워서 헤매고 있다. 혼자서 해보려고 하지만 선생님의 강의 참고 더해야할 듯!

📌네이버 e스포츠 사이트 메인 왼쪽 카피캣 (수정 중)

학습소감

디테일을 혼자서 잡아보고 있는 중!

📌네이버 e스포츠 상단영역 카피캣 최상단 부분은 스크콜해도 고정되어 있는 상태이므로 display :fixed로 설정!

(수정 중)

학습소감

배치가 잘못된 것 같다. 왼쪽으로 쏠린 듯한 이 느낌 매우 찝찝;; float로 배치할까..? 크롬을 통해 비교하면서 복습을 필히 해야겠다는 생각이 든다. 배치는 잘한다고 생각했는데 오늘은 실수투성이😢

📌네이버 게임 카피캣 2

vistior-section

popular-section1

popular-section2

news-section (수정 중)

학습소감

아직 순위 제작은 미숙하다. 갈 길 멀어 ㅠㅠ

📌네이버 게임 사이트 카피캣 1 자바스크립트 기반 CSS으로 구성!

box-shadow 참고사이트 https://cssgenerator.org/box-shadow-css-generator.html

✔헤더 부분

✔섹션 1

✔섹션 2,3

✔섹션 4,5,6

학습소감

아직도 포지션이 헷갈린다😥 포지션 안쓰면 안되겠지!!(?) 만들기 전, 공통되는 속성을 체크! id 와 class로 설정해서 소요시간을 줄일 수 있도록 노력해야겠다

📌네이버 TV연예 카피캣3 오른쪽

  <div class="ent-right">

       <div class="ent-banner"></div>

             <div id="ent-section-10">
                 <div class="title-wrap ent-flex-between">
                      <h3>많이 본 TV연예 뉴스</h3>
                      <a href="#" class="more">더보기</a>
                 </div>

                   <ol>
                       <li>
                           <a href="#">
                               <span class="rank">1</span>
                               <p>헌법재판소 재판관은 정당에 가입하거나 정치에 관여할 수 없다.</p>
                           </a>
                       </li>
                          <li>
                              <a href="#">
                                  <span class="rank">2</span>
                                  <p>대통령은 내란 또는 외환의 죄를 범한 경우를 제외하고는 재직중 형사상의 소추를 받지 아니한다.</p>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <span class="rank">3</span>
                                  <p>형사피고인은 유죄의 판결이 확정될 때까지는 무죄로 추정된다.</p>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <span class="rank">4</span>
                                  <p>대통령은 국회에 출석하여 발언하거나 서한으로 의견을 표시할 수 있다.</p>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <span class="rank">5</span>
                                  <p>국회는 법률에 저촉되지 아니하는 범위안에서 의사와 내부규율에 관한 규칙을 제정할 수 있다.</p>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <span class="rank">6</span>
                                  <p>헌법개정은 국회재적의원 과반수 또는 대통령의 발의로 제안된다.</p>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <span class="rank">7</span>
                                  <p>형사피해자는 법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다.(전문)</p>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <span class="rank">8</span>
                                  <p>[공식]대한민국의 국민이 되는 요건은 법률로 정한다.</p>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <span class="rank">9</span>
                                  <p>[속보]예비비는 총액으로 국회의 의결을 얻어야 한다. 예비비의 지출은 차기국회의 승인을 얻어야 한다.</p>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <span class="rank">10</span>
                                  <p>대한민국은 국제평화의 유지에 노력하고 침략적 전쟁을 부인한다.</p>
                              </a>
                          </li>

                      </ol>
                  </div>

                  <div id="ent-section-11">
                      <ul>
                          <li>
                              <a href="#">
                                  <div class="title-wrap ent-flex-between">
                                      <div class="title-left ent-flex-start">
                                          <span class="count">14</span>
                                          <h3>타이틀 1</h3>
                                      </div>
                                      <div class="icon-arrow"></div>
                                  </div>

                                  <div class="article-content ent-flex-between">
                                      <div class="content-left">
                                          <h3>서브 타이틀서브 타이틀서브 타이틀</h3>
                                          <span class="source">스타뉴스</span>
                                      </div>
                                      <img src="https://via.placeholder.com/70X70">    
                                  </div>
                              </a>    
                          </li>
                          <li>
                              <a href="#">
                                  <div class="title-wrap ent-flex-between">
                                      <div class="title-left ent-flex-start">
                                          <span class="count">14</span>
                                          <h3>타이틀 1</h3>
                                      </div>
                                      <div class="icon-arrow"></div>
                                  </div>

                                  <div class="article-content ent-flex-between">
                                      <div class="content-left">
                                          <h3>서브 타이틀서브 타이틀서브 타이틀</h3>
                                          <span class="source">스타뉴스</span>
                                      </div>
                                      <img src="https://via.placeholder.com/70X70">    
                                  </div>
                              </a>    
                          </li>
                          <li>
                              <a href="#">
                                  <div class="title-wrap ent-flex-between">
                                      <div class="title-left ent-flex-start">
                                          <span class="count">14</span>
                                          <h3>타이틀 1</h3>
                                      </div>
                                      <div class="icon-arrow"></div>
                                  </div>

                                  <div class="article-content ent-flex-between">
                                      <div class="content-left">
                                          <h3>서브 타이틀서브 타이틀서브 타이틀</h3>
                                          <span class="source">스타뉴스</span>
                                      </div>
                                      <img src="https://via.placeholder.com/70X70">    
                                  </div>
                              </a>    
                          </li>
                      </ul>

                      <div class="bottom ent-flex-between">
                          <div class="btn-wrap ent-flex-start">
                              <button class="btn btn-prev"></button>
                              <button class="btn btn-next"></button>
                          </div>
                          <a href="#" class="more">더보기</a>
                      </div>
                  </div>

                  <div id="ent-section-12">
                      <div class="title-wrap">
                          <h3>연예가 HOT 포토</h3>
                      </div>

                      <ul class="ent-flex-between">
                          <li>
                              <img src="https://via.placeholder.com/146x138">
                              <h4>탕수육 짜장면 짬뽕 깐쇼새우 옴뇸뇸</h4>
                              <span>중식은 아이 맛있어</span>
                          </li>
                          <li>
                              <img src="https://via.placeholder.com/146x138">
                              <h4>탕수육 짜장면 짬뽕 깐쇼새우 옴뇸뇸</h4>
                              <span>중식은 아이 맛있어</span>
                          </li>
                          <li>
                              <img src="https://via.placeholder.com/146x138">
                              <h4>탕수육 짜장면 짬뽕 깐쇼새우 옴뇸뇸</h4>
                              <span>중식은 아이 맛있어</span>
                          </li>
                          <li>
                              <img src="https://via.placeholder.com/146x138">
                              <h4>탕수육 짜장면 짬뽕 깐쇼새우 옴뇸뇸</h4>
                              <span>중식은 아이 맛있어</span>
                          </li>
                      </ul>
                  </div>

                  <div id="ent-section-13">
                      <div class="title-wrap ent-flex-between">
                          <h3>연예가 인터뷰</h3>
                          <a href="#" class="more">더보기</a>
                      </div>

                      <div class="heading ent-flex-between">

                          <div class="heading-info">
                              <h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
                              <span class="source">스포츠</span>
                          </div>

                          <img src="https://via.placeholder.com/70">
                      </div>

                      <ul>
                          <li><a href="#">동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</a></li>
                          <li><a href="#">동해물과 백두산이 마르고 닳도록</a></li>
                          <li><a href="#">동해물과 백두산이 마르고 닳도록</a></li>
                          <li><a href="#">동해물과 백두산이 마르고 닳도록</a></li>
                          <li><a href="#">동해물과 백두산이 마르고 닳도록</a></li>
                      </ul>
                  </div>

            </div>

css

#ent-main .ent-right {
    float: right;
    width: 324px;
    height: 2000px;
/*    background-color: pink;*/


     padding-left: 24px;
}

#ent-main .ent-right .ent-banner {
    width: 300px;
    height: 250px;
     background-color: green;

     border: solid 1px #000000;

     margin-bottom: 30px;
}

#ent-main .ent-right #ent-section-10 {
    padding-bottom: 12px;
    border-bottom: solid 1px #e8e8e8;
}

#ent-main .ent-right #ent-section-10 .title-wrap {
    margin-bottom: 8px;
}

#ent-main .ent-right #ent-section-10 .title-wrap h3 {
    font-size: 16px;    
}

#ent-main .ent-right #ent-section-10 .title-wrap a {
    font-size: 12px;
    color: #999;
}


#ent-main .ent-right #ent-section-10 ol {

}


#ent-main .ent-right #ent-section-10 ol li {
    margin-bottom: 10px;
}


#ent-main .ent-right #ent-section-10 ol li .rank {
    display: inline-block;
    width: 16px;

    font-size: 16px;
    color: #e2458f;

    text-align: center;

    vertical-align: middle;
}


#ent-main .ent-right #ent-section-10 ol li p {
    display: inline-block;
    width: 270px;
    vertical-align: middle;

    font-size: 12px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ent-section-11 {
    border-bottom: solid 1px #f2f2f2;
    padding-bottom: 24px;
}



#ent-section-11 ul {
    margin-bottom: 12px;
}

#ent-section-11 ul li {
    padding: 14px;
    border-bottom: solid 1px #f2f2f2;
}

#ent-section-11 ul a {

}

#ent-section-11 ul .title-wrap {
    margin-bottom: 10px;
}


#ent-section-11 ul .title-wrap .title-left {

}

#ent-section-11 ul .title-wrap .title-left .count {
    width: 20px;
    height: 15px;
    padding: 2px 4px;
    border: solid 1px #e2458f;

    color: #e2458f;
    font-size: 10px;

    margin-right: 8px;
}


#ent-section-11 ul .title-wrap .title-left h3 {
    color: #e2458f;
    font-size: 12px;    
}


#ent-section-11 ul .title-wrap .icon-arrow {
    width: 8px;
    height: 12px;
    background-color: #e2458f;
}

#ent-section-11 ul .article-content {

}


#ent-section-11 ul .article-content .content-left {
    width: 190px;

}

#ent-section-11 ul .article-content .content-left h4 {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;

    margin-bottom: 6px;
}


#ent-section-11 ul .article-content .content-left .source {
    font-size: 11px;
    color: #a6a6a6;
}


#ent-section-11 ul .article-content img {
    width: 70px;
    height: 70px;
    border: solid 1px #000000;
}


#ent-section-11 .bottom .btn-wrap {

}


#ent-section-11 .bottom .btn-wrap .btn {
    width: 24px;
    height: 24px;
    border: solid 1px #f2f2f2;
}


#ent-section-11 .bottom .btn-wrap .btn-prev {
    background-color: grey;
    border-right: none;
}


#ent-section-11 .bottom .btn-wrap .btn-next {
    background-color: yellow;
}


#ent-section-11 .bottom .more {
    font-size: 12px;
    color: #999;
}

#ent-section-12 {
    padding: 20px 0 2px;
    border-bottom: solid 1px #e8e8e8;
}



#ent-section-12 .title-wrap {
    margin-bottom: 12px;
}


#ent-section-12 .title-wrap h3 {
    font-size: 16px;
}


#ent-section-12 ul {

}


#ent-section-12 li {
    width: 146px;
    margin-bottom: 19px;
}


#ent-section-12 li img {
    width: 100%;
    height: 138px;
    border: solid 1px #000000;

    margin-bottom: 9px;
}


#ent-section-12 li h4 {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;

    margin-bottom: 5px;
}

#ent-section-12 li span {
    font-size: 11px;
    color: #898989;
}


#ent-section-13 {
    padding-top: 22px;
}


#ent-section-13 .title-wrap {
    margin-bottom: 8px;
}

#ent-section-13 .title-wrap h3 {
    font-size: 13px;
    color: #e2458f;
}


#ent-section-13 .title-wrap .more {
    font-size: 12px;
    color: #999;
}


#ent-section-13 .heading {
    margin-bottom: 8px;
}

#ent-section-13 .heading .heading-info {
    width: 210px;
}


#ent-section-13 .heading h4 {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

#ent-section-13 .heading .source {
    font-size: 11px;
    color: #999;
}

#ent-section-13 .heading img {
    width: 70px;
    height: 70px;
    border: solid 1px #000000;
}


#ent-section-13 ul {

}

#ent-section-13 ul li {
    margin-bottom: 8px;
}

#ent-section-13 ul a {
    display: block;
    width: 100%;
    font-size: 12px;
    color: #222;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


#ent-section-13 ul a:before {
    display: inline-block;
    content: '';
    width: 2px;
    height: 2px;

    vertical-align: top;
    background-color: silver;

    margin: 5px 5px 0 0;
}

학습 소감

별 무리에 잘 소화했음.

📌네이버 TV연예 카피캣2

학습소감

별 무리없이 수월하게 잘 따라하고 있다. 하지만 혼자서 연습할 땐 브레이크 밟듯이 막힐까...