줄정리
ctrl+alt+l
주석처리
Ctrl + /
이미지 삽입
- HTML 파일 내에 이미지 파일 첨부시
-> 이미지 파일 이름을 적어주면 된다.
- 다른 서버 이미지 사용시
<a herf="이미지 있는 사이트 주소">
<img src="이미지의 주소" alt="이미지 없을 때 나타나는 텍스트">
</a>sample cord
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>
로그인 페이지 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<p><button> 로그인하기</button></p>
</body>
</html>
javascript
-
브라우저 페이지 마우스 오른쪽 클릭 -> 검사 -> console(javascript)
visual studio로 코드를 수정하지 않고 개발자 콘솔에서 바로 코드 수정 가능
클리어콘솔해도 브라우저 새로고침 하지 않는한 코드 존속윈도우: F12
맥: alt(option) + command + i
- 변수 리스트 추가
let a_list = [] // 리스트를 선언. 순서 중요
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력- key:value
let a_dict = {} // 딕셔너리 선언. 순서 중요하지 않음
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력
let a_list = ['수박','배','감']
a_dict['fruts']=a_list // ['수박', '배', '감'] 출력
a_dict //{name: 'bob', age: 27, heignt: 180, fruts: Array(3)} 출력
a_dict['fruts'][2] //'감' 출력- 문자열 나누기
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 -> 간단하게 쓸 수도 있다!- 함수
function mysum(num1, num2){
//shift enter
//clear console ctrl+l
alert('Hi!')
return num1+num2
}
let result = mysum(2,3)
//경고창 뜬 후 result = 5
- if
let age= 24
let sex='남성'
if (age>20&&sex=='남성'){
console.log('성인 남성입니다')
}//콘솔창에 결과값 나옴
else if(age>7&&sex=='남성'){
console.log('남자 청소년입니다')
//위 조건이 충족하지 않으면
}
else {
console.log('아동입니다')
}
}- 반복문
예제 1
let people =['철수','영희','민수','형준','기남','동희']
for(let i=0; i<people.length; i++){
console.log(people[i])
}예제 2
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++) {
console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있다.