- Frontend - login.html
1-4 파이참 단축키.
커맨드 + 옵션 + L. => 파이참 줄 정렬. * 정렬하고 싶은 부분을 블록으로 감싸서.
블록으로 감싼 후 탭 => 모든 줄 앞을 한칸 씩 띄움.
Shift + tap => 블록으로 감싼 줄들을 다시 앞으로 한칸 씩 땅겨옴.
1-8 파이참 단축키.
Command + / -> 주석처리하고 싶은 라인을 블록으로 씌우고 단축키
입력 시 해당 라인이 /**/ 로 감싸짐
참고로 css 나 js 주석은 /**/ html 주석은ㅋ <!— —>
추가로, 해당 단축키를 한번 더 누르면 주석이 풀림.
——
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
——
-> css 스타일 파일을 외부로 빼고, 그 파일의 링크를 가져와서 css 파일 안에 있는 클래스나 아이디를 가져와 쓰는 법.
——
https://fonts.google.com/?subset=korean
——
-> 구글웹폰트.
이런 식으로 가져와서.
font-family: 'Black Han Sans', sans-serif; 이렇게 클래스 스타일 속성으로 붙여 넣으면 됨.
* <link> 태그는 <head> 태그 안, css <style> 태그 위에 넣어야 해.
Index.html.
-> 부트스트랩 시작 템플릿.
——
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
——
부트스트랩 컴포넌트 5.0 => https://getbootstrap.com/docs/5.0/components/buttons/
1-9 부트스트랩 사용해보기. (남이 만든 css를 마치 파일링크 마냥 가져와서 사용)
1-10 display: flex 속성을 사용하여 태그들 가운데로 정렬하는 방법.
1-11 구글폰트 link href 로 가져와서 css 에 속성으로 사용.
1-12 본격적으로 부트스트랩을 사용해서 페이지를 꾸며보기.
https://getbootstrap.com/docs/5.0/components/buttons/ 부트스트랩 컴포넌트 페이지 접속, Components -> card 카테고리 접속.
card 양식 중 하나를 copy하여 가져옴.
—
.wrap{
width: 1200px;
margin: 20px auto 0px auto; /* 상 -> 우 -> 하 -> 좌. 위쪽 부터 시계 방향. */
}
—
그냥 margin: auto 하면 상하좌우 다 중앙으로 맞춤. 위의 코드같은 경우 좌우는 auto를 주고 상하는 margin 으로 외부 여백을 준 것.
https://kr.piliapp.com/facebook-symbols
-> 각종 이모티콘들 모음.
1-13 포스팅박스 완성하기.
영화 URL은 부트스트랩의 Forms 카테고리 - Floating labels 의 Example 양식을 채택.
별점박스는 부트스트랩의 Forms 카테고리 - input group의 Custom forms 참고
코멘트 URL은 Forms 의 Forms 카테고리 - Floating Labels의 Textareas 참고.
기록하기/닫기 버튼은 Components 카테고리 - button 것을 참고해도 되고.
1-14 자바스크립트 맛보기
——
let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
let a = 1
let b = 2
a+b // 3
a/b // 0.5
let first = 'Bob'
let last = 'Lee'
first+last // 'BobLee'
first+' '+last // 'Bob Lee'
first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
——
=> 숫자 변수 + 문자 변수 => 숫자 변수를 문자로 바꿔서 문자로 출력.
객체.
——
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기. 이런 식으로 추가로 키와 값을 명명해주면 객체에 키가 추가됨.
height 라는 키가 기존엔 없으니 오류다! 라고 뜨는게 아니라.
b_dict // {name: "Bob", age: 21, height: 180}을 출력
——
리스트와 객체의 조합.
——
let names = [
{'name':'bob', 'age':20},
{'name':'carry', 'age':38}
]
names[0]['name'] = 'bob'
names[1]['name'] = ‘carry'
new_name = {'name':'john', 'age':7}
names.push(new_name)
결과,
names = [
{'name': 'bob', 'age':20},
{'name': 'carry', 'age':38},
{‘name’: ‘John’, ‘age’:7}
]
names = [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
names[2]['name'] = 'john'
-> names 라는 리스트의 2번째 인덱스인 객체의 ‘name’ 키의 벨류 => ‘john’
즉, list의 인덱스를 호출할 때도 [0], 객체 {}의 키를 호출할 때도 [‘name’]
——
나눗셈 나머지를 구하는 계산
——
let a = 20
let b = 7
a % b = 6
——
특정 문자로 문자열을 나누어서, 나누어진 문자들을 리스트로 만드는 법. split() 함수 사용.
——
let myemail = 'sparta@gmail.com'
let result = myemail.split(‘@‘). // ['sparta','gmail.com']
result[0] // sparta
result[1]. // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] = gmail
result2[1] =com
myemail.split('@')[1].split(‘.’)[0] // gmail
——
1-17 자바스크립트 연습.
Function을 script 태그안에서 작성하여 선언하는 방법과, 이를 호출하는 방법을 배움.
1-18 반복문.
계속해서 index.html 에서 작성중.
List 와 for문을 함께 사용하기.
1-19 반복문 다시 연습.
Frontend -> homework_Week1.html
1-20 숙제.
JAVA SCRIPT
Life coding -> js
자바스크립트는 정적인 html 페이지와 사용자가 상호작용할 수 있도록 도와주는 언어다.
ex1.html
——
<input type="button" value="자바스크립트 연습" onclick="alert('hi');"> onclick 이벤트.
——
html 설명서에 의하면, onclick 속성의 속성값으로는 반드시 ‘자바스크립트’ 가 와야 된다. 라고 명시되어 있다고.
또한, onclick 속성의 속성값은 웹브라우저가 기억하고 있다가 해당 속성이 위치하고 있는 태그(이 경우 버튼)를 사용자가 클릭했을 때,
기억하고 있었던 자바스크립트 코드를 자바스크립트의 문법에 따라 해석해서 적혀있는데로 웹브라우저가 동작할 것이라고.
——
<input type="text" onchange="alert('changed’)”>. onchange 이벤트.
——
textarea 내부의 내용이 변경되었을 때, 엔터를 치거나 텍스트에리어 바깥에 마우스 커서를 클릭할 경우 발동하는 메소드.
텍스트에리어의 내용이 변경되지 않았을 경우, 혹은 내용이 변경되어도 엔터/바깥 클릭 하기 전에 내용을 원래대로 돌려놓는다면, 메소드는 발동하지 않음.
——
<input type="text" onkeydown="alert('key down')"> onkeydown 이벤트.
——
해당 텍스트 태그에서 타이핑을 할 경우, 키 하나 하나 타이필 할 때마다 이벤트를 발생시킬 수 있음. 타이핑한 문자는 텍스트에리어에 기록됨.
——
alert('ewriosdfndjvndnwjofueyiqwueyqworuiweorhdfjskdgbvcnmbcnmvbnd,vbhejvb'.length);
——
이런 식으로, 자바스크립트에서는 문자열의 length로 문자수를 리턴해.
'내일배움캠프_개발일지 > 웹개발 종합반' 카테고리의 다른 글
| 웹개발 종합반 5주차 일지 (0) | 2022.10.28 |
|---|---|
| 웹개발 종합반 4주차 일지 (0) | 2022.10.26 |
| 웹개발 종합반 3주차 일지 (0) | 2022.10.24 |
| 웹개발 종합반 2주차 일지 (0) | 2022.10.21 |
| 글 업로드 테스트 (0) | 2022.10.17 |