개발일지1

y's·2022년 3월 23일

개발일지

목록 보기

1/36

.학습한 내용.

<!DOCTYPE html>
<html>
    <head>
<title>WEB</title>

<style>
    h1 {border-bottom:10px solid green;
   padding:30px;}
   #container{
       display: grid;
       grid-template-columns: 200px 1fr;
   }

</style>


     </head>

    <body>

<h1><a href="index.html">web</a></h1>
<div id="container">
    <ol>
        <li><a href="1.html">html</a></li>
        <li><a href="2.html">css</a></li>
        <li><a href="3.html">js</a></li>
    </ol>
    <div>
    <h2> Welcome</h2>
    Hello, WEB
    </div>
</div>
    </body>
</html>

먼저 전날 배운 내용들을 복습 한번 하고 자바스크립트를 배웠다.

아, https://analytics.google.com/ 구글애널리틱스에 가입하고 내가 만든 웹페이지의 방문자 기록을 확인하는 법도 구현.

<!doctype html>

<html>
<head>
    <title>WEB!</title>
    <meta charset="utf-8">
    <style>
     h1{
         border-bottom:10px solid red;
    padding:30px;
}



@media all and (min-width: 550px){ 
    #container{
    display: grid;
    grid-template-columns: 200px 1fr;
}
 }

        @media all and (min-width: 480px){ }




body{font-family: 'Source Serif Pro', serif;}

    </style>

    
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-04K14CW176"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-04K14CW176');
</script>


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@600&display=swap" rel="stylesheet">


</head>


<body>

    <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
">


    <h1><a href="index.html">WEB</a></h1>

<div id="container">
        <ol>
        <li><a href="1.html"> html</a></li>
        <li><a href="2.html"> css  </a></li>
        <li><a href="3.html">javascript</a></li>
        </ol>

        <div>
        <h2>Welcome!</h2>
         Hello <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">Web</a>
        
    </div>
    </div>

 
<p>
    me my <u><strong>mine.</strong></u> 
    <img src="https://images.unsplash.com/photo-1515890435782-59a5bb6ec191?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bG92ZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60" width="150"> 

<p>




    <div id="disqus_thread"></div>
<script>

/**

* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.

* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */

/*

var disqus_config = function () {

this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable

this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable

};

*/

(function() { // DON'T EDIT BELOW THIS LINE

var d = document, s = d.createElement('script');

s.src = 'https://daegu-ai-school.disqus.com/embed.js';

s.setAttribute('data-timestamp', +new Date());

(d.head || d.body).appendChild(s);

})();

</script>

<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    
</body>  
    </html>

※ 내 웹주소 ↓
https://nomadgogo.github.io/daegu-ai-school-web/

--- 자바스크립트 Javascript

HTML은 정보다.
CSS는 디자인이다.
Javascript는 사용자가 상호작용한다.

<html>
    <body>
<h1>Number</h1>
<script>
    console.log(1); //정수
    console.log(1.1); // 실수

    //operator
    console.log(1+1); // 2
    console.log(2-1); //1
    console.log(2*2); //4
    console.log(4/2); //2

    //함수
    console.log(Math.random());
    console.log(Math.PI);
    console.log(Math.floor(1.9));
    console.log(Math.floor(Math.random()*100));




</script>

<h1>문자열(string)</h1>
<script>

    console.log('Hello World');
    console.log("Hello World");
    console.log("Hello \
     World");
    console.log(`Hello 
    World`);

    console.log('Hello World'.length);
    console.log('Hell world'.replace('Hell','Hello'));
    console.log('Hello'+'World');

    console.log('1'+'1');
    console.log(1+1);


</script>

    </body>
</html>

기본적으로 문자열은 한줄에 다 표현해야 하는데,
역슬레쉬 또는 `` 사용해서 문자열 구분 가능

<html>
   <body>
       <script>
           console.log(1);
           console.log(2);
           console.log(3);


       </script>

1+1 <br>
<script>
document.write(1+1);
document.write('<br>');
document.write(Math.random());


</script>

<input type="button" value="Hello" onclick="alert('안녕')">


       </body>
</html>

<html>
   <body>
       <h1>Variable</h1>
<script>
   
   var a = 1;
   a = 2;
   console.log(a);

   let b=1;
   b=2;
   console.log(b);
   
   </script>

   <script>
let 가격 = 10000;
let 부가가치세율 = 0.1;
let 부가가치세 = 가격*부가가치세율;
console.log(부가가치세);

   </script>

   </body>
</html>

자바스크립트를 이용해서 대상을 타겟팅하고 프로그램적으로 그 대상을 동적으로 제어.

<html>
   <body>
       <script>
           console.log(1);
           console.log(2);
           console.log(3);


       </script>

1+1 <br>
<script>
document.write(1+1);
document.write('<br>');
document.write(Math.random());


</script>

<input type="button" value="Hello" onclick="alert('안녕')">


       </body>
</html>

버튼생성. 알람창 생성 등

.학습한 내용 중 어려웠던 점.

<input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
">

다크모드와 데이모드 화면 적용 버튼이 처음에 오류가 나서 계속 이상하게 표시가 됐었다. 아무리 다시 봐도 오타는 없었는데....

.해결방법 작성.

알고보니 내가 backgroundColor에서 저 C를 처음에 소문자로 적어서 적용이 안되었던 것...😑 차라리 오류라고 표시라도 해주면 쉽게 알아차릴 수 있었을텐데 오류 표시도 없고, 알파벳 한글자 대소문자 구분 안한 것 때문에 오류가 발생할 수 있다니..좀 충격.

그리고 F12번(마우스 우클릭-검사) 눌러서 console 에서 바로 작성하거나 비쥬얼 스튜디오 코드에서 작성해서 적용시키거나... 선택적인 것인가? 그 부분도 좀 헷갈린다. console 에서 한번 엔터 친 문장은 수정도 안되서 막 다 지우고 다시 쓰고 이랬는데, 적응이 잘 안된다..

.학습 소감.

어렵지만 재밌다...라고 말하고 싶은데 사실 재밌다라고 말하기엔 내 실력이 아직 너무 부족하긴 하다.; 그리고 내 노트북 속도가 좀 느려서.. 로딩하는 속도가 느리다보니 빠르게 따라잡기가 너무 힘들다.😭 자꾸 ping에 실시간으로 참여하라는데 ping이 로딩완료해서 뜨는 시간 기다리다가 수업 참여에 지장을 받을 정도다-_-😵‍노트북 바꿔야 하는데.. 여튼, 짧은 시간 안에 많은 내용들을 배우는 과정이라 초급자에게는 버거운 것이 사실이지만, 점점 지식을 쌓아가는 느낌(?)이 좋다. 더 발전할 수 있기를..

y's

다음 포스트