CSS
HTML 태그를 하나하나 꾸미는 역할을 한다.
인라인
HTML 태그 안에 속성으로 작성하는 방법이다.
<h1 style="color:rgb(66, 129, 224);background-color: rgb(212, 235, 255);">로그인</h1>
내부 스타일 시트
화면에 대한 내용이 아니기 때문에 style 태그는 head에 작성한다.
class를 꾸밀 경우 ".클래스이름", id를 꾸밀 경우 "#아이디이름" 형식으로 작성한다.
<head>
...
<style>
h1 {
color: rgb(66, 129, 224);
background-color: rgb(212, 235, 255);
}
.login_input {
background-color: rgb(212, 235, 255);
}
#submit-btn {
color: white;
background-color: rgb(66, 129, 224);
}
</style>
</head>
외부 스타일 시트
별도의 파일에 작성한 후 HTML 문서에 연결하는 방식이다. 내부 스타일 시트 결과와 동일하다.
index.html
<head>
...
<link rel="stylesheet" href="style.css">
</head>style.css
h1 {
color: rgb(66, 129, 224);
background-color: rgb(212, 235, 255);
}
.login_input {
background-color: rgb(212, 235, 255);
}
#submit-btn {
color: white;
background-color: rgb(66, 129, 224);
}
Javascript
특정 html 요소(element)를 선택해서 제어할 수 있는 스크립트 언어이다.
인라인
사용자와의 상호작용이 있는 경우에만 사용할 수 있다.
버튼을 클릭하면 알림창이 뜨도록 해보자.
<button onclick="alert('clicked!')">로그인</button>
내부 스크립트
body 태그 내부의 맨 아래에 작성한다.
<body>
...
<button onclick="clickHandler()">로그인</button>
<script>
function clickHandler() {
alert('clicked!');
}
</script>
</body>
외부 스크립트
head에 스크립트 파일을 연결해 준다.
index.html
<head>
...
<script type="text/javascript" src="index.js"></script>
</head>index.js
function clickHandler() {
alert('clicked!');
}
JS로 요소 선택하기
id로 선택하기
document.getElementById('아이디이름')
class로 선택하기
document.getElementsByClassName('클래스이름')
tag로 선택하기
document.getElementsByTagName('태그이름')
조건문
조건에 따라 다른 결과를 선택할 수 있게 해 준다.
아이디를 입력하고 로그인 버튼을 누른 경우 아이디가 빈칸이면 아이디를 입력하라는 메시지를, 아이디가 빈칸이 아니면 입력된 아이디를 알림 창을 띄워주는 기능을 만들어보자.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<h1>로그인</h1>
<form action="">
<label for="id">아이디: </label>
<input type="text" name="id" id="id" class="login_input" placeholder="아이디">
<br>
<label for="password">비밀번호: </label>
<input type="password" name="password" id="password" class="login_input" placeholder="비밀번호">
<br>
<button onclick="loginHandler()" id="submit-btn">로그인</button>
</form>
</body>
</html>index.js
function loginHandler() {
const inputId = document.getElementById('id').value;
if (!inputId) { // id가 빈칸인 경우
alert('아이디를 입력하세요.');
} else { // id가 입력된 경우
alert("입력한 아이디: " + inputId);
}
}
변수 선언
| 호이스팅(초기화) | 재정의 | 업데이트 | |
| var | O(O) | O | O |
| let | O(X) | X | O |
| const | O(X) | X | X |
var
변수를 var로 선언하게 되면 호이스팅 된다. 호이스팅은 변수나 함수의 선언을 최상단으로 끌어올리는 현상을 말한다. 아래 코드처럼 일단 변수를 사용하고 나중에 선언하면 오류가 발생하지 않는다는 이야기이다. 참고로 아래 코드의 출력값은 1이 아니고 undefined이다. 호이스팅 되면서 값이 undefined로 초기화되기 때문이다.
console.log(num);
var num = 1;var은 재정의도 가능하다. num이라는 변수를 재정의했지만 오류가 발생하지 않는다.
var num = 1;
var num = 3;변수의 값 또한 수정 가능하다.
let
let으로 선언한 변수 또한 호이스팅 되지만 초기화는 수행하지 않는다. 동일 블록 범위 내에서는 재정의도 불가능하다. 예를 들어 설명하면 첫 번째 코드는 불가능하지만 두 번째 코드는 가능하다. 그리고 변수의 값을 수정할 수 있다.
let num = 1;
let num = 3;let num = 1;
if(num === 1) {
let num = 3;
console.log(num); // 출력값: 3
}
console.log(num); // 출력값: 1
const
let과 다른 특징들을 동일하지만 변수의 값을 수정할 수 없다는 점이 다르다. 또한, var과 let은 선언할 때 초기화를 하지 않아도 되지만 const는 변수의 값을 수정할 수 없기 때문에 선언할 때 꼭 초기화를 해야 한다.
첫 번째 코드는 오류가 발생하지만 두 번째 코드는 정상 작동한다. 배열 안에 있는 원소의 값을 바꾼 것이지 배열 자체를 다른 것으로 바꾼 게 아니기 때문이다. 배열뿐만 아니라 Object, Map 등도 해당된다.
const num = 1;
num = 2;const arr = [1, 2, 3, 4];
arr[0] = 5;
console.log(arr); // 출력값: [5, 2, 3, 4]
'데브코스' 카테고리의 다른 글
| [2주차 - DAY4] 웹 실습(1) (0) | 2024.03.07 |
|---|---|
| [2주차 복습 발표] Git branch (0) | 2024.03.06 |
| [2주차 - DAY2] 웹 이론(1) (0) | 2024.03.05 |
| [2주차 - DAY1] Git 고급 (0) | 2024.03.04 |
| [1주차 - DAY4] Git 브랜치 전략 기반의 협업 워크 플로우 (0) | 2024.02.29 |
