학습한 내용

웹기초 HTML과 인터넷

html 생성후
chrome 에서
window - Ctrl + o - 브라우저 바로 열림
mac - Ctral + l - 브라우저 바로 열림

* tag
<u></u> : underline - 밑줄
<strong></strong> : 강조
<img src="주소" width="너비"> : 이미지 삽입
<br> : 줄바꿈
<h1></h1> : 제목태그 (이외에도 h2,h3,h4 등등)
<li></li> : 목록. ul의 자식.
<ul></ul> : li의 경계가 필요하기 때문에 같이 씀. li의 부모
<ol></ol> : 숫자 목록
<title></title> : 제목
<!DOCTYPE html> : 구조가 html이라는 것을 선언하는 것
<html></html> 
<head></head>
<body></body>
<a href="링크주소">단어</a> : 단어에 링크첨부 - 사이트 링크및 .html 형식도 가능함

* web과 internet은 같을까 다를까
 : 다르다. web은 internet에 소속되어있음. web과 아우르는 다른 것들이 있고 그 모든 것들이 internet에 포함되는 것임. 웹, 카카오톡, 게임등이 인터넷에 속하여 인터넷을 통하여 작동

CSS

*주석
ctrl + / : 자동으로 주석 변형

*<style></style> : head안에 생성하여 css작업하기

*우선 순위
 : 태그 -> class -> id : 순으로 뒤로갈수록 우선순위가 높음

*기본 style
 - background-color: 색; - 배경색 설정
 - border: 숫자px solid 색; - 테두리 생성. 테두리 굵기와 색 설정
 - border-bottom과 같이 원하는 방향에만 테두리 생성 가능.
 - 폰트 다운 : head안에서 다운받고자 하는 폰트 링크 코드 붙여넣기
 - 폰트 적용 예시 : 폰트가 적용되기 바라는 style 코드작성에 font-family: 'Lobster', cursive; 의 형식과 같이 폰트 적용코드 붙여넣기

*display
 - block level element : 공간 전체를 사용함. 기본으로 줄 바꿈이 됨 : h1
 - inline element : content 크기만을 사용함. 기본으로 줄 바꿈이 안됨 : a, img
 -> display: inline; or display: block; 으로 조정가능함
 - none : 없어짐

*여백
 - padding : content와 테두리 사이의 간격/공간
 - margin : content의 테두리 바깥의 공간
 - margin 겹침 현상 : 수직일 경우 margin이 겹침

*분배 (div등으로 공간 설정, 다른 것들도 됨)
 - display: grid; - 자식들을 분배하는 명령
 - grid-template-columns: 1fr 1fr 1fr; - 자식들을 순서대로 1:1:1 비율로 분배
 - grid-template-columns: 100px 1fr 1fr; - 자식들을 순서대로 100px고정 나머지를 1:1 비율로 분배.
 -> 화면 크기에 따라 100px로 설정된 것은 변함없고, 비율 설정된 것은 크기 변화 있다.

*화면 크기에 따른 반응형 변화
 - @media all and (min-width: 최소값px){코드작성}
 - @media all and (max-width: 최대값px){코드작성}
 - {코드작성} : style을 주고 싶은 태그{style 코드작성} / class는 .클래스이름{style 코드작성} / id는 #id이름{style 코드작성}

화면크기에 따른 반응

설정px보다 작을시
설정px보다 클시

JavaScript

이론 메모

*Java Script 실행법
 1) 웹 페이지 오른쪽 마우스 클릭 -> 검사 -> console : 대화형. 순차적으로 실행되면 많아지면 굉장히 복합해짐. 반복작업때 실패하면 수십번 작동이 됨.
 2) <body>안에 <script>만든 후 그 안에 값 입력

*웹페이지에서 java 써보기(console창)
 - 1+1 : 2 - 사칙연산 가능
 - math.random() : 1미만의 랜덤한 숫자가 나옴
 - math.random()*100 : 1미만의 숫자에 100만큼 곱한 값이 나옴
 - alert('메세지') : 팝업으로 메세지가 나옴
 - confirm('메시지') : undefined. 팝업으로 메세지가 나옴. 확인 누르면 true값. 취소 누르면 false값
 - prompt('메시지') : 팝업으로 입력란이 나옴. 입력하면 입력값. 취소 누르면 null값
 - 응용 : alert(Math.random()) : 랜덤한 숫자가 메세지로 나옴
 - 반복 실행 : alert(메세지);alert(메세지);alert(메세지); : 순서대로 메세지가 나옴. 사이에 ';' 붙여줘야 함

