고정 헤더 영역
상세 컨텐츠
본문
반응형
1-1 오늘 배울 것
네이버 뉴스를 다른 글씨로 바꿔보기
마우스 우클릭 검사 -> 다른 글씨로 바꾸고 엔터 -> 글씨가 바뀐다.
Q. 왜 바뀌나?
[힌트] 이 상태에서 인터넷 끄면 화면은 그대로 있지만 다른 부분 누르면
인터넷 연결 안 됨.
[힌트] 새로고침 하면 다시 네이버 뉴스 뜸
Q. 새로고침의 의미 = 새로 받아 온다
나는 왜 이것을 바꿀 수 있었을까?
내가 이미 서버로부터 받아 온 것이기 때문이다.
* 서버란? 네이버가 갖고 있는 컴퓨터
Q. 브라우저의 역할은 무엇인가?
a. 요청하기 b. 가져와서 보여주기
1- 2 Pycham 설치
1-3 HTML과 CSS의 기본 내용
서버는 frontend를 준다 (줄 것 미리 만들어 놓기)
<title>나의 첫 웹피이지</title>
<body> 내용이 들어간다.</body>
<head> 구글이 내 웹을 잘 긁어 가게 해주는?
div : 구역(박스)
p : 문단
h1 : 문서제목 (1~6까지 숫자가 커질수록 글씨 작아짐)
span :특정 글자 꾸밀 때
a : 하이퍼링크
img : dlalwl
input : 인풋박스
button : 버튼
textarea : 박스 안에 글자
1-4 간단한 로그인 페이지 만들기
<body>
<h1> 로그인 페이지 </h1>
<p> ID : < input type = " text "/></p>
<p> PW : <input type = "text"/></p>
<button> 로그인하기 </button>
</body>
1-5 CSS 기초 꾸미기
https://getbootstrap.com/docs/5.0/components/buttons/ (부트스트랩)
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
https://kr.piliapp.com/facebook-symbols/ (이모티콘)
페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록
× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원
kr.piliapp.com
꾸밀 것에 이름표 붙이기 -> style에 가서 .name { 꾸미기 }
class = "name"
ex) <div class = "wrap">
1-6 자주 쓰이는 CSS 기초
div로 박스 만들기
div class "name" 이름표 붙이기
style 에서 .name {
background-color : green;
width : 300px;
height : 200px;
color: white;
text-align: center;
background image: url ("이미지 주소");
background-size : cover;
background-position : center;
* 이미지, 사이즈, 포지션 같이 다닌다.
border-radius: 10px; (귀퉁이 라운딩)
margin : 20px 20px 20px 20;
*margin : 바깥여백 (시계방향으로 20px씩 상하좌우 띄어라.)
padding-top : 40px;
*padding: 박스 안쪽 여백 위쪽 40px 띄어라.
가운데로 가져오기 → 양쪽 여백을 똑같이 민다.
margin: auto; (상하좌우를 최대한 밀어라.)
1-7 폰트, 주석, 파일분리
https://fonts.google.com/?subset=korean (구글 폰트 한글)
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
맘에 드는 폰트 클릭 → 코드 복사 → <style> * { CSS 코드 붙여 넣기}
* : 모든 태그에 먹이겠다.
* 주석 : 컴퓨터는 읽지 않지만 사람 눈에는 보이는 것 !
( 컨트로 + / 풀때도 컨트로 + / )
( HTML, CSS, JavaScript 마다 주석이 다르게 생겼다.)
* 파일분리 : CSS가 길어질 때 파일분리를 할 수 있다.
1-8 부트스트랩 ( 예쁜 CSS 모음집)
실습) 스파르타피디아(영화링크만들기)
div 안에
<h1> 내 생애 최고의 영화들 </h1>
<button> 영화기록하기</button>
div 이름 "mytitle"로 하고
<style>
. mytitle {
background-color: green; ( 구역에 배경색)
width : 100% (가로를 %로 보고 얼마나 채울거냐?)
height: 300px; (세로 300px)
}
div 부분에 이미지 넣기 (상어배경)
background image: url ("이미지 주소");
background-size : cover;
background-position : center;
내 생애 영화들 폰트 color : white;
글씨 가운데로 오게 하기
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
(세트로 다닌다.)
*버튼 꾸미기 <style> 에서 꾸미기
.mytitle > button {} → mytitle 안에 있는 버튼이라는 뜻
.mytitle > button {
width: 200px; (가로 200px)
height: 50px; (세로 50px)
background-color: transparent; (버튼 배경 투명)
color : white; (컬러 흰색)
border-radius: 50px; (테두리 라운딩 50px)
border: 1px solid white; (1px 실선 흰색)
margin-top: 10px; (위 여백 10px)
}
*마우스 올리면 선 굵게 하기
. mytitle > button : hover {
border : 2px solid white;
}
*(mytitle 안에 버튼 마우스 올리면 실선을 2px로 만들어라)
*이미지 어둡게 하기 (상어이미지)
url 앞에 ,찍고 linear -gradient
background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url ("이미지주소(상어)");
1-10 부트스트랩 써보기 (카드) (이미지) (별점)
부트스트랩 > card> 카드 찾아서 코드 복사
div 밑에 넣기
<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 class="mycomment">여기에 코멘트가 들어갑니다.</p>
</div>
1-11 포스팅 박스 완성하기
큰 박스 먼저 만든다 → 영화 url 박스 만든다 → 별점박스 만든다 → 코멘트박스 만든다 → 버튼 넣는다 (기록하기/닫기)
→ 버튼 정렬 → 버튼 간격 띄우기 → 모바일 처리한다.
별점 선택하기 <optoin selected> 선택하기</option>
별점 : <option value="1"> ★</option>
*5점까지 option value 복사해서 5개 붙여넣기 별 1~5점까지
<option selected>선택하기</option>
<option value="1">⭐</option>
*버튼에서 column (세로정렬) row (가로정렬)
.mybtn > button {
margin right : 10px;
}
(버튼 간격 오른쪽으로 10px 띄우기)
모바일 처리하기
마우스 우클릭 → 검사 → 직사각 겹친 것 누르면 모바일로 볼 수 있음
*보통 핸드폰은 375px 임
ex ) max - width : 1200px;
width : 95%
(*너는 커지면 1200px까지 커질 수 있고 그 전에는 95%만 채워주면 된다)
1-12 JavaScript 맛보기
Java와 JavaScript 는 아무 관련이 없다.
<script> 여기에 적어준다.</script>
<script>
function hey() {
alert("안녕!") ;
}
botton onclick = "hey()"
*(버튼을 클릭하면 hey 를 호출해라)
1-13 JavaScript 기초문법 배우기 (1)
JavaScript 는 Console 창이랑 똑같다.
★프로그래밍 언제에서 중요한 것 5가지 ★
1.변수 → 값을 담는 것
2. 자료형 → 숫자냐? 문자냐?
3. 함수 → hey()같은 애들
4. 조건문 → if () 이렇다면 저렇고 else()그게 아니라면 이렇게 된다.
5. 반복문 → 계속 반복하자.
변수 & 자료형 배우기
let a = 2
a 2
let b = 3
b 3
a + b =
5
let first_name = "spa'
let last_name = "ta'
first _name + last_name
'spata'
a + last_name
' 2ta '
리스트 & 딕셔너리
a 리스트
ex ) 수박, 배, 참외 이런식으로 데이터를 저장해야할 일이 있는데 100면 다 쓰기 힘들다.
그래서 데이터를 한꺼번에 모아서 정렬하는 법이 필요하다.
방법은 2가지가 있다.
let a_list = ['수박','참외','배']
0 1 2
a_list[1] → a_list의 첫번째를 꺼내라.
'참외'
a_list.push ('감')
4
a_list
4 ['수박','참외','배','감']
let b_list = ['철수','영희']
a.list.push(b_list) → b_list를 추가해라.
a_list ['수박','참외','배','감']
a_list[4][0]는 '철수'
a+list[4][1]는 '영희'
b.딕셔너리
key value라고 뭔가 매칭되는 것이 있다.
let a_dict = { 'name' : 'bob' , 'age' : 27}
(*이름은 bob이고 나이는 27살이다.)
a_dict['name'] → a_dict의 name값을 가져와.
a_dict['height'] = 180
a_ dict
{name:'bob', age:27, height:180}
+ JavaScript에서 재미있는 자체 함수 +
let myemail = 'spata@gmail.com'
만약 gmail.com 만 나타내고 싶다면 →
myemail.split('@')
['spata',gmail.com] (골뱅이 기점으로 쪼개진다) list?
0 , 1
myemail.split('@')[1]
['gmail.com']
myemail.split('@')[1].split('.')
['gmail','com']
myemail.split('@')[1]split(',')[0]
['gmail']
1-14 JavaScrip 배우기 (2) 함수, 조건문, 반복문 배우기
조건문
function sum (a,b)
alert('계산을 하자')
return a+b
let result = sum (2,3)
alert(result)
(*계산을 하자 먼저 뜨고 5로 변신해서 5라는 alert가 뜬다)
+ alert → console.log로 바꾸면 사이트 창엔 안 뜨고 console 창에만 뜬다. +
function is _ adult (age) {
if (age > 20) ('성인입니다.)
} else {
alert('미성년자입니다.)
}
(*만약 age 가 20보다 크면 성인입니다.를 호출하고
아니면 미성년자입니다.를 호출해라.)
is_adult(25) 치면 20보다 크니깐 성인입니다. 뜬다.
반복문
let a_list = ['사과','배','감','딸기']
for (let i = 0; i < a_list.length; i++) { }
(* for let i가 0부터인데 i가 하나씩 높아지면서 a_list의 length만큼 돈다)
console.log(a_list[i])
사과
배
감
딸기
↑
console창에 요렇게 나온다 .
i 가 0부터 돌면서 하나씩 커진다. (console.log(a_list)[i]를 실행시킨다.
언제까지? (a_list length;) 길이까지 4 (사과 배 감 딸기)
score에 보면 list가 크게 들어 있고 list 안에 딕셔너리가 있다.
철수, 영희, 민수, 형준, 기남, 동희
0 1 2 3 4 5
돌면서 score 70 이상만 이름 직어 주고 싶다면 ?
if (score)[i] ['score'] > 70) {}
console.log (score[i] ['name']
(*score의 i번째의 score 값이 70보다 큰 사람만 console창에 이름을 찍어라)
1-15 JavaScript 연습하기
미세먼지 40 미만은 구 이름만 출력하기
if (mise_list[i] ['IDEX_MVL') <40 {
console.log(mise_list[i] ['MSRSTE.NM (구이름)']
}
(*만약에 mise_list의 i번째 IDEX_MVL 값이 40보다 작으면 구이름을 출력해라)
1-16 숙제하기 (팬방명록 만들기) → 제출완료
http://localhost:63342/frontend/homework.html?_ijt=3f56gounj3fkqsm815jsrub2qc&_ij_reload=RELOAD_ON_SAVE
★ 느낀 점 → JavaScript 가 아직 익숙하지 않지만 HTML 뼈대와 CSS 기본 개념이 잡히기 시작했다.
; 빼 먹지 말고 { } 안에 들어갈 태그 잘 확인하기 !! 이름표 달고 style에서 꾸미는 것은 처음보다 익숙해졌다.
▼수업 5만원 할인 받기 ▼
스파르타코딩클럽
5주 완성! 코딩을 전혀 모르는 비개발자 대상의 웹개발 강의
spartacodingclub.kr
반응형
'매일매일 > 공부일기' 카테고리의 다른 글
| [코딩] 3주차 파이썬 기초공부 (0) | 2022.08.21 |
|---|---|
| [코딩] 2주차 : jQuery.Ajax 배우기 (0) | 2022.08.14 |
| [유니티] 유니티와 유니티 허브를 설치하고 제페토 프로젝트파일을 등록하는 법 (0) | 2022.07.30 |
| [영어] 제기랄 영어로? (0) | 2022.03.04 |
| [영어] 날씨가 많이 풀렸어 영어로? (0) | 2022.03.03 |
댓글 영역