close
프로필 배경
프로필 로고

DEVELOPE-sther

Devcourse · 2026. 1. 9. fullscreen 넓게보기

<프로그래머스 데브코스 풀스택> 2026-01-09 TIL

Chapter1. CSS의 이해

CSS란?

: Cascading Style Sheets, HTML을 꾸며주는 언어, HTML 태그를 하나하나 꾸며줌

 

HTML에 CSS 적용하는 방법 - 코드의 위치만 바뀐다고 생각

1️⃣ 인라인 : HTML 태그 안에 같이 작성

2️⃣ 내부 스타일 시트 :  HTML 문서 안에 같이 작성

3️⃣ 외부 스타일 시트. : HTML 문서 밖에 작성하고 연결

HTML 태그 한쌍(한개)를 element라고 부름

 

인라인 

: 태그 안에 같이 작성

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> LOGIN </title>
    </head>
    <body>
        <h1 style="color: rgb(100, 100, 203); 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>

style 속성

- `color` : 글씨 컬러

- `text-align`  : 글자 정렬

- `font-size` : 폰트 사이즈

- `width / height` : 요소 가로/세로

 

내부스타일 시트

: <head>태그 안에 <style>태그 안에 넣음

태그를 가리키는 방법

1️⃣ 태그 가르킴 (h1, input ...) -> '태그명{}` 으로 가르킴

2️⃣ class 지정 -> `.클래스명{}` 으로 가르킴 : 중복된 거 한번에 묶음 

3️⃣ id 지정 -> '#아이디명{}` 으로 가르킴 : 하나의 거 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> LOGIN </title>
        <style>
            h1{
                color: rgb(100, 100, 203); 
                text-align: center;
            }

            .login_inputs {
                font-size: 25px;
            }

            #btn_login{
                font-size:25px; 
                width: 100px; 
                height: 30px;
            }

        </style>
    </head>
    <body>
        <h1 style="color: rgb(100, 100, 203); text-align: center">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="stylesheet" href="파일이름.css">

login.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> LOGIN </title>
        <link rel="stylesheet" href="login.css">
    </head>
    <body>
        <h1 style="color: rgb(100, 100, 203); text-align: center">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>

login.css

h1{
    color: rgb(100, 100, 203); 
    text-align: center;
}

.login_inputs {
    font-size: 25px;
}

#btn_login{
    font-size:25px; 
    width: 100px; 
    height: 30px;
}

 

주석

css  : /* 주석 */

html : <!--  주석-->

 

 

Chapter2. Javascipt의 이해

 

자바스크립트란?

특정 HTML요소를 선택하여 제어할 수 있는 스크립트 언어, 최근 백엔드 언어로도 각광받음

 

스크립트 언어란? 

독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌,

"(프로그램 내부의 구성 요소 중 하나로) 프로그램 제어하는 스크립트 역할을 하는 언어"

최근 빠르게 발전하는 런탕미 환경 덕분에, 스크립트 언어 만으로도 충분히 프로그래밍이 가능해져, 역할이 확장되고 있음

 

적용하는 방법

1️⃣ 인라인 : 사용자와의 상호작용이 있을 때만 가능 (예, 버튼을 클릭 했을 때, 키보드를 눌렀을 떄...)

2️⃣ 내부 스타일 시트 :  HTML 문서 안에 같이 작성 

3️⃣ 외부 스타일 시트. : HTML 문서 밖에 작성하고 연결

 

인라인

`on`으로 시작하는 속성값

onclick : 클릭이 되면 팝업창을 띄움 

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

💡 ', " 다르지 않지만, onclick 안에 쓸때는 '을 써야지 시스템이 혼동하지 않음

💡 alert는 이미 만들어져있는 함수

 

함수

: 특정 기능을 수행하는 코드 덩어리

정의

function 함수 이름() {
   /* 이공간에 함수가 할 일 코드로 작성해줌 */
}

        <form>
            <input id="btn_login" type="button" value="login" onclick="myFunction()">
        </form>

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

버튼 눌렀을 때 1, 2, 3 차례로 팝업창이 표시됨

 

내부 스크립트

특정 태그(element)를 가리키는 방법

1️⃣ id로 찾기 : document.getElementByID('아이디')

2️⃣ class 이름으로 찾기 : document.getElementsByClassName('클래스 이름')

3️⃣ tag 이름으로 찾기 : document.getElementsByTagName('태그 이름')

. : ~중에서, ~의 (of)

        <form>
            ID : <input id="txt_id" class="login_inputs" type="text">
            <br>
            <input id="btn_login" type="button" value="login" onclick="popId()">
        </form>
        
        <script>
            /* ID 란에 입력된 값을 팝업창에 띄우기 */    
            function popId() {
                alert(document.getElementById('txt_id').value);
            }   
        </script>

document.getElementById(' ')의 값! + `.value`



조건문

if문

: 조건에 따라 다른 선택을 하게 도와줌

            function popId() {
                if(!document.getElementByID('txt_id').value){
                    alert('아이디를 입력해주세요.');
                } else {
                    alert(document.getElementById('txt_id').value);
                }
                
            }

💡

!document.getElementById('txt_id').value 

==

document.getElementById('txt_id').value == ""

 

변수

값을 담아두는 상자

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

 

var vs let vs const 

var

let과 const로 나눔 -> 쓰지않음, 신경 X

 

let -> 값을 바꿀 수 있음 

const -> 값을 바꿀 수 없음

/* var vs let vs const */
function compareVarible() {
    let num1 = 10; 
    const num2 = 30;
    // 변수 값을 바꿀 수 있음
    
    num2 = 20; //먼저 들어간 값을 빼고 이 값을 넣음
    alert('num2 : '+num2);
    // const num2;
}

const 값에 변화를 주었기 때문에, 시스템이 오류로 인식해 alert를 실행하지 못함. 

num2 = 20; 을 제거하면, 

let과 마찬가지로 잘 표시함

 

외부 스크립트 

js파일 따로 만들어서, html파일과 연결

<script type="text/javascript" src="파일이름.js"></script>

 

 

 

 

'Devcourse' 카테고리의 다른 글

<프로그래머스 데브코스 풀스택> 2026-01-12 TIL Docker / MariaDB / SQL 기초  (1) 2026.01.12
<프로그래머스 데브코스 풀스택> 2026-01-10 TIL  (0) 2026.01.11
<프로그래머스 데브코스 풀스택> 2026-01-08  (0) 2026.01.08
<프로그래머스 데브코스 풀스택> 2026-01-07 TIL  (0) 2026.01.07
<프로그래머스 데브코스 풀스택> 2026-01-06 TIL  (0) 2026.01.06
Devcourse 관련 글
더 보기

티스토리툴바