부트스트랩: 남이 만들어 놓은 예쁜 css 꾸러미
부트스트랩 사용하는 방법
원하는 div 코드 가져오기
→ F12 누르고 우측 코드 가져오기
태그가 하나면 클래스를 지정할 필요가 없음
<header></header>
<body></body>
<footer></footer>
브라우저의 3대 요소
HTML, CSS, JavaScript
자바스크립트: 브라우저가 알아들을 수 있는 프로그래밍 언어
웹 페이지의 움직임
서버와의 통신
모바일 청첩장이면, 보고 댓글도 남길 수 있음
무언가가 없어지고, 사라지고, 바뀌는 것
사용하는 이유
표준이 되어서
자바스크립트와 자바(Java)의 차이
없음
인도와 인도네시아
햄과 햄스터
작성하는 방법
<script> 엘리먼트 안에 작성
console.log(); 는 '개발자 도구에 띄워주세요'
프로그래밍 언어 종류
변수
값을 담음
그릇
값을 담아서 한 번에 관리하는 것
let a = '은동이';
console.log(a);
// a는 '은동이'
let b = '사랑해';
console.log(b);
// b는 '사랑해'
let c = 8;
let d = 30;
console.log(c+d);
// c+d는 38
사용하는 이유:
코드의 재사용
유지보수
10이라는 선언된 변수를 100으로 수정해야 한다.
코드가 많지 않다면 각각 수정할 수 있겠지만
몇 십, 몇 백 줄이라면 번거롭고
실수하거나 누락되는 경우가 발생할 수 있다.
그렇게 되면 결과물이 예상과 다르거나
버그가 생길 가능성이 높아진다.
하지만,
변수를 사용하면 값을 변경하고 적용하는데
좀 더 효율적이고 쉽게 작업할 수 있다.
이름 정하는 방법:
직관적으로
let name = 'eundong';
let age = 5;
let color = 'white';
자료형
0부터 시작
100개, 1000개면 각각 입력하기 번거로우니까
let e = [사랑해, 미안해, 고마워, 괜찮아, 건강해, 다음에 언니 딸로 태어나, 또 만나];
console.log(e[5]);
// e[5]는 ' 다음세상에는 언니 딸로 태어나 '
해설)
0번째: 사랑해
1번째: 미안해
2번째: 고마워
3번째: 괜찮아
4번째: 건강해
5번째: 다음에는 언니 딸로 태어나
6번째: 언니 잊지마
7번째: 또 만나
let infinite = {'name' = sungkyu', 'birth': 1989, 'position': 'leader'}
console.log(infinite[name]);
// 'sungkyu'
console.log(infinite['birth']);
// '1989'
console.log(infinite['position']);
// 'leader'
let f = [Be Mine, Season 2, Tell Me];
$('.ifnt').text(f[2]);
// 'ifnt'라는 클래스의 텍스트가 'Tell Me'라는 텍스트로 변경됨
ex) let g = [
{ 'name' : 동우, 'birth': 1990, 'position': rapper},
// 0번째
{ 'name' : 우현, 'birth': 1991, 'position': main vocal},
// 1번째
{ 'name' : 성열, 'birth': 1991, 'position': vocal},
// 2번째
{ 'name' : 엘, 'birth': 1992, 'position': vocal},
// 3번째
{ 'name' : 성종, 'birth': 1993, 'position': vocal} ];
// 4번째
0번째 동우에게 접근하려면 $('.아이디명').text(g[0]['name']);
중괄호는 어디에 사용하고 꺽쇠는 어디에 사용하는지 알려고 하는것 보다
꺽쇠는 언제 쓰는거고 어떤 일을 할 때 쓸 수 있는지 공부하는 것이 더 좋음
함수
같은 동작을 반복하는 것
호출할 때마다 같은 동작을 함
function 함수명 () { } ;
ex) function bath() {
alert('지금 씻을까??');
}
조건문
let age = 27;
if ( age < 25) {
console.log('예쁜나이 25살이 지났네요');
}
else {
console.log('곧 예쁜나이 25살이 오겠네요);
}
반복문
반복할 대상이 있어야 함
ex) let ages = [2010, 2012, 2015, 2018, 2020];
ages. forEach(a = > {
if ( age < 2015) {$
console.log('아직 데뷔 5주년 전이네요');
}
else {
console.log('몇 년 뒤면 10주년이겠네요);
}
});
임포트: 미리 작성된 자바스크립트 코드를 가져오는 것
<head>엘리먼트 사이에 삽입
$('#color'): 아이디 선택
$('#song').text('13egin');
'color'라는 아이디를 가진 것을 '13egin '이라는 텍스트로 변경
$('#song').empty();
'color'라는 아이디를 가진 텍스트를 삭제
let fansong = `<p>flower</p>`;
$('#아이디명).append(fansong);
` : 백틱
숫자 키 1 좌측에 있는 기호
(맥이라면 한글은 원화 표시로, 영어는 `로 출력)
'내일배움캠프 > 내배캠_ [왕초보] 웹개발 종합반' 카테고리의 다른 글
| [왕초보] 웹개발 종합반 5주차 (0) | 2024.06.24 |
|---|---|
| [왕초보] 웹개발 종합반 4주차 (1) | 2024.06.21 |
| [왕초보] 웹개발 종합반 3주차 (0) | 2024.06.21 |
| [왕초보] 웹개발 종합반 1주차 (0) | 2024.06.18 |