*프로그램으로 javascript 써보기
 - console에 나타나도록 실행 : console.log(메시지);
 - 웹 페이지에서 나타나도록 실행 : document.write(메시지);
 - 함수 넣을 시 새로고침 할 때 마다 새로운 값 나옴 : 예시 - document.write(Math.random());
 - 버튼 만들기, 버튼 안에 값넣기, 버튼 누르면 메세지 뜨게하기 : <input type="button" value="값" onclick="alert('메시지');">

*페이지 속성 바꾸기 예시
 - document.querySelector('body'); - body부분 선택
 - document.querySelector('#container') - id를 container로 지정한 부분 선택
 - document.querySelector('body').style.backgroundColor='black'; - body부분 배경색 검정색으로 바꾸기
 - document.querySelector('body').style.color='blue'; - body부분 글씨색 푸른색으로 바뀜

*응용(버튼 만들기 : 누르면 배경색과 글씨색이 바뀌는 기능)
 - body안에서 작성
 - <input type="button" value="night" onclick="document.querySelector('body').style.backgroundColor='black';document.querySelector('body').style.color='yellow';">
 - <input type="button" value="day" onclick="document.querySelector('body').style.backgroundColor='white';document.querySelector('body').style.color='black';">
 -> night버튼 누르면 배경 검정색, 글씨 노란색 / day버튼 누르면 배경 흰색, 글씨 검정색

syntax

<html>
    <body>
        <h1>Javascript</h1>
        <h5>html은 정보다. <br> css는 디자인이다. <br>
        javascript는 사용자와 상호작용한다. 반응형이다. 시간적이다.</h5>
        <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());
            document.write('<br>');
        </script>
        <input type="button" value="Hello" onclick="alert('안녕');">
    </body>
</html>

datatype

<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); //PI값
            console.log(Math.floor(1.9)); //정수값
            console.log(Math.floor(Math.random()*100)); //1~100미만의 정수값

        </script>

        <h1>문자열(String)</h1>
        <script>
            console.log('Hello world');
            console.log("Hello world"); // '' 또는 "" 둘다 가능하나 같은 것으로 열고 닫혀야 한다
            console.log('Hello \
            world'); //역슬래시 쓰면 다음줄에도 입력 가능하나 실제 줄바꿔진 건 X
            console.log(`Hello
            world`); //물결 즉 빽틱을 쓰면 역슬래시 쓰지않아도 다음줄에도 입력 가능하며 실제로 줄이 바뀜O

            console.log('Hello world'.length); //문자 개수세기. 띄어쓰기 포함
            console.log('Hell world'.replace('Hell','Hello')); //메시지 중 A단어를 B단어로 바꾸기
            console.log('Hello'+'world'); //합치기

            console.log('1'+'1'); //숫자를 문자로 입력하기 때문에 사칙연산이 아닌 합쳐짐. 값은 11

        </script>
    </body>
</html>

변수

<html>
    <body>
        <h1>Variable</h1>
        변수는 데이터에 이름을 붙인 것
        <script>
            var a = 1;
            var a = 2;
            console.log(a); // var는 같은 이름을 가진 변수에 재선언 가능. 이후 선언된 값으로 적용.
            
            let b = 1;
            b = 2;
            console.log(b); // let은 같은 이름을 가진 변수에 재선언 불가능
        </script>

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

응용 - 누르면 페이지 배경색, 글씨색 바뀌는 버튼 만들기

<!doctype html>
<html>
    <head>
        <title>WEB</title>
        <meta charset="utf-8">
        <style>
            h1{
                border-bottom: 10px solid red;
                padding: 30px;
            }
            #container{
                display: grid;
                grid-template-columns: 150px 1fr;
            }

            @media all and (min-width: 700px){ 
            body{
                background-color:green;
                font-family: 'Lobster', cursive;
            }
        }
        
            @media all and (max-width: 700px) {
            body{
                background-color:rgb(255, 117, 202);
                font-family: 'Lobster', cursive;
            }
        }
        </style>
        <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=Lobster&family=Smokum&display=swap" rel="stylesheet">
     </head>
    <body>
        <input type="button" value="night" onclick="document.querySelector('body').style.backgroundColor='black';document.querySelector('body').style.color='yellow';">
        <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>    

        <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>

응용 결과

night 눌렀을시
day 눌렀을시

어려웠던 점 또는 해결못한 것들

따로 없었다.

해결방법 작성

따로 없었다.

학습 소감

복습하니 다시 기억나고 좋은 것 같다 ㅎㅎ

Author And Source

이 문제에 관하여(HTML & CSS & JavaScript(1/3) 복습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jihye0914/HTML-CSS-JavaScript13-restudy

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

HTML & CSS & JavaScript(1/3) 복습