8/21_7일차

자햐·2024년 8월 21일

교육

목록 보기

7/51

예제로 배우는 CSS의 이해

-> cascading style sheets의 약자, html을 꾸며주는 언어.
문서를 통째로 한번에 꾸며주는것이 아니라, html태그를 하나하나 꾸며줌

Html에 css을 적용하는 방법은 다음과 같이 3가지가 있습니다.
1. 인라인(inline) : html태그 안에 같이 작성
2. 내부 스타일 시트(internal style sheet) : html문서 안에 같이 작성합니다.
3. 외부 스타일 시트(external style sheet) : html문서 밖에 작성하고 연결합니다.

// 이제 login html페이지를 꾸미는 실습

실습 때 쓴 태그 - 인라인 방식(style태그 사용)

<body> 
        <h1 style="color: darkred; 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="font-size: 25px; width: 100px; height: 30px;">
        
        </form>
    
    </body>

다음 영상에서 실습 때 한 일 : 내부스타일시트 방식

html파일의 헤드 부분에 css적용
1. class -> 공통된 내용을 하나로 뺄 수 있음(같은 반)/.이용
2. id -> 역시 공통된 내용을 하나로 뺄 수 있음
/#이용
3. 그리고 일반적인 태그 이름을 통해 쓸 수도 있음 (예시 : h1{ })

<!DOCTYPE html> 
<html>

    <head>
        <meta charset = "utf-8">
        <title>
            LOGIN    
        </title>
        <style>
            h1{
                color: darkred;
                text-align:center;
            }

            .login_inputs{
                font-size:25px;
            }

            #btn_login{
        
                font-size: 30px; width: 100px; height: 30px;
            }
        </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>

이런 방식!

다음 강의에서는 외부스타일시트 방식.
html파일과 css파일을 분리하는 방식.

파일을 분리하여 .css파일을 만들어 준 후,
html파일에 있던 style태그는 지우고 link태그를 통해 rel과 href를 작성하여 css파일과 html파일을 연결해준다.

    <head>
        <meta charset = "utf-8">
        <title>LOGIN</title>
        <link rel="stylesheet" href="login.css"> <!--rel : relation은 stylesheet!라는 뜻-->
       
    </head>

이렇게 link할 수 있다.
rel <- relation이라는 뜻으로, stylesheet라는 것을 의미

예제로 배우는 javascript의 이해

javascript는 특정 html요소를 선택하여 제어할 수 있는 스크립트 언어입니다.

스크립트 언어란?
독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌
(프로그램 내부의 구성 요소 중 하나로)프로그램을 제어하는 스크립트 역할을 하는 언어

최근 스크립트 언어만으로 프로그래밍을 하는 등 확장이 되고 있다.

javascript란

html에 javascript를 적용하는 방법은 다음과 같이 3가지가 있습니다.
1. 인라인(inline): 사용자와의 상호작용이 있을 때만 가능하다.
(예시 : 버튼을 클릭했을 때, 키보드를 눌렀을 때)
2. 내부 스크립트(internal script) : html문서 안에 같이 작성
3. 외부 스크립트(external script) : html문서 밖에 작성하고 연결.

인라인 실습

<input id="btn_login" type="button" value="login"
                onclick="alert('clicked!')">

on <- 접두사가 붙은(사용자와 상호작용한다라는 의미가 내포되어 있음) 단어를 html태그 안에 작성하여 javascript기능을 쓸 수 있다.
alert라는 이미 만들어진 기능을 써보기.
""와 ''는 같은 의미이지만 컴에서 헷갈리지 않게 구별해서 써주기.

함수

함수란, 특정 기능을 수행하는 코드 덩어리.

function 함수 이름(){
/ 어쩌구..
}

내부 스크립트 실습

   <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"
                onclick="myFunc()"> 
        </form>
    

        <script><!-- 내부 스크립트 작성하는 장소-->
            // 여기서는 이 주석 사용
            /* 나만의 함수 만들고, 버튼 클릭하면 호출하기*/
            function myFunc(){
                alert('1');
                alert('2');
                alert('3');

            }
        </script>
    </body>

이런식으로 작성 가능.

javascript에서는 특정 태그를 찾을 때 다음과 같은 기능을 이용합니다.

id로 찾기 : document.getElementById('아이디')
class이름으로 찾기 : document.getElementsByClassName('클래스 이름')
tag 이름으로 찾기 : document.getElementsByTagName('태그 이름')

특정 태그(element)를 찾는 방법

document.getElementById

여기서 . <- 앞의 있는 것의 ~ 중에서 (~의)
document(문서)의 id로 가져오겠다.

<script><!-- 내부 스크립트 작성하는 장소-->
            /* ID 란에 입력된 값을 팝업창에 띄우기 */
            function popID(){

                alert(document.getElementById('txt_id').value);
                /* txt_id의(.) 값(value)를 가져옴 */ 

                
            }

이런식으로 작성 가능하다.

조건문

만약 아이디 칸이 비어있다면, 아이디를 입력해달라고 팝업창에 띄운다.
아니라면 입력된 아이디를 팝업창에 띄운다.

<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 id="btn_login" type="button" value="login"
                onclick="popID()"> 
        </form>
    

        <script><!-- 내부 스크립트 작성하는 장소-->
            /* ID 란에 입력된 값을 팝업창에 띄우기 */
            function popID(){
                // if(!document.getElementById('txt_id').value) 라고 바꿀 수도 있음
                if(document.getElementById('txt_id').value == ""){
                   alert('아이디를 입력해주세요.'); 
                }
                else{
                    alert(document.getElementById('txt_id').value);
                    /* txt_id의(.) 값(value)를 가져옴 */ 
                }
            }
            
            // 여기서는 이 주석 사용
            /* 나만의 함수 만들고, 버튼 클릭하면 호출하기*/
            function myFunc(){
                alert('1');
                alert('2');
                alert('3');

            }
        </script>
    </body>

라고 쓸 수 있다.

변수2 & 외부 스크립트

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

js에서 선언할 수 있는 변수 타입
1. let
2. const
3. var // 거의 안씀

script태그 안의 코드를 모두 login.js파일로 이동, html파일에 아래처럼 링크.


<head>
        <meta charset = "utf-8">
        <title>LOGIN</title>
        <link rel="stylesheet" href="login.css"> <!--rel : relation은 stylesheet!라는 뜻-->
        <script type="text/javascript" src="login.js"></script>
    </head>