[항해99] 사전준비-1 HTML, CSS, Javascript
복습이 더 힘들다. 처음엔 보고 따라 하기만 했는데, 기억하려 해서 또는 정리하려 해서 힘든 것 같다. 여기에 조금 더 알아보겠다고 이것저것 시도해보고 찾아보다 보니 시간이 더 오래 걸린다. 부족한 점에 무엇을 쓸지 모르겠다. 다 부족한데..
HTML > CSS > Bootstrap > Javascript > JQuery > API/Ajax > Python > Crawling > mongoDB > Flask(post,get) > 서버/AWS
1주 차
배운 점: HTML, CSS, Javascript 기초 (아래 테이블)
의미를 모르고 따라했던 부분 ↓
CSS에서 mytitle 안에 있는 버튼의 스타일을 바꿀 때,
.mytitle > button {}
마우스 올렸을 때의 스타일을 바꿀 때,
.mytitle > button:hover {}
부족한 점:
다 부족하지만,
Javascript에서 리스트[], 딕셔너리{}, 혹은 혼합해서 표현하는 게 익숙지 않다.
노트:
Javascript에서 리스트를 선언하고 값을 부를 때, []안에 숫자를 여러 개 입력해도 마지막 숫자만 인식한다.
a_list[0, 1, 3, 2] = a_list[2]
팬명록에서 코멘트 최신글이 맨 윗줄에 쌓이는 순서로 만들기 위해서는,
CSS에서 flex-direction: column-reverse; 로 설정하면 된다. align-items도 stretch로 해주고.
display:flex;
flex-direction: column-reverse;
align-items: stretch;
justify-content: center;
[Table] 강의: HTML, CSS, Javascript 기초 (1-1~1-16)
강의 | 내용(내 기준, 알아둘 점) | 코드 예시 |
1-1 | 브라우저 역할: 서버에 요청하는 것, 가져와서 보여주는 것. HTML 뼈대 CSS 꾸미기 Javascript 움직이기 => 우리가 보는 웹서비스 만들기 가능! |
|
1-2 | 파이참 설치 Jetbrains 회원 가입 AWS 가입 |
|
1-3 HTML | HTML 에는 구글과 같은 검색엔진에서 내 웹사이트를 더 잘 긁어가게 해주는 속성들/아이콘(파비콘) | |
1-4 | (로그인페이지 만들기) <h1> 줄바꿈 있는 태그 <p> 텍스트 기입창 태그 <input type=“text”> 버튼 삽입 태그<button></button> |
|
1-5 CSS | <style> .mytlte{} </style> <~ class=“mytlte">~ |
|
1-6 | (로그인페이지 만들기2-이미지 넣기) <body>를 <div>로 나누고 배경이미지 삽입 및 사이즈 조절은 { background-image: url(‘’); background-size: cover; background-position: center; } 이미지 귀퉁이를 둥글게, border-radius: —px; 이미지 속 글자 정렬, text-align: center; <body> 내용물 정렬, <div>로 하나로 묶어주고, 새로운 class 스타일 적용 /*전체를 감싸고 있으니 width로 너비 줄이고, 마진으로 정렬*/ { width: 300px; margin: 10px auto; } |
|
1-7 | 구글 웹폰트에서 링크 및 css 속성 복사 <title> 밑에 링크 붙여넣기 <style> 아래 *{css 폰트 속성(ex:font-family:~~;)} CSS 파일 분리 <!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 --> <link rel="stylesheet" type="text/css" href = "(css파일이름).css"> |
|
1-8 | 부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 | |
1-9 | display: flex; flex-direction: column; 세로니까 column, 가로면 row align-items: center; justify-content: center; 버튼 스타일 바꾸기(mytitle 안에 있는 버튼이다) .mytitle > button {} 마우스 올렸을 때의 스타일 바꾸기 .mytitle >button:hover {} |
|
1-10 | 이미지 넣고, 개수 조절하기 row-cols-md-3 → row-cols-md-4 로 바꾸기 |
|
1-11 Quiz | 모바일 처리: 500px 까지는 width가 95%만 채워주면.. max-width: 500px; width: 95%; |
|
1-12 Javascript | <script> function hey() { alert('안녕!'); } </script> <button onclick="hey()">영화 기록하기</button> |
|
1-13* | console탭에서 스크립트 연습하기 콘솔탭 열기 단축기 : alt(option) + command + i |
|
1-14** | 함수 // 만들기 function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 } // 사용하기 함수이름(필요한 변수들); |
|
1-15 | 서울시 구별 미세먼지값 리스트에서 아래 자바스크립트 함수 넣으면, function show_gus(index) { for (let i = 0; i < mise_list.length; i++) { let mise = mise_list[i]; if (mise["IDEX_MVL"] < index) { let gu_name = mise["MSRSTE_NM"]; let gu_mise = mise["IDEX_MVL"]; console.log(gu_name, gu_mise); } } } // 아래와 같은 것이 가능! show_gus(40) // 40보다 작은 구만 출력! |
|
1-16 숙제 | 팬명록 만들기 |
*1-13 Javascript 기초 문법 배우기(1)
let a = b //변수 선언
————리스트
let a_list = [b, c, d, e] //리스트 선언
a_list[0] // b를 출력
//리스트에 요소 넣기
a_list.push(‘ㄱ’)
a_list // [b, c, d, e, ㄱ] 를 출력
—————딕셔너리
let a_dict = {} // 딕셔너리 선언
// 또는
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력
—————-리스트와 딕셔너리 조합
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'
——————특정 문자로 문자열 나누기(gmail)
let myemail = 'sparta@gmail.com’
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
**1-14 Javascript 기초 문법 배우기(1)
——————조건문
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}}
is_adult(12) // 청소년이에요
——————반복문
for (let i = 0; i < 100; i++) {
console.log(i);
}
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
—
for (let i = 0 ; i < scores.length ; i++) {
console.log(scores[i]);
}
// 리스트 내의 딕셔너리를 하나씩 출력. length만큼
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}}
//점수가 70점 미만인 사람들의 이름만 출력.