일기처럼 쓰면 된다고 해서 일기처럼 써볼까 한다.
배운 내용
01.
우리가 보는 웹 페이지는 서버에 있던 것을 받아서 보는 것임.
브라우저가 하는 일- 1)요청보내기 2) 받은 HTML 파일 그려서 보여주기 3) 데이터만 내려줄 때가 더 많다
요청을 보내는 곳은 서버의 API라는 창구임.
02. pycharm 다운, Jetbrain 회원가입, AWS 회원가입
- 맥북으로 pycharm 다운로드 하려고 했더니 계속 오류가 나서, window 노트북으로 다운 받아서 쓰고 있음.
03
HTML : 뼈대
CSS: 꾸미기
Javascript: 움직이는거 ( 기능 : 광고가 몇 초 한번씩 도는지, 어떤걸 클릭하면 다른 페이지로 가는거, 이거 누르면 로그인이 되는거)
<style> 을 이용해서 꾸밀 수 있지만 CSS 파일을 따로 만들어놓고 불러올 수 있다.
CSS를 할 줄 알더라도 예쁘게 만드는 것은 미적 센스 영역임. 나는 별로 못 할듯
HTML
head - 페이지 속성 정보
(들어가는 대표 요소 : meta, script, link, title - 눈에 안 보이는 필요한 것을들 담는 것임)
body - 페이지 내용 (대표 요소:
- 구역 나누는 태그
<div> 구역 나눔 </div>
<p> 문단 </p>
<ul>
<li> 불렛 포인트 </li>
<ul>
- 구역 내 콘텐츠 태그
< h1> 큰제목 , 이걸로 구글이 읽기 때문에 하나씩 써주면 좋음 </h1>
<h2> 소제목 </h2>
<h3~6> 각자의 역할이 있음 비중은 작지만 </hn>
<span = style = "color: red"> 특정 글자 꾸밀 때 사용 </span>
<hr> 줄 바꿈인듯 </hr>
<a href="주소">하이퍼 링크 </a>
<img src="이미지 주소"/> 이미지 나옴
<input type="text" /> input 하는거
<button> 버튼 </button>
<textarea> 텍스트 들어감 </textarea>
이 외에도 많지만 외워서 쓰는거 아니고 그때 그때 검색해서 찾아서 넣는 거임
- 코드 정렬이 제대로 되어있지 않으면 눈에 잘 안보여 코드 해결에 어려움 파이참에서는
컨트롤 + 알트 + L 누르면 됌
04 간단 로그인 페이지 만들어봄.
05. HTML은 누가 누구 안에 들어있는냐가 중요.
왜냐면 영향을 받느냐 안 받느냐가 달려있음
<div> 안에 또 <div> 또 <div> 계속 되는 경우가 많아서 어디에 포함 되어있는지 헷갈릴때가 있는 듯
CSS 기초
<head>
<style>
.mytitle {
background-color:
(이거 세개 세트로 잘 씀)
background-image:
background-size:
background-position:
border-radius
width:
height:
font-size:
font-weight:
font-family:
color:
margin: 바깥 여백
padding: 안쪽 여백
}
</style>
</head>
07. 로그인 페이지 가운데로 가져올 때
.wrap {
margin: 10px auto; 이렇게 씀
}
08. 폰트 - 구글에 들어가서 폰트 선택해서 상자에 넣고
embed에 들어가서
제일 마지막 줄 link를 복사
<head>
복사한 링크 여기 붙이기
</head>
<style>
CSS는 여기에 font-family:
</style>
주석은
1.임시로 코드를 작동 못하게 할 때
2. 코드에 간단한 설명을 붙이고 싶을 때
사용한다.
-개발자 본인 또는 동료를 위해 붙임
단축키: 컨트롤 + /
CSS 파일 분리 - 강사님이 하는거 구경만 함
<style> 전체를 싹둑 잘라서 다른 파일로 저장하고 이름은 파일이름.css
<head>
<link rel="stylesheet" type="text/css" href + "파일이름.css">
</head>
09. 부트스트랩 - 이미 예쁜 CSS를 모아둔 것
부트스트랩 시작 텝플릿을 복사해서 썼다.
템플릿에는 <head> </head> 사이에
meta 어쩌구 2개 Link랑 script 2개가 있는데
CSS의 파일을 인터넷에서 불러오는 역할을 한다고 한다.
버튼 만들기 연습을 했다.
10. 영화리뷰 사이트 만들기
글자 가운데 정렬 (4개 세트)
display: flex;
flex-direction: column; column 을 row로 바꾸면
align-items: center;
justify-contect: center;
이미지 어둡게 만들기
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
이걸 background image: 에 넣으면 된다.
마우스 갖다댔을 때 테두리 두껍게 만들기
.mytitle > button : hover {
border : 2px solid white;
}
13. 포스팅 박스 완성하기
원하는 모양에 따라 부트 스트랩에서 복사해서 <body>에 붙여넣기하고 몇가지 수정하면 끝.
모바일에서도 볼 수 있도록 하려면 가로 사이즈를
width: 95%;
max-width: 500px;
이런 식으로 95%비율로 보여주되 최대크기는 500px이다. 라는 식으로 설정해두면 됌.
14. 자바스크립트 - 프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 언어.
왜 브라우저는 Javascript만 알아들을까 - 표준으로 정해서
Java와 Javascript는 전혀 관련이 없다.
<head>에 <script>를 넣고 function을 넣고 하면 되는데 괄호 배치를 어떻게 하는지 모르겠다.
15.
F12/ 마우스 오른쪽 클릭-> 검사 / 점세개 -> 도구 더보기 ->개발자 도구
이 세가지 방법으로 consoledp 탭을 열 수 있다.
콘솔창은 개발자들이 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게 해놓은 도구
새로고침하면 다 사라짐
console.log(변수)
변수를 설정할 때 let 쓰면 되는듯
변수명은 이렇게
let first_name = 'bob' // snake case
let First_Name = "bob" // camel case
띄어쓰기 또는 특수문자는 불가능
16.
리스트
Let a_list = [1,2, 'hey',3]
a_list [3] //hey 출력
a_list.push('헤이)
a_list// [1,2,'hey',3,'헤이']를 출력
a_list.length // 5를 출력
딕셔너리 key : value 의 묶음
let a_dict = {'name' : 'Bob', 'age' : 21 }
전화번호부 같이 연결된 정보
b_dict ['name'] // 'Bob' 을 출력
b_dict ['height'] = 180
리스트와 딕셔너리의 조합
names = [ {'name' : 'Seon' , 'age' : 26} , {'name' : 'Chunky' : 'age' : 29}]
names[0]['name'] // 'Seon' 출력
names[1]['age'] // 29 출력
new_name = {'name' : 'Lin' , 'age' : 21}
names.push(new_name)
names = [ {'name' : 'Seon' , 'age' : 26} , {'name' : 'Chunky' : 'age' : 29} , {'name' : 'Lin' , 'age' : 21} ]
왜 필요함?
순서를 표시할 수 있고(리스트) , 정보를 묶을 수 있다(딕셔너리)
새로운 사람이 오면 .push 함수를 써서 넣으면 됌.
사칙연산 외에도 여러 함수가 있음.
ex) 나눗셈의 나머지 %,
특정문자로 문자열 나누기
let myemail = 'tjsgud2564@naver.com'
let result = myemail.split('@') // [ 'tjsgud2564' , 'naver.com']
result[0] // tjsgud2564
result[1] // naver.com
let result2 = result[1].split ('.') // ['naver' , 'com']
result2[0] // naver
한번에 쓰면
myemail.split('@')[1].split('.')[0] // naver
17
함수
// 만들기
function 함수이름 (필요한 변수)
// 사용하기
함수이름 (필요한 변수
ex) funtion sum (num1, num2) {
console log ('숫자', num1, num2);
return num1, num2;
}
sum(3,5); // 숫자, 3,5 뜨고 8출력
조건문
if else
ex)
funtion is_adult(age) {
if (age>20) {
alert ('성인이에요')
} else if (age >10) {
alert ('청소년이에요')
} else {
alert('10살 이하!')
}
is_adult(25) // 성인이에요 창 뜸
18. 반복문
for(1. 시작조건; 2. 반복조건; 3.더하기) {
4. 매번 실행
}
for(let i = 0; i < 100; i ++) {
console.log(i) ;
}
1~99까지 뜸
19. 미세먼지 리스트 내 딕셔너리 정보로 연습함
하라는대로 따라 했지만 어려움
반복문이랑 조건문이랑 섞어서 리스트 내의 딕셔너리 정보를 가져오는 연습
'개발자 되는 중 > 개발 공부' 카테고리의 다른 글
| 스파르타 코딩 SQL 개발일지 3주차 (1) | 2022.09.22 |
|---|---|
| 스파르타 코딩 SQL 개발일지 2주차 (0) | 2022.09.20 |
| 스파르타 코딩 SQL 개발일지 1주차 (0) | 2022.09.15 |
| 스파르타 코딩 웹 개발 개발일지 3주차 (0) | 2022.08.27 |
| 스파르타 코딩 웹 개발 개발일지 2주차 (1) | 2022.08.26 |