네이버 해킹해봄
오른쪽 클릭 -> 검사-> element-> 따닥 클릭해서 다른 글자로 바꿔주기
카테고리 중 하나를 귀요미로 바꿔줌
저 바꾼것은 모든 사람에게 적용되지 않음 내 컴퓨터에 받아온거를 내가 고친거라
인터넷을 끊어도 이게 그대로, 왜냐 내 컴퓨터 받아온거라서
그러나 새로고침하면 서버에서 새로 받아와서 다시 보여주기 때문에 저 내용은 사라진다.
html 뼈대
css 꾸미기
javascript 움직이기
만들 것들
스파르타 피디아
화성땅 공동구매
버킷리스트
팬명록
이미 했던 건데 별로 기억이 안난다.
엄마컴퓨터를 빌려서 쓰고 있는데 파이참이 없어서 새로 다운 받아야 했다.
라이센스가 두개의 컴퓨터에서 사용가능할까 걱정했는데, 계정으로 로그인하니까 손쉽게 쓸 수가 있다.
개꿀
파이참 로그인과 결제에 필요한 jetbrain에 계정은 첫수업 때 만들어뒀다.
서버 컴퓨터를 빌릴 때 사용할 AWS계정도 첫수업 때 만들어뒀다.
바탕화면에 sparta, frontend 파일 만든다.
파이참 configure(컴퓨터의 환경 설정)에 들어가서 plugins에 들어가라고 하였으나 업뎃되었는지
바깥에 나와 있다. plugins 들어가서 korean 검색 한국어 언어팩 찾아서 install 하고 restart IDE누른다
start ide를 누르면 다시 켜지면서 한국어로 나온다.
맨처음 화면에서 열기 누르고, frontend 파일을 선택해서 연다.
frontend 파일 오른쪽 클릭 -.> 새로 만들기-> html->prac. html 만듦
03. HTML, CSS 기본 내용
title사이에 글을 넣으면 제목 바뀜
body에 넣으면 페이지 내용 바뀜
head는 페이지 제목을 넣거나, 구글이 나의 페이지를 더 잘 긁어 줄 수 있게 해주거나 하는 역할
03. HTML, CSS 기본 내용
줄맞춤이 중요하다!
<hr> 줄바꿈
구역을 나누는 태그들
<div>나는 구역을 나누죠</div><p>나는 문단이에요</p><li> bullet point!1 </li><h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>h2>h2는 소제목입니다.</h2><h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
구역 내 콘텐츠 태그들
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>img 태그입니다:
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />input 태그입니다: <input type="text" />button 태그입니다: <button> 버튼입니다</button>textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
04. Quiz_간단한 로그인 페이지 만들어보기
내가 쓴 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text" /> </p>
<p>PW: <input type="text" /> </p>
<button>로그인하기</button>
</body>
</html>
05. CSS 기초
짱구의 바지 색을 바꿔주라
할때 짱구의 바지를 지칭해준 것 처럼
CSS를 할 때는 이름을 정해서 그것을 지칭해줘야함
class = '~' 하고 이름 붙여준다
<h1 class='mytitle'>로그인 페이지</h1><head></head> 안에
<style></style>하고
.이름 { }
지칭해서 어떻게 바꿔줄꺼인지 써준다
마지막에 ; 세미콜론으로 끝임을 표시해준다.
글자색 빨랑으로 바꿔준 코드
<head>
<meta charset="UTF-8">
<title>로그인</title>
<style>
.mytitle{
color:red;
}
</style>
</head>
여러개의 div가 쌓이는 경우가 많은데, 바깥 div를 지칭해서 css를 넣어주었다 하더라도
안에 div 또 지칭해서 css를 넣어주면 바깥것과 별개로 들어간다.
배경색
background-color: pink;배경 크기
width: 300px;
height: 200px;글자색
color: white;글자 배열 위치
text-align: center;배경 이미지 넣는 삼종세트
항상 같이 쓴다고 생각하면 된다.
background-image: url("https://imagescdn.gettyimagesbank.com/_500/202209/jv12620960.jpg");
background-position: center;
background-size: cover;귀퉁이 동그랗게
border-radius: 5px;바깥 여백
margin
margin: 20px;상, 우, 하, 좌 20px 띄워달라는 뜻 (시계방향)
margin: 20px 20px 20px 20px
안쪽 여백
padding
-top,bottom,right,left 붙여서 어디를 띄워줄 것인지 지정해줄 수도 있다.
전체 내용을 가운데로 가져오는 것(양쪽 여백이 같아진다) : margin: auto;
<div>로 전체 내용을 한번 감싸준 후 class 지정한다
<div class="wrap">
<div class="box">
<h1 >로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input type="text" /> </p>
<p>PW: <input type="text" /> </p>
<button >로그인하기</button>
</div>.wrap {
width: 300px;
margin: auto;
}
폭을 안 설정하고 그냥 auto만 하면 가운데로 안 옮겨진다.
07. 폰트, 주석, 파일분리
폰트 넣는법
구글 폰트에 들어가서
원하는 폰트를 선택 후
제일 아래에 들어가 +버튼을 눌러준다
selected family에서 link에서 제일 아랫줄 복사
타이틀 아래에 붙여준다
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">그 아래 CSS rules to specify families에 해당하는 코드를 복사해서 <style> 안에 *{} 에 넣어준다
*은 모든 태그에 먹이겠다는 뜻
주석 달기
- 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
- 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다.
주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아요. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것!
- 단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시)
주석 처리가 되지 않을때 ctrl shift 눌러서 microsoft 입력기로 바꿔주면 주석이 된다.
파일분리
css 파일을 새로 생성
그 안에 style 태그 빼고 다 잘라내서
css파일에 넣어준다
이 아래 코드를 넣어주고 파일이름 넣어준다.
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href = "mystyle.css">
</head>
08. 부트스트랩, 예쁜 CSS 모음집
남들이 만들어 놓은 예쁜 css 꾸러미
붓을 쥘 줄 아는 것과 예쁘게 그리는 것은 다르다
예쁘게 그리는데 도움을 준다.
index.html 이라는 새로운 파일 만듦
이런 head 내용이 있는 템블릿을 붙여넣었다.
기능들을 쓸 수 있게 해주는 링크들
제일 위의
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
이렇게 모든 내용을 정리하다보면 너~무 오래걸리는데 이렇게 하는게 맞나? 복습으로 꼼꼼하게
제목에 있는 글자 내용물들을 가운데 정렬할 때 쓰는 4종세트
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;column을 row로 바꿔서 쓰는 거 말고는 거의 그대로 쓴다.
클래스 안의 대상을 지정할 때
.mytitle > button 버튼 배경색 투명
버튼 테두리 굵기, 종류, 색상
테두리 둥글기
background-color:transparent;
border: 1px solid white;
border-radius: 50px;마우스를 올렸을 때 바뀌게 하기
.mytitle > button:hover {
border:2px solid white;
}
이미지 어둡게 하기 (위치는 url 앞)
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) ,url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
10. 본격 부트스트랩 써보기
카드 부트스트랩 복사
row-cols-md-3을 4로 바꾸면 한 줄에 들어오는 카드가 4장이 되었다 .
부트스트랩 페이지 영어로 설명이 되어있다
<div class="row row-cols-1 row-cols-md-4 g-4">
부트 스트랩으로 복사해서 와서
<p> 태그를 이용해서 별점 자리와 코멘트 자리도 만들어줌
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">제목이 들어감</h5>
<p class="card-text">내용 들어감</p>
<p>⭐⭐⭐</p>
<p>코멘트 들어감</p>
</div>
</div>
</div>
</div>반복되는 부분을 잘 보아서 구별해준다.
이런식으로 margin 상 우 하 좌 순서에 중간 중간 auto를 섞을 수 있다.
margin: 20px auto 0px auto;11. Quiz_포스팅박스를 완성하기!
그림자효과
box-shadow: 0px 0px 3px 0px gray;모바일 처리
max-width: 500px;
width: 80%;검사에 들어가서 휴대폰 모양 버튼 눌러주면(기기 툴바 버튼) 모바일에서 어떻게 보일지 확인해볼 수있다.
css 코드
.mypost {
max-width: 500px;
width: 95%;
margin:20px auto 0px auto;
padding:20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtns {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.mybtns> button {
margin-right: 10px;
}
my post 안에
height를 안 넣어줘야 박스가 안에 있는 것과 같이 자연스럽게 커지고 작아진다.
12. Javascript 맛보기
역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있죠.
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성합니다.
<script> ~ </script> 내에 자바스크립트를 작성하는 것이죠
<head>
<script>
function hey() {
alert('안녕')
}
</script>
</head>13. Javascript 기초 문법 배우기(1)
검사 -> console 창은 script와 같은 거다. 이어지는것
(개발자 도구, 개발자들이 코드를 바로 시험해볼 수 있도록 편의를 위해 만들어 진것)
hey()라고 console에 치면 같은 결과가 나옴
변수
let a=2
undefined
a
2
let b=3
undefined
b
3
a+b
5let first_name = 'seonhyeong'
undefined
let last_name = 'kim'
undefined
first_name
'seonhyeong'
first_name + last_name
'seonhyeongkim'a+last_name
'2kim'자료형
리스트형
let a_list = ['a','b','c' ]
a_list.push('d')
let a_list = ['수박', '참외', '배']
undefined
a_list[1]
'참외'
a_list.push('망고')
4
a_list
(4) ['수박', '참외', '배', '망고']
a_list.push(b_list)
5
a_list
(5) ['수박', '참외', '배', '망고', Array(2)]
a_list[4][1]
'청키'let first_name = 'bob' // snake case라고 합니다.
또는,
let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!딕셔너리형
key:value
콘솔창
let a_dict={'name':'seon','age':'27'}
undefined
a_dict
{name: 'seon', age: '27'}
a_dict['height']=160
160
a_dict
{name: 'seon', age: '27', height: 160}.split(' ') 쪼개기
.split(' ')[숫자]
쪼개기를 2개 연결 할 수도 있다.
콘솔 창
let myemail = 'tjsgud2564@naver.com'
undefined
myemail.split('@')
(2) ['tjsgud2564', 'naver.com']
myemail[0]
't'
myemail.split('@')[1]
'naver.com'
myemail.split('@')[0]
'tjsgud2564'
myemail.split('@')[1].split('.')
(2) ['naver', 'com']
myemail.split('@')[1].split('.')[1]
'com'
myemail.split('@')[1].split('.')[0]
'naver'
함수
파이썬 창
alert -알림창 띄우기
<script>
function sum(a,b) {
alert ('계산 ㄱㄱ')
return a+b;
}
let result = sum(2,3)
alert(result);
</script>새로고침 누르자 마자 계산 ㄱㄱ와 5가 뜬다
콘솔에 찍기
console.log(result);
조건문
function is_adult(age) {
if (age > 20) {
alert('성인')
} else {
alert('청소년')
}
}콘솔 창에 is_adult(24)치면
성인 하고 알림창이 뜸
반복문
let a_list = ['사과','배','감','딸기']
for (let i=0; i<a_list.length; i++){
console.log(a_list[i])
}콘솔창에 저런 결과가 나온다.
사과
배
감
딸기
리스트, 딕셔더리 복합
리스트 안에 키 밸류로 이루어져 있는 딕셔너리
모든 score만 찍어줘라
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])
}
score가 70보다 큰것만 콘솔 창에 찍어줘라.
for (let i=0; i<scores.length; i++){
if (scores[i]['score']>70) {
console.log(scores[i]['score'])}
}정확한 자료를 지칭하기 위해서 괄호를 어떤 것을 치고 어떻게 써야하는지 외우지는 못하겠다. 헷갈릴 때마다 보면서 따라해야겠다.
이 부분 처음 했을 때는 많이 어렵게 느껴졌는데 두번째 하니까 훨씬 쉽다. 역시 복습이 짱이다.
let mise_list = [....]; //미세먼지 자료 받아와서 붙여넣기 했음
for (let i=0; i<mise_list.length; i++){
if(mise_list[i]['IDEX_MVL'] <40 )
{console.log(mise_list[i]['MSRSTE_NM'])}
} // 콘솔 창에 전체 자료중 40이하인 MSRSTE_NM 값만 찍어줌
16. 1주차 끝 & 숙제 설명
백그라운드 포지션에 센터하고 뒤에 퍼센트를 넣으면 위를 기준으로 어디서 부터 보여줄껀지? 를 결정하는 것 같다.
background-position: center 1%;
.mycard > .card {
margin-top: 10px;
margin-bottom: 10px;
}
.post_box > button {
margin-top:20px;
}
class 안에 있는 클래스를 지정해 줄 때 꼭!!! 앞에 점을 찍어주고
class 안에 있는 그냥 태그를 지정해줄 때는 점이 없고!
'개발자 되는 중 > 개발 공부' 카테고리의 다른 글
| 스파르타 코딩 웹개발 개발일지 3주차 (복습) (0) | 2022.10.12 |
|---|---|
| 스파르타 코딩 웹개발 개발일지 2주차 (복습) (0) | 2022.10.11 |
| 스파르타 코딩 SQL 문법 총정리 하기 (0) | 2022.10.01 |
| 스파르타 코딩 클럽 SQL 개발일지 4주차 (0) | 2022.09.27 |
| 스파르타 코딩 SQL 개발일지 3주차 (1) | 2022.09.22 |