스파르타 코딩 1주차
HTML, CSS 기초 내용.
HTML과 CSS의 개념: HTML은 뼈대, CSS는 꾸미기!
HTML 기초
- HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.
- head 안에 들어가는 대표적인 요소들: meta, script, link, title 등
- body 안에 들어가는 대표적인 요소들!
- **[코드스니펫] HTML기초**
html
<!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>
TIP: 맥은 cmd+alt+L 로 자동정렬 기능 사용가능
CSS 기초
<aside>
CSS는 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성.
mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 한다.
</aside>.mytitle {
color: white;
width: 300px;
height: 200px;
background-image: url('#');
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding-top: 40px;
}TIP: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + /
Javascript 기초
-프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성한다
<script> ~ </script> 내에 자바스크립트를 작성하는 것
<button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>
이런식으로 버튼에 함수를 연결해서 버튼을 누르면 함수가 불리게 할 수 있다. Javascript 기초 문법 배우기(1)
-let으로 변수를 선언한다.
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_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}을 출력
-리스트와 딕셔너리의 조합
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'Javascript 기초 문법 배우기(2)
-함수
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3-조건문
**20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)**if, else if, else if, else if else
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);
}**예제
let people = ['철수','영희','민수','형준','기남','동희']
// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
}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점 미만인 사람들의 이름만 출력할 수 있다.겨우 첫주차를 끝냈다.
HTML이랑 CSS까지는 내가 태그를 적용함에 따라 바로바로 변화를 볼 수 있는 것도 좋고 이해하기도 쉬웠는데 Javascript를 들어가자마자 나는 얼마나 멍청이인것인가에 대해 고민하게 됐다..
처음에 개념을 설명해 주시고 예제를 같이 풀어나가는 식의 수업 방식이었는데 분명 개념 설명 때는 다 이해한거같고 그렇게 어려운 내용이 아닌거같았는데 막상 해설을 보기전 영상을 멈춰두고 혼자 하려니 방금 배운 내용인데도 에러가 나고 그랬다..허하하허ㅏ... 그래도 계속 반복하다보면 나아지겠지..? 5주차를 끝낸뒤의 내가 이 글을 보면 어떤 기분일지 궁금하다.
노는게 제일 좋아