CSS
Cascading Style Sheets 약자, 꾸며주는 언어. 태그별로 하나하나 꾸며준다
- 인라인 inline : HTML 태그 안에 같이 작성한다
- 내부 스타일 시트 : HTML 문서 안에 같이 작성한다
- 외부 스타일 시트 : HTML 문서 밖에 같이 작성하고 연결한다
*HTML 태그 한쌍 또는 닫힌태그 하나를 element 라고 부른다.
인라인
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LOGIN</title>
</head>
<body>
<h1 style="color:rgb(173, 6, 6); text-align: center;">Login</h1>
<form>
ID : <input type="text" style="font-size: 25px;" placeholder="아이디"/>
<br>
PW : <input type="password" style="font-size: 25px;" placeholder="비밀번호"/>
<br>
<input type="button" value="login"
style="font-size: 25px; width: 100px; height: 35px;">
</form>
</body>
</html>태그 안에 `style = " ~ ; "` 구성으로 삽입한다.
내부 스타일 시트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LOGIN</title>
<style>
h1{
color:rgb(173, 6, 6);
text-align: center;
}
.login_inputs{
font-size: 25px;
}
#btn{
font-size: 25px;
width: 100px;
height: 35px;
}
</style>
</head>
<body>
<h1>Login</h1>
<form>
ID : <input class="login_inputs" type="text" placeholder="아이디">
<br>
PW : <input class="login_inputs" type="password" placeholder="비밀번호">
<br>
<input id="btn" type="button" value="login">
</form>
</body>
</html>HTML 문서 상단 </head> 태그 바로 위에 <style> 태그 생성 후 그 안에 작성한다.
class이름 `.`, id이름 `#` 으로 css 에서 이름선언한다.
class VS id
한개의 class, n 개의 element
한개의 id, 1개의 element
class는 중복사용이 가능하지만, id는 중복이 불가능하다.
외부 스타일 시트
login.css
h1{
color:rgb(173, 6, 6);
text-align: center;
}
.login_inputs{
font-size: 25px;
}
#btn{
font-size: 25px;
width: 100px;
height: 35px;
}
HTML 문서에는 인라인, 내부 스타일 시트 작성한 것을 모두 지워준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LOGIN</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<h1>Login</h1>
<form>
ID : <input class="login_inputs" type="text" placeholder="아이디">
<br>
PW : <input class="login_inputs" type="password" placeholder="비밀번호">
<br>
<input id="btn" type="button" value="login">
</form>
</body>
</html>HTML 문서에는 css와 연결되어있다는 태그를 선언해준다. `<link rel="stylesheet" href="login.css">`
*rel : relation 줄임말
*주석처리 방법 html `<!--안녕-->` css `/*hi*/` `//hello` / 그런데.. vscode 에서 ctrl+`/` 누르면 주석처리 단축키가 된다. 주석처리하고싶은 코드 라인 드래그 한 후 단축키 누르면 한번에 처리해준다. 개굿
JavaScript
element 하나를 제어를 할 수 있게 하는 언어. 사용자와 상호작용
독립적인 프로그램을 개발할 수 있는 언어가 아니고, 구성요소 중 하나! 제어하는 스크립트 역할을 하는 언어로 처음엔 구성되었지만, 현재 백엔드까지 구성할 수 있다.
css와 동일하게 인라인, 내부, 외부 스크립트 적용법이 존재한다.
📝함수
특정 기능을 수행하는 코드 덩어리
function 함수이름 () {
함수가 할 일 작성
}
호출할때는 `함수이름()` → 소괄호 까먹으면 안된다!
인라인
웹 프론트에서 " vs '?
둘다 동일하게 사용 가능한데, 따음표 안에 따음표를 사용할 경우"""" 불가능하다! 왜냐하면 두번째 따음표를 닫힘처리 하기때문이다.
그렇다면 어떻게 사용해야할까? `onclick = "alert('1')"` 대괄호 안에 소괄소, 소괄호 안에 대괄호 등 두개를 동시에 사용하면 작동한다!
내부 스크립트
///...
<input id="btn" type="button" value="login" onclick="myFunction()">
</form>
<script>
function myFunction(){
alert('1');
alert('2');
alert('3');
}
</script>
</body>
</html>사용자가 화면 위에서 작업을 한다는 JS 내장 함수가 존재하는데, `on~`로 구성되어있다
onclick 클릭이 되면, myFunction()이라는 함수를 실행한다
</body>태그 바로 위에 <script> 태그 공간을 만들어서, 함수를 정의한다.
특정 태그 element 찾는 방법
- id 로 찾기 : `document.getElementById('아이디')`
- class 이름으로 찾기 : `document.getElementByClassName('클래스 이름')`
- tag 이름으로 찾기 : `document.getElementByTagName('태그 이름')`
. : 앞의 있는 것 중에서, ~의 (of)
문서에서, 가져온다 id로 element를! 이것의 value 값
value 값을 가져온다는 말이 없으면,
element 에 대한 정보를 나타내고, 이 정보의 값 value를 가져온다고 코드를 작성해주어야한다.
*최종 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LOGIN</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<h1>Login</h1>
<form>
ID : <input id="txt_id" class="login_inputs" type="text"
placeholder="아이디">
<br>
PW : <input class="login_inputs" type="password"
placeholder="비밀번호">
<br>
<input id="btn" type="button" value="login"
onclick="popId()">
</form>
<script>
// ID 란에 입력된 값을 팝업창에 띄우기
function popId(){
alert(document.getElementById('txt_id').value);
}
//나만의 함수 만들고, 버튼 클릭하면 호출하기
function myFunction(){
alert('1');
alert('2');
alert('3');
}
</script>
</body>
</html>`document.getElementById('txt_id).value ` 를 변수처리 해주자
`let userId = document.getElementById('txt_id').value;`
📝 조건문
만약에 id 입력이 비어있다면? id를 입력하라는 alert를 띄워야한다
변수가 비어있는지 확인하는 방법?
두 방법 모두 value 값이 비었다, 없다는 의미로 사용할 수 있다.
`userId == ''"` 이렇게도 할 수 있지만, 값을 부정하는 의미로 `!userId`로 표현할 수도 있다.
<!DOCTYPE html>
<html lang="en">
<!-- 외부 스타일 시트 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LOGIN</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<h1>Login</h1>
<form>
ID : <input id="txt_id" class="login_inputs" type="text"
placeholder="아이디">
<br>
PW : <input class="login_inputs" type="password"
placeholder="비밀번호">
<br>
<input id="btn" type="button" value="login"
onclick="popId()">
</form>
<script>
// ID 란에 입력된 값을 팝업창에 띄우기
function popId(){
let userId = document.getElementById('txt_id').value;
if (!userId){
alert('아이디 입력해라');
}else{
alert(userId);
}
}
//나만의 함수 만들고, 버튼 클릭하면 호출하기
function myFunction(){
alert('1');
alert('2');
alert('3');
}
</script>
</body>
</html>
📝 변수 let, var, const
이전에 정리한 게시글을 참고하자
[JS] 변수 var, let, const / 선언, 할당, 초기화 / Literal 리터럴
일년전! 연합 동아리 면접볼때, 바닐라 JS 찌끄려봤던 경험으로 ✌️고수✌️;; 라고 적었다가 들어온 질문이다. 그만큼 기본중에 기본인데 깊게 공부하니 꽤 복잡했다.. 단순 재선언 재할당만
datdaradanadat.tistory.com
현업자가 설명해주길, var의 역할을 let, const로 분리한 것이고 var은 더이상 사용하지 않는다고 한다.
앗싸! 공부할거 줄었다! 라고 하기엔 var 호이스팅에 대한 글도 열심히 썼는걸...
즉, let은 재할당되는 변할 수도 있는 변수, const는 재할당이 안되는 고정된 값을 가진 변수
`alert('num2 : ' + num2);`
외부 스크립트
javascript는 css 연결 밑에 연결코드 작성한다
` <script type="text/javascript" src="login.js"></script>`
login.js
// ID 란에 입력된 값을 팝업창에 띄우기
function popId(){
let userId = document.getElementById('txt_id').value;
if (!userId){
alert('아이디 입력해라');
}else{
alert(userId);
}
}
//나만의 함수 만들고, 버튼 클릭하면 호출하기
function myFunction(){
alert('1');
alert('2');
alert('3');
}
동작화면
☑️ 배운 점
값이 입력되지 않았을 경우
=='' , !변수명 두가지를 설명들었는데 null을 사용했을 경우 기능이 작동하지 않았다.
null 과 undefined 의 차이일 것 같아, 정리하는 글을 작성하고 싶다.