html 기초 <body>
ctrl + a (전체 선택) , ctrl+alt+l (줄맞춤)/body 내용물은 탭 한번 해주면 보기 편함
<div> 구역
<p> 문단
<ul> 순서가 필요 없는 목록
<ol> 숫자나 알파벳 등 순서가 있는 목록
<li> ↑목록 내 항목들을 나열할 때
<h1> 제목 (있으면 검색엔진에 나타날 수 있음)
<h2> 소제목
<span> 태그 글자만 묶기
<a> 하이퍼링크
<hr> 가로선
css기초
태그에 class 붙이기
<div class="wrap" > <!--부모태그-->
<p> </p><!--자식태그-->
</div><div>란 부모태그에 class="wrap"을 넣어 지칭
이후 head 에 <style>을 만들어 꾸미기
<head>
<style>
.wrap
color : red;
font-size : 16px;
</style>
</head>이런 식으로 class를 이용해 명찰을 단 태그를 꾸미기 가능
폰트,주석달기
-구글 폰트 사용한다면
<link> 부분은 <head> 태그에 CSS 부분은 <style> 태그에 *{ } 이용해 붙이기
-주석
필요한 부분을 선택 ctrl + / 다시 바꿀 때도 동일하게
-css 파일 분리
css 파일을 같은 폴더에 만들고 head 태그에서 불러오기
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
javascript 기초
function 을 이용해 함수를 만들어 둔 후
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성
<script>
function hey(){
alert('안녕!');
}
</script>
<body>
<button onclick="hey()" type="button" class="btn btn-primary">안녕!</button>
</body>- let 변수 선언
- let a_list = [] // 리스트를 선언
* a_list.push(' ') // 리스트에 요소 넣기
* a_list.length // 리스트 길이 구하기
* a_list[숫자] // 특정 리스트 순서 출력
-let a_dict = { } // 딕셔너리 선언
혹은 let a_dict = {'name' : 'bob' , 'age' = 23} // 이렇게도 가능
let a_dict['height'] = 180 //딕셔너리에 키:밸류 넣기
리스트와 딕셔너리의 조합도 가능
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[2]['name']의 값은? 'john'% 나눗셈의 나머지를 구하고 싶을 때 ex)동등하게 배분하거나 홀짝을 구할 때
또, 모든 알파벳을 대문자로 바꾸고 싶은 경우
let myname = 'spartacodingclub'
myname.toUpperCase() // SPARTACODINGCLUB또, 특정 문자로 문자열을 나누고 싶은 경우
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 sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3-조건문
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)AND조건과 OR조건
// AND 조건은 이렇게
function is_adult(age, sex){
if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
// 참고: OR 조건은 이렇게
function is_adult(age, sex){
if (age > 65 || age < 10) {
alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
alert('성인 여성')
} else if (age > 20 && sex == '남') {
alert('성인 남성')
} else {
alert('청소년이에요')
}
}
is_adult(25,'남')
-반복문
for (let i = 0; i < 100; i++) {
console.log(i);
}
'정리' 카테고리의 다른 글
| 6-TIL 정리 (간단한 AWS-S3,IAM,CloudFront) (0) | 2022.04.25 |
|---|---|
| 5-TIL 정리(간단 pymongo정렬과 CSS flex) (0) | 2022.04.22 |
| 4-TIL 정리(flask와 aws를 이용한 서버세팅)-스파르타코딩클럽- (0) | 2022.04.22 |
| 3-TIL 정리 (Flask, API)-스파르타코딩클럽- (0) | 2022.04.21 |
| 2-TIL 정리(Ajax,파이썬,크롤링,pymongo)-스파르타코딩클럽- (0) | 2022.04.19 |