항해99_7기/사전 준비

[항해99] 사전준비-1 HTML, CSS, Javascript

code10 2022. 4. 27. 22:44

복습이 더 힘들다. 처음엔 보고 따라 하기만 했는데, 기억하려 해서 또는 정리하려 해서 힘든 것 같다. 여기에 조금 더 알아보겠다고 이것저것 시도해보고 찾아보다 보니 시간이 더 오래 걸린다. 부족한 점에 무엇을 쓸지 모르겠다. 다 부족한데..

 

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점 미만인 사람들의 이름만 출력.