웹개발 종합반 1주차
12월 19일 첫째날 시작
0. 네이버 사전 우클릭 검사 -> 코드 수정해도 내꺼만 바뀜 새로고침 누르면 다시 원점
1. 브라우저가 하는 일은 내가 요청하면 가져다 보여주는 것이다.
2. 보여줄 때는 HTML CSS JAVASCRIPT 세가지가 동작한다.
3. 비주얼 스튜디오 코드는 마이크로소프트에서 만들었다. 쓰는 이유: 보고서를 워드에 쓰지, 메모장에 쓰지 않듯이. 기능 편리.
4. 내가 모르는 컴퓨터 VScode 초기 세팅 - 큐빅스모양 extention 들어가서 live server, korean lang 설치
5. HTML은 뼈대 CSS는 꾸미기 JAVASCRIPT는 움직이기
6. HTML의 <head>는 시스템적인부분. 브라우저에 잡히도록 할 때. <body>는 눈에 보이는 부분 하얀창 안쪽 내용.
7. 코드를 다 알지 못해도 된다. 얼개만 이해하고 있으면 필요할 때마다 가져다가 잘 쓰면 됨.
8. <div>태그 문단을 나눈다. 구역을 나눈다. 뼈대의 핵심
9.<h1>페이지의 제목이 된다. 페이지마다 하나씩은 넣어줘야 구글이 가져갈 때 아, 제목이구나 한다.
10.<span> 특정 글자를 감쌀 때 쓴다. <span style="color red">
11. 하이퍼 링크 넣을 때는 <a>태그. <a href="http://www.naver.com"?> 하이퍼링크 </a>
12. 이미지 태그는 <img src="https://www.google.com/images/branding/google" />
13. 외우기보단 필요한 게 있으면 복사해서 쓰고, 내 입맛에 맞게 바꾼다. 이게 코딩의 본질.
</첫째날 끝>
<둘째날 시작>
14. 박스 칠 땐 <div></div>
<div>
<h1>로그인페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
15. 이제 CSS. CSS는 꾸미기다. 꾸미려면 먼저 지명을 해야한다. 너! 명찰붙이기.
명찰붙이기 기본은 class=""
<div class="mytitle">
<h1>로그인페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
16. 명찰을 붙였으면 <head>로 가서 구체적인 지시를 시작한다. 스타일태그 쓰고 쩜 마이타이틀 띄고 중괄호
<head>
<style>
.mytitle {
background-color: green; @@세미콜론 꼭 붙일것
width: 300px;
heigh: 200px;
border-radius: 10px;
text-align: center;
padding: 30px 0px 0px 0px;
그리고 만약에 이미지 넣을라면
background-image: url(' '); 유알엘귀요미땀 background-image: url(' '); 귀요미 콧 속에 이미지 링크 넣기
이미지가 구석탱이만 잡혔으면
background-position: center;
이미지가 전체 잡히길 바라면
background-size: cover;
그래서 이미지 넣을 때는 세 개가 함께 다닌다고 보면 된다.
background-image: (' ');
background-position: center;
background-size: cover;
}
</style>
</head>
17. 폰트를 넣을 때는 구글폰트에서 긁어다가 스타일 밑에만 넣으면 되는데, fonts.google.com 폰츠구글쩜컴 기억하기.
들어가서 맘에 드는 폰트 클릭 > 스크롤 내려서 사이즈 셀렉션 > 오른쪽에 유즈 온더 웹에서 코드 긁기 > 스타일 밑에 골뱅이 @import 부터 쌩으로 붙이기 > CSS rules 패밀리도 긁기 > 별 띄 중괄호
* {
CSS rules 패밀리 복붙
}
저장 하면 폰트 들어감.
18.주석 붙이기는 Ctrl + / 주석 취소하기도 마찬가지로 Ctrl + / 컴퓨터가 모르게 적는게 주석이니까 뭐 해놓고 껏다켰다 비교할 때 써도 되고, 개발자들끼리 비밀편지(?) 보낼 때 써도 된다.
19.스타일 파일 통째로 분리하기
먼저 폴더에서 파일 하나 더 만들어야 됨 style.css
원래 쓰던 코딩에서 <style></style> 전부 다 긁어다가 옮기기
원래 쓰던 코딩의 헤드태그에 링크태그 넣기 @@흐레프만 띄고는띄고임
<link rel="" type="" href = "">
rel에는 스타일쉿 type에는 텍스트/씨에세스 href에는 내가 뗘다놓은 style.css 파일명을 적는다. 그러면 통째로 불러오기가 됨.
예시.
<link rel="stylesheet" type="text/css" href = "style.css">
12월 20일 둘째날 끝.
12월 21일 셋째날 시작!
20. 박스 시작할때는 <div> 박스는 무조건 <div> 다.
21. 박스 만들고 났으면 <style> 태그에서
.박스명찰 {
background-color: green;
width: 500px; 이런식으로 가로사이즈 값을 먼저 정해줘야 중앙 정렬 같은 걸 할 수 있다.
중앙 정렬을 할 때는 margin이랑 padding을 쓰는 방법도 있지만 그것보다 좋은게 디스플레이 플렉스
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
요로케 네 줄.
여기서 상황에 맞게 column을 row로 바꾸면 가로로 정렬됨.
}
margin을 쓸 때는 위 아래를 20px 먹이고 좌우에서 auto를 먹이면 위아래는 살짝 떼면서 중앙 정렬 된다.
auto는 쫙 미는 것
22. <div>박스 안에 그림을 넣으려면
background-image를 쓰면 되는데 이건 세 줄이 함께 따라다닌다. 일명 임포싸
background-image: url(' ');
background-position: center;
background-size: cover;
23. 부트스트랩에 가면 이미 만들어 놓은 예쁜 CSS 태그들을 쓸 수 있음. (getbootstrap.com 혹은 getbootstrap.kr)
24. 폰트는 구글 폰트에서 가져다가 <style>태그 바로 아래에 @import로 붙여넣는다. 그리고 밑에 * { } 하는 거, 패밀리 폰트 넣는거 잊지 말기.
25. 배포는 무료배포사이트 여러가지 있겠지만 (넷플리파이 등) github.com 을 쓴다.
깃허브 들어가서 > Create a new repository > repository name 아무거나 적고 > 다시 스크롤 밑으로 create repository > uploading an existing file > 만들어뒀던 index.html 파일 드래그 **여기서 반드시 파일명은 index.html 이어야함. 그냥 깃허브의 규칙임. > Commit changes 하고 > 등록될 때까지 잠시 기다렸다가 > Settings > Page > Visit site 확인하고 끝
수정은 Code 들어가서 > index.html 누르고 > 연필버튼 누르고 > Ctrl + a 해서 전체 지운 다음에, 비쥬에서 새로 작성한 코드 전체 긁어 넣고 Commit changes 하면 됨 > 마찬가지로 조금 기다리면 Visit site에서 확인할 수 있음.
--<22일 넷째날 시작!>--
버킷리스트만들기 챌린지 참여했음
26. 하나의 태그에 CSS 두개 붙이는 게 가능하구나! ㅇㅎ
--<23일 다섯째날 시작!>--
27. 동적웹사이트 만들기 시작했음. 자바스크립트 기초 배우는 중. 언어적으로 들어가니까 html, css 했을 때보다 태그가 더 복잡해진다. 기호들이 딱히 논리적으로 의미를 띄는 게 아니니까, 내가 원하는 기능을 구사하는 기호들의 조합과 순서를 눈알맹이에 익혀야 하는 것 같다. 아직 적응은 잘 안됨. 근데 원래 이런 건 계속 반복하면 나중엔 익숙해 진다는 걸!
자바스크립트 넣는 법.
CSS와 마찬가지로 태그에 명찰을 붙여서 지명하고 걔에 대해서 <head>태그 안에 써넣어야한다.
<button onclick="happen()">버튼입니다.</button> 이런식으로 명찰 붙여놓고, 위에 헤드에 올라가서
스타일 끝나는 지점 밑에 하나 새로 벌린다.
</style>
<script>
</script>
이 스크립트태그가 자바스크립트다. 요 안에 내용물을 넣으면 됨. 먼저 알러트라고, 클릭 시 경고창이 뜨게 하는 방법
<script>
function happen(){} 해놓고 해픈버튼이 기능하도록 중괄호 사이에 기능내용 넣으면 됨. 기능 내용을 알러트 말고 다른걸로 바꾸면서 놀게 되는 것.
</script>
<script>
function happen(){
alert('안녕하세요')
}
</script>
이러면 안녕하세요 뜸.
28. console.log에 대해서. 콘솔이란, 여러가지 버튼과 장치가 달린 기계 덩어리를 말한다고 함. 프랑스어로 'consoler' '틀'이라는 뜻.
컴퓨터에서는 웹사이트 마우스 우측 클릭 > 검사 > 개발자도구 DevTools에 console 탭이 있다.
콘솔 탭에서는 내가 적은 코드가 제대로 기능하는지 금방금방 확인해볼 수 있다. HTML이나 CSS는 코딩하고 저장만 하면 바로바로 Live server에서 확인 할 수 있지만, 자바스크립트 같은 경우에는 눈에 보이지 않는 로직을 설계해 놓는 거라, 변화를 바로바로 육안으로 볼 수 없기에 따로 콘솔창을 띄워서 확인 하는 것 '같다'. 초보의 추정.
아무튼 콘솔창 띄우고 자바스크립트 적는 다고 한다. 콘솔창이 VSstudio 코딩판이랑 연결되어 있음.
29.버튼 안눌러도 콘솔에서 변화 확인할 수 있게 하기
<script>
console.log('hello world')
</script>
해놓고 콘솔탭 키면 hello world만 맨 위에 떠 있음. 이 상태에서 연습시작하기.
즉, console.log( ) 안에 쓰는 로직은 연산되어서 콘솔탭에 뜬다는 것이다.
console.log('hello world')를 다시 지운다.
그 상태에서 지운 자리에 작성하면 됨.
let a=2 여기서 a , b 이런애들은 변수라고하는데, 값을 담는 박스라고 생각하면 된다.
let b=3 그래서 숫자 말고 문자를 담을 수도 있음. 대한 + 민국 사과 + 사과 이런 식.
console.log(a+b) a 더하기 b를 출력해보세요~ 라는 뜻임
숫자는 그냥 쓰고, 문자는 '이렇게' 작은 따옴표로 묶어서 써야 알아듣는다.
그래서
숫자는 console.log(a+b)
문자는 console.log('안녕하세요') 이다.
30. 계속 let a=@ let b=@ let c=@ let d=@ 이렇게 써내려가면 너무 현타오니까 꾸러미를 만들면 간편하다.
(let a, b, c 같은 변수를 응용하여 자료형으로 쓰기 시작하는 거다)
꾸러미 만드는 법.
<script>
let a = [ ]
console.log(a)
</script>
이렇게 해서
<script>
let a = ['사과','수박','오렌지','감']
console.log(a)
</script>
문자가 아니라 숫자라면
<script>
let a = [1,2,3,4,5,6,7,8,9,10]
console.log(a)
</script>
작은따옴표 없이 이렇게 되겠지.
다시 문자 꾸러미로 가서
<script>
let a = ['사과','수박','오렌지','감']
console.log(a)
</script>
여기서 a의 첫번째꺼를 가져오자, 컴퓨터는 0부터 시작하기 때문에, 첫번째꺼는 a[0]이다.
<script>
let a = ['사과','수박','오렌지','감']
console.log(a[0])
</script>
이렇게 하면 콘솔탭에
사과
이렇게 뜸.
31. 요 때, a 안에 들어있는 [사과 수박 오렌지 감] 이런애들을 '요소'라고 부른다.
그리구 이 요소의 갯수를 바로 아는 방법도 있다.
console.log(a.length) 이렇게 치면 댐. 쩜 렝쓰
32.이번에는 딕셔너리 (키:밸류 로 이어지는 딕셔너리형)
<script>
let a = {'키값':'밸류,'key':'value','숫자':27} 이렇게 됨. 키값과 밸류 사이의 관계가 : 콜론(쌍점)으로 표시됨에 주의.
</script>
이렇게 하고
<script>
let a = {'키값':'밸류,'key':'value','숫자':27} 이렇게 됨. 키값과 밸류 사이의 관계가 : 콜론(쌍점)으로 표시됨에 주의.
console.log(a['키값'])
</script>
33. 꾸러미 안에 딕셔너리를 넣어서 쓸 수 있음
<script>
let a = [
{'name'='영수,'age'='28'}
{'name'='철수,'age'='14'}
{'name'='영희,'age'='35'}
]
</script>
이렇게 해놓고, 철수의 나이를 불러오고 싶으면,
<script>
let a = [
{'name'='영수,'age'='28'}
{'name'='철수,'age'='14'}
{'name'='영희,'age'='35'}
]
console.log(a[1]['age']) 대괄대괄 '타고타고 들어간다'
</script>
그러면 콘솔탭에 철수의 나이인 14가 뜸.
34. 자바스크립트로만 코딩하면 너무 복잡하고 어렵기 때문에 JQuery라는 걸 쓴다.
명령어를 단축시킬 수 있음. 예를 들어
<div id="mytitle">를 없애주세요. 흐리게 해주세요는,
$('#mytitle').hide();
요로케 간단히 쓰면댐
제이쿼리에서 뭐를 하자는
$('# ') 이게 기본이다.
35. JQuery에서 명찰 잡을 때는 id=""로 잡는다.
CSS에서 class=""로 잡았던 것과 비슷
36. 버튼 눌렀을 때 경고메시지랑 원하는 문구 뜨게 하려면
<script>
function mytitle(){
let a = '원하는 문구입니다'
alert(a)
}
</script>
<body>
<button onclick="mytitle()"
</body>
37. 버튼 눌렀을 때 id="q1" 명찰 붙은 <div id="q1">테스트</div> 가
테스트라는 글씨 말고 사과라는 글씨로 뜨게 만들려면
<script>
function mytitle(){
let a = '사과'
$('#q1').text(a) 요로캐 해준다 .text(a)가 아까 a로 지정한 텍스트를 띄우라는 뜻.
}
</script>
<body>
<button onclick="mytitle">결과 확인하기!</button>
<div id="q1">테스트</div>
</body>
38. 이제 자바스크립트의 안배운 두가지 문법. 반복문과 조건문.
반복문: let a = [..., ...., ..., ..., ..., ... ]
요소들을 반복해서 꺼내오는 것이 반복문.
요론 리스트에 있는 요소 하나하나를 꺼내와서 뭔가 찍어줘라.
요소 하나하나를 꺼내와서 뭔가 조작해라.
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})
39.조건문 : 꺼내온 요소들의 값을 비교하는 것.
<script>
let age = 14
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
</script>
40. 변수, 자료형, 딕셔너리형, 함수, 반복문, 조건문
이렇게 5가지 알면 어떤 프로그래밍 언어든 문법 구사 가능.
'About coding > Weekly I learned' 카테고리의 다른 글
| [WIL]2023년 2월 12일~18일: Jquery 기본코드 한 줄, 부트스트랩 기본코드 (0) | 2023.02.17 |
|---|---|
| [WIL]23년 1월 15일~21일: AWS로 배포하는 방법 (0) | 2023.01.16 |
| [WIL]23년 1월 8일~14일: 서버 만드는 법 flask (0) | 2023.01.14 |
| [WIL]23년 1월 1일~7일 (0) | 2023.01.07 |
| [WIL]22년 12월 26일~31일 (0) | 2022.12.25 |