index.php 파일 실습

PHP

by 정혜리 2020. 12. 22. 04:16

index.html 파일까지 전부 지운 후, index.php 파일에서 실습 시작

-- php도 jsp처럼 html 문서를 포함할 수 있다.

아래 사진처럼 html 기본 틀 작성

해당 페이지를 모바일로 확인할 수 있다.

1. 휴대폰을 노트북과 같은 와이파이에 연결

2. cmd 실행 (내 컴퓨터는 관리자 권한으로 실행해야 가능했다)

3. ipconfig 명령어 실행

4. 무선 LAN Wi-Fi 부분의 IPv4 주소 값을 검색창에 입력

성공 화면

화면이 너무 작게 나옴 (웹페이지를 모두 보여주기 위해서)

>> 모바일 크기 관련 meta 태그 추가

viewport

: 화면상(display)의 표시영역

-- 모바일 브라우저는 viewport로 알려진 가상 window상에 페이지를 랜더링 한다.

initial-scale

: 페이지가 처음 로딩 될 때 줌 크기를 조정한다.

-- 0~10사이의 값이 온다. 1 은 원래 크기를 뜻하고, 0.5는 50% 축소를 뜻한다.

width=device-width

: 기기의 스크린 너비에 페이지를 맞춘다. 즉, 랜더링 영역을 기기의 뷰포트 크기와 같게 만든다.

스타일(css) 지정 방법

1. 인라인

: 태그 안에 스타일 지정

크롬 f12를 눌러 나오는 창의 element.style 부분에 표기된다.
확실한 적용 가능, 다른 css와 겹치는 부분을 덮어쓴다.
하지만 파일의 용량이 커지고, 유지보수시 보기 불편해서 잘 사용하지 않는다.

2. 내부

: head태그 안의 style태그에서 *지시자로 지정한다.

*지시자 : css의 대상이 되는 것으로 {}앞에 오는 부분이다. 예) div, #div2, .title

적용 우선 순위 : id > class > 태그 // 위치에 상관없이 적용
그래도 코드를 쉽게 보기 위해 우선 순위가 높은 것을 아래에 적도록 하자.
!important로 덮어쓰는 것을 막을 수 있다. ex) background-color:red !important ;
같은 id, class, 태그는 순서에 영향을 받는다.

3. 외부

: css용 문서를 외부에서 작성하고, 해당 html에 불러오는 것

(오늘 수업에서 다루지 않았음)

javaScript로 css 적용시키기

script 태그의 위치

body 태그 맨 끝에 두어야 문서 모든 부분에 적용 가능
head에 script태그를 두고 사용하고 싶다면
1. head의 script태그에 함수로 정의해두고
2. body 태그에 onload="함수이름()"을 추가하거나
3. script태그의 마지막에 window.onload = 함수이름; 를 추가해서 사용

태그 가져오는 방법

1. getElementBy

- 여러개를 가져올 때 getElementsBy~ 사용, 배열로 반환

- 종류 : ByTagName, ByClassName, ById

2. querySelector

- 여러개를 가져올 때 querySelectorAll 사용, 배열로 반환 (반환값이 하나여도)

- css가 쿼리를 찾는 방식을 그대로 사용 => 클래스는 .div , 아이디는 #div1

스타일 지정 방법

: 점(.)으로 연결하여 스타일을 지정한다.

* 기존에 - 가 들어간 스타일은 카멜표기법으로 바꿔 적용

ex) (X) background-color = "#000"; => (O) backgroundColor = "#000";

window.onload = tagLoaded;

: 문서의 로드가 끝나고 나서 실행한다.

* 나중에 실행하기 때문에 tagLoaded() 이렇게 사용하지 않는다. (현재는 함수 실행 결과가 undefined이다.)

* () 를 붙이고 싶다면 함수 자체를 전달해주는 방법이 있다. ex) function(){tagLoaded();};

기본 자바스크립트는 번거로워, 실습 시 제이쿼리로 변환했다.

제이쿼리 다운 사이트로 이동

code.jquery.com/

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

code.jquery.com

최신 버전의 minified 클릭

그러면 뜨는 창에서 밑줄 부분만 복사한다.

현재 작성했던 script태그 위에 새 script 태그 추가, src속성에 복사된 값을 넣는다.

그리고 위의 자바스크립트문을 제이쿼리로 변환하면 코드가 아래와 같이 짧아진다.

전체 코드

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    <title>나의 홈페이지</title>
    <style>
        
        div {
            height:300px;
            background-color:red;
        }
        .title {
            color : #fff;
            background-color:#000;
        }

        #div2 { 
            height:600px;
            background-color:yellow;
        }
        #title1{
            color:yellow;
        }
    </style>
    <script src ="https://code.jquery.com/jquery-3.5.1.min.js"> </script>
    <script>
        // function tagLoaded(){
        //     let tags = document.querySelectorAll('div'); 
        //     // css가 쿼리를 찾는 대로 찾는 방식임. 그래서 ., #으로 사용  
        //     // 여러개를 찾을때는 All을 붙여야함. -> 무조건 배열로 넘어옴(하나를 찾아도)
        //     for(let i=0; i<tags.length; i++){
        //         tags[i].style.color = "#fff";
        //         tags[i].style.backgroundColor = "#000";
        //     }
        // }
        // // 함수의 실행 결과가 undefined기 때문에 뒤에 ()를 붙이면 안된다. 
        // // 나중에 실행할 것이기 때문에 ()를 빼는것임.
        // // ()하고 싶으면 함수 자체를 전달해야한다.
        // //function(){tagLoaded();};
        // window.onload = tagLoaded;
        
        //여기부터 jquery

        $(function(){
            //함수를 전달 줌
            // 함수 전달시, 문서 로딩 후 함수를 전달하는것
            $('.title').css({
                // .title이라는 문자를 전달
                // 전체 모든 css의 값을 바꿔줌
                color:"#fff",
                backgroundColor: "#000"
            });
        });
    </script>
    
</head>
<body>
    <div id="div1" style=" background-color:#414141;">
        <div id="title1" class="title">제목</div>
        <div class="content">내용</div>
    </div>
    <div id="div2">
        <div class="title">제목</div>
        <div class="content">내용</div>
    </div>

</body>
</html>