[데브코스][2-3] CSS,JS 기초

단·2024년 4월 18일
0

데브코스

목록 보기
6/20

1. CSS

1.1 Inline CSS 속성 찾는 법(검색)

HTML에 CSS를 적용하는 방법 3가지

  1. 인라인 - html 태그 안에 같이 작성

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login page</title>
</head>
<body>
    <h1 style = "color: red; text-align: center;">Login</h1>
    <form>
        ID : <input type="text" style="font-size:25px">
        <br>
        PW : <input type="password" style="font-size:25px">
        <br>
        <input type="button" value="login" style="width:100px; height: 30px">
    </form>
</body>
</html>

  2. 내부 스타일 시트 - html 문서 안에 같이 작성

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login page</title>
    <style>
        h1 {
            color: red; 
            text-align: center;
        }
        .login_inputs {
            font-size: 25px;
        }
        #btn_login {
            font-size: 30px;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <h1>Login</h1>
    <form>
        ID : <input class="login_inputs" type="text">
        <br>
        PW : <input class="login_inputs" type="password">
        <br>
        <input id="btn_login" type="button" value="login">
    </form>
</body>
</html>
    1. head에 style 시트 생성
    2. 안에 태그(h1,h2,…), 클래스(.), 아이디(#)를 이용해서 스타일 생성하고, 원하는 html 태그에 지정해주기

  3. 외부 스타일 시트 - html 문서 밖에 작성하고 연결

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login page</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1>Login</h1>
    <form>
        ID : <input class="login_inputs" type="text">
        <br>
        PW : <input class="login_inputs" type="password">
        <br>
        <input id="btn_login" type="button" value="login">
    </form>
</body>
</html>

    내부 스타일 시트도 한 파일에서 스크립트, 스타일, 인덱스를 다 보기에는 불편해서 따로 css 파일 제작

    파일 제작 후, html 파일에 연결(link)

    rel(relation의 약자)

    href(hypetrext reference)

참고) 주석처리하기: command + /

2. JS

2.1 JS 이해

html 요소 선택 후 제어할 수 있는 스크립트 언어

프로그래밍 언어와 스크립트 언어의 차이?

스크립트 언어는 독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아니라, 프로그램 내부의 구성요소 중 하나로 프로그램을 제어하는 스크립트 역할을 하는 언어이다.

최근 빠르게 발전하는 런타임 환경 덕분에 스크립터 언어만으로도 충분히 프로그래밍 가능하며 역할이 확장되는 중이다.

HTML에 JS 적용하는 방법은 3가지

  1. 인라인: 사용자와의 상호작용이 있을 때만 가능. ex) 사용자가 버튼 클릭

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login page</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1>Login</h1>
    <form>
        ID : <input class="login_inputs" type="text">
        <br>
        PW : <input class="login_inputs" type="password">
        <br>
        <input onclick="alert('clicked!')" id="btn_login" type="button" value="login">
    </form>
</body>
</html>

    onclick="alert('clicked!')"

  2. 내부 스크립트

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login page</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1>Login</h1>
    <form>
        ID : <input class="login_inputs" type="text">
        <br>
        PW : <input class="login_inputs" type="password">
        <br>
        <input onclick="myfunction()" id="btn_login" type="button" value="login">
    </form>

    <script>
        function myfunction (){
            alert('1');
            alert('2');
            alert('3');
        }
    </script>
</body>
</html>

    스크립트에 function 생성 후 html 태그에 삽입

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login page</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1>Login</h1>
    <form>
        ID : <input id="txt_id" class="login_inputs" type="text">
        <br>
        PW : <input class="login_inputs" type="password">
        <br>
        <input onClick="popId()" id="btn_login" type="button" value="login">
    </form>

    <script>
        // id란에 입력한 값을 팝업창에 띄우기
        function popId(){
            if (!document.getElementById("txt_id").value) {
                // = document.getElementById('txt_id').value == ""
                alert('fill the blank');
            } else {
                alert(document.getElementById("txt_id").value);
            }

        }

        // 나만의 함수 만들고, 버튼 클릭하면 호출하기
        function myfunction (){
            alert('1');
            alert('1');
            alert('1');
        }
    </script>
</body>
</html>

    document.getElementById

    .은 ~중에서, ~의(of)의 의미를 지님

    따라서, 이 코드는 document라는 파일에서 id를 이용해서 요소를 가져온다라는 것

  3. 외부 스크립트

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login page</title>
    <link rel="stylesheet" href="/style.css">
    <script src="/script.js"></script>
</head>
<body>
    <h1>Login</h1>
    <form>
        ID : <input id="txt_id" class="login_inputs" type="text">
        <br>
        PW : <input class="login_inputs" type="password">
        <br>
        <input onClick="popId()" id="btn_login" type="button" value="login">
    </form>
</body>
</html>

    script에 연결

변수

변수는 상자

데이터를 담아놓는 상자

변수 생성하는 법

let 상자 이름 = 상자에 담을 데이터; (숫자, 문자, element, 등등)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login page</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1>Login</h1>
    <form>
        ID : <input id="txt_id" class="login_inputs" type="text">
        <br>
        PW : <input class="login_inputs" type="password">
        <br>
        <input onClick="popId()" id="btn_login" type="button" value="login">
    </form>

    <script>
        // id란에 입력한 값을 팝업창에 띄우기
        function popId(){
            let userId = ocument.getElementById("txt_id").value;
            if (!userId) {
                // = document.getElementById('txt_id').value == ""
                alert('fill the blank');
            } else {
                alert(userId);
            }

        }

        // 나만의 함수 만들고, 버튼 클릭하면 호출하기
        function myfunction (){
            alert('1');
            alert('1');
            alert('1');
        }
    </script>
</body>
</html>

userId라는 변수 생성

if문 조건, else alert 부분에 변수 넣어서 간단하고 가독성 좋게 코드 변경

var a; // var는 사용 안함, 예전엔 없었음 이건 이제 let, const로 분리됨
let b;// 변수 선언 후 재할당 가능
const c; // 상자 안에 값이 들어가면 재할당 불가, 엄밀히 말하면, 변수 선언 시 undefined로 초기화된 상태, 이후에 런타임 때 변수값이 재할당되는 거긴 함. 근데 그 이후에 재할당 불가능

텍스트랑 함께 변수 출력하는 법 + 사용 or 백틱

profile
단
이전 포스트

[데브코스][2-2] 웹 이해, HTML

다음 포스트

[데브코스][2-4] 백엔드 기초 + 예시로 서버 페이지 구축

0개의 댓글