웹개발에서>
HTML은 페이지의 뼈대를 담당한다.
CSS는 페이지의 디자인을 담당한다.
JavaScript는 페이지의 기능을 담당한다.
CSS>
Code는 외울 필요없이 그때그때 필요한 것만 찾아서 사용하자.
div는 그룹(폴더)를 만드는 코드다.
class를 명명하면 style에서 해당 class에 해당하는 source들을 한번에 다룰 수 있다.
margin: 20px 0px 0px 30px;margin: top left bottom right;
margin: auto;자동으로 center 기준으로 여백을 띄워준다.
display: block;text는 width라는 개념이 없기 때문에 위 코드가 필요하다.
*은 모든 class를 부른다.
Ctrl+/ = 주석 달기(html과 css는 주석 표기가 다르다.)
부트스트랩>
https://getbootstrap.com/docs/4.0/components/alerts/
JavaScript 기반의 시작 템플릿이 필요하다.
다른 사람이 만든 css 디자인을 가져올 수 있다!
div로 묶어서, 나의 css와 부트스트랩을 같이 사용할 수도 있다.
w3schools : css 코드가 많다.
JavaScript>
역사적인 이유 등으로 인해 웹 기능에 대한 표준 언어를 Js로 지정하였다.
(기본적인 틀은 Java, C, Python처럼 다룰 수 있는 걸로 보인다.)
<script> function hey() { alert('Hey'); } </script> <body> <a onclick="hey()"></a> </body>function hey를 사용하면 'Hey'라는 문구가 나오도록 지정하고, onclick을 사용해 클릭 시 함수가 실행되도록 한다. 이때 alert의 text는 "가 아닌 '임에 주의!
let a = 2a를 2라는 상수로 지정
a + 3실행 시, 8이 나옴
a = 5실행 시, a는 5가 됨
문자열 또한 '', ""로 가능
방향 ↑키를 누르면 이전에 작성한 스크립트가 복제된다.
list, dictionary>
let a_list = [][]는 list를 다룰 때 사용한다. 물론 '', ""를 사용하여 문자열도 가능하다.
a_list.push().push는 기존 a_list에 ()를 추가한다. 문자열도 가능하다.
let a_dict = {'name':'bob','age':27}{}는 dictionary를 다룰 때 사용한다. :는 전자에 대치되는 후자를 정할 수 있다.
a_dict['name']불러올 때는 []를 사용한다.
a_dict['height'] = 180별도의 추가 문구 없이 직관적으로 위와 같이 추가할 수 있다.
a_dict['fruits'] = a_listdictionary에 list를 추가할 수도 있다.
a_dict['fruits'][n]마찬가지로 순서 n을 넣어서 list를 불러올 수도 있다.
자세한 사칙연산은 파이썬과 비슷하니 패스~
let myemail = 'email@naver.com' myemail.split('@')@를 기점으로 list 형식의 앞뒤로 나눌 수 있다.
myemail.split('@')[1]마찬가지로 list의 두 번째 항목을 불러온다.
myemail.split('@')[1].split('.')연달아 쓸 수도 있다. 결과는 ['naver','com']일 것이다.
funtion>
python과 비슷하므로 간단하게~
function sum(num1, num2) { return num1+num2 }함수 sum을 사용하여 num1과 num2을 더한 값을 return 한다.
sum(num1, num2)결과는 num1+num2 다.
if 문법도 python과 같으므로 패스~ &&, || 까먹지 말고... elif가 없어서 아쉽다...
while, for도 같으므로 패스~하지 말고 순서가 헷갈리니까 메모...
for (let i = 0; i < 10; i++) { console.log(i) }(1, 2, 3) = 1:시작조건, 2:반복조건, 3:실행할 것
let people = ['철수','영희','민수','형준','기남','동희'] for (let i = 0; i < people.length; i++) { console.log(people[i]) }list와 함께 쓰면 시너지 Up
let scores = [ {'name':'철수', 'score':90}, {'name':'영희', 'score':85}, {'name':'민수', 'score':70}, {'name':'형준', 'score':50}, {'name':'기남', 'score':68}, {'name':'동희', 'score':30}, ] for (let i = 0; i < scores.length; i++) { let name = scores[i]['name'] let score = scores[i]['score'] console.log(name,score) }결과는 '철수 90'처럼 나온다. if문을 섞어서 골라내는 것도 재밌다!
