HTML 뼈대
CSS 꾸미기
JAVASCRIPT 움직임
Ctrl + Art + L 줄맞추기
- 모든 태그에 적용
HTML
<head>
페이지의 속성정보 (눈에 안보이는 정보)
요소 : meta, script, link, title 등
<body>
페이지의 내용
요소 : div, p, ul(li), h1-h6, hr, span, a, img, input, button, textarea 등<!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>_외우지 않아도 된다고 하셨지만 대충은 기억해 두고 어떻게 적용할지 생각해보자.
CSS
head 안에 style로 공간 만들어 작성. (너무 길어지면 파일 분리할 수 있음)
1. 이름표 붙이기 2. 꾸미기
자식을 표현할때 '>'
배경관련 (셋이 같이 다님)
background - color
background - image
background - size
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.topstarnews.net/news/photo/201807/456143_108614_510.jpg');
background-position: center 30%;
background-size: cover;사이즈
width
height
간격
margin 바깥여백
padding 안쪽여백
+추가 css 네개가 같이 다님
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;_이외에도 많다고 하니 더 찾아보자!
주석
필요없어진 코드를 삭제하는 대신 임의로 작동하지 않도록 하는것. + 코드에 설명 붙일때 사용.
Ctrl + /
bootstrap
잘꾸민 css를 모아둔 것.
Javascript
HTML 연결, 버튼을 클릭하면 경고창이 뜨게하는 것.
head 안에 script를 만들어서 script안에 자바스크립트를 작성.
변수, 자료형, 함수, 조건문, 반복문
변수 : 값을 담음
let a = 2 a=2
let b = 3 b=3
a+b=5자료형: 순서! (숫자? 문자?)
1. list 순서, 2. dict / key,value
1. list
**console창**
let a_list = ['수박', '참외', '배']
undefined
a_list [1]
'참외'
a_list.push ('감')
4
a_list
(4) ['수박', '참외', '배', '감']2.dict
let a_dict = {'name':'bob', 'age':27}
undefined
a_dict['name']
'bob'
a_dict['height'] = 180
180
a_dict
> {name: 'bob', age: 27, height: 180}함수 : 정해진 동작을 함.
기본생김새
function 함수이름 (필요한 변수) {
내릴 명령들을 순차적으로 작성
}**html 파일에**
function sum (a,b) {
alert (a+b)
}
**console창**
sum(2,3)
5조건문 : 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)
반복문
for (1. 시작조건; 2. 반복조건; 3.더하기){
4.매번실행
}
for (let i =0; i < 100; i++){
console.log(i)
}+자체 함수
**console창**
let myemail = 'sparta@gmail.com'
undefined
myemail.split('@')
(2) ['sparta', 'gmail.com']
myemail.split('@')[1]
'gmail.com'
myemail.split('@')[1].split('.')[0]
'gmail'split -> '조건' 기준으로 앞뒤를 나눠준다.
흥미로운 친구 인거같다. console창에서만 나눠주나?
영어 타자가 어려운 건지 머리가 어질어질하다. 처음 하는 코딩이라서 어렵긴 한데 그래도 재미있다. 자주자주 복습해서 영타에 익숙해지자. 강의 처음 들을 때 너무 머리 아프고 코딩 따라 쳐보는 것만도 힘들어서 정리할 생각을 못 했다. 2번 듣고 정리도 하고 강의 내용 첫 개발일지를 써봤다. 개발일지를 쓰면서 3번째 정리를 한다고 생각하고 쓰니 더 생각이 정리 되는 거 같다.
