CSS
: Cascading Style Sheets 의 약자, HTML 을 꾸며주는 언어
: 문서를 통째로 한 번에 꾸며주는 것이 아니라, HTML 태그 하나 하나 꾸며준다.
HTML에 CSS를 적용하는 방법 3가지
- 인라인(inline): HTML 태그 안에 같이 작성
<h1 style="color:darkred; text-align: center;">Login</h1>- 내부 스타일 시트(internal style sheet): HTML 문서 안 head 태그 내부에 style 태그 만들고 작성
<head>
<meta charset="UTF-8">
<title> LOGIN </title>
<style>
/* 태그 이름 */
h1 {
color:darkred;
text-align: center;
}
/* 클래스 이름 앞에는 점을 붙여준다. */
.login_inputs {
font-size: 25px;
}
/* id 이름 앞에는 #을 붙여준다. 아이디 이름 중복 안 됨 */
#btn_login {
font-size: 20px;
width: 100px;
height: 30px;
}
</style>
</head>- 외부 스타일 시트(external style sheet): HTML 문서 밖에 작성하고 연결
➡️ login.css 파일을 만들고, 위의 <style> 태그 내부에 있던 내용을 붙여넣기 한다. 그리고 HTML 파일 head 태그 내부에 아래와 같은 코드로 연결해주면 동일하게 작동한다.
<link rel="stylesheet" href="login.css" />Javascript
: 특정 HTML 요소를 선택하여 제어할 수 있는 스크립트 언어, 최근에는 백엔드 언어로도 각광받고 있다.
스크립트 언어란?
: 독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 "(프로그램 내부의 구성 요소 중 하나로) 프로그램을 제어하는 스크립 트 역할을 하는 언어"
: 최근 빠르게 발전하는 런타임 환경 덕분에 스크립트 언어만으로도 충분히 프로그래밍이 가능해져, 역할이 확장되고 있다.
HTML에 Javascript 를 적용하는 방법 3가지
- 인라인(inline): 사용자와 상호작용이 있을 때만 가능 ( 버튼을 눌렀을 때, 키보드를 눌렀을 때 )
<input id="btn_login" type="button" value="login" onclick="alert('clicked!')">- 내부 스크립트(internal script): HTML 문서 안 body 태그 내에 script 태그를 만들고 작성
<script>
/* 나만의 함수 만들고, 버튼을 클릭하면 호출하기 */
function myFunction () {
alert('1');
alert('2');
alert('3');
}
</script>- 외부 스크립트(external script): HTML 문서 밖에 작성하고 연결
함수란?
: 특정 기능을 구행하는 코드 덩어리
function 함수 이름 ( ) {
/* 이 공간에
함수가 할 일을
코드로 작성해줍니다. */
}
Javascript 에서 특정 태그(element) 를 찾는 방법
- id 로 찾기: document.getElementById('아이디')
- class 이름으로 찾기: document.getElementsByClassName('클래스 이름')
- tag 이름으로 찾기: document.getElementsByTagName('태그 이름')
➡️ . 는 ~ 중에서, ~의(of) 라는 뜻이다.
조건문
if 문 : 조건에 따라 다른 결과를 선택할 수 있게 해준다.
변수
: 데이터를 담아놓는 상자
let 상자 이름 = 상자에 담을 데이터(숫자, 문자, element, ... );
var vs let vs const
- var: 이제는 안 씀, 원래는 let 과 const 의 역할을 모두 했었음
- let : 값을 변경 가능
- const: 값을 변경 불가, 처음 넣는 값을 그대로 들고 감
👩🏻💻 실습해보기
1. myFunction 함수 만들기
: '내가 만든 함수' 라는 팝업이 뜨는 함수를 만들었다. 로그인 버튼을 눌렀을 때 myFunction () 함수를 호출함으로써 잘 동작하는 것을 확인할 수 있다.
2. ID 란에 입력된 값을 팝업창에 띄우는 함수 popId()
function popId() {
alert(document.getElementById('txt_id').value);
}=> input 태그의 id 이름(txt_id) 으로 ID 입력창에 입력된 내용을 불러온 후, alert 함수로 팝업창을 띄운다.
: ID 란에 입력된 내용이 팝업창에 잘 뜨는 것을 확인할 수 있다.
3. 조건문을 추가한 popId ( ) 함수
function popId() {
if(!document.getElementById('txt_id').value){ // 입력된 아이디가 없을 때
alert('아이디를 입력해주세요.');
}
else { // 입력된 아이디가 있을 때
alert(document.getElementById('txt_id').value);
}
}=> 입력된 id 가 없을 때 아이디를 입력해달라는 팝업창이 뜨고, 있을 때는 입력된 값이 팝업창에 뜬다.
4. 최종 코드
html 파일
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> LOGIN </title>
<link rel="stylesheet" href="login.css" />
<script type="text/javascript" src="login.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 id="btn_login" type="button" value="login" onclick="popId()">
</form>
</body>
</html>
js 파일
/* ID 란에 입력된 값을 팝업 창에 띄우기 */
function popId() {
let userId = document.getElementById('txt_id').value;
if(!userId){ // 입력된 아이디가 없을 때
alert('아이디를 입력해주세요.');
}
else { // 입력된 아이디가 있을 때
alert(userId);
}
}
/* 나만의 함수 만들고, 버튼을 클릭하면 호출하기 */
function myFunction () {
alert('내가 만든 함수!');
}
🌟 배운 점
오늘은 CSS 와 자바스크립트에 대해서 배웠는데, 다 알던 내용임에도 불구하고 중간 중간 헷갈리는 것들이 있었다. 점점 진짜 웹을 만들어가고 있는 것 같아서 재미있다. 오늘 수업은 완전 기초만 배웠는데, CSS 와 자바스크립트의 심화 내용까지 능숙해지도록 혼자 공부가 필요할 것 같다.
'데브코스' 카테고리의 다른 글
| 데이터베이스(Database) (0) | 2024.08.24 |
|---|---|
| 백엔드(back-end) (0) | 2024.08.22 |
| 웹(Web) (0) | 2024.08.20 |
| 협업 Tool (0) | 2024.08.19 |
| 깃 브랜치(branch) (0) | 2024.08.16 |
