스파트라 코딩 클럽 1주차 교육 HTML, CSS, JAVASCRIPT란? (네이버 해킹하며 해보기)

HTML, CSS, JAVASCRIPT란? (네이버 해킹하며 해보기)

 

웹개발에서 꼭 필요한 3가지 언어. 이것이 어떻게 움직이는지 네이버 사이트를 해킹? (실제 해킹은 아니지만) 보면서 따라해보겠습니다.

 

 

 

네이버 검색 - 특정단어 클릭 - 검사 - 문장 바꾸기

 

 

실제로 스파르타 코딩클럽으로 바뀜.

 

1. 왜 바뀌었을까?

2. 내것만 바뀌었을까? 전부 바뀌었을까?

3. 인터넷이 꺼지거나, 연결이 끊겨도 자기 화면은 그대로, 왜 그럴까?

4. 새로 고침하면 어떻게 될까?

 

 

네이버에서 서버에서 정보를 가져옴.

 

브라우저의 역할 : 요청 & 가져오기.

 

www.naver.com  > 네이버의 서버에 요청을 하는 것. 그리고 가져오는 것.

 

HTML = 뼈대 (버튼의 위치?)

CSS = 꾸미는 것 (굵은 글씨, 색상 등등)

JavaScript = 움직이기. (버튼을 누른다. 다른 페이지로 간다 등)

 

서버는 프론트엔드(HTML, CSS, JAVASCRIPT) 를 준다.

 

[유용한 단축키]

Ctrl+alt+L (자동 정렬 줄고침)
TAB 들여쓰기
SHIFT+TAB 안으로 되돌리기

H1태그 페이지에 꼭 하나 넣기 (구글에서 자료를 잘 수집함)

 

background-image / size / position 3개는 한세트로 움직이며 받아온 사진의 중앙과 사이즈를 담당한다.

 

background-image: url("인터넷에서 퍼온 이미지 주소");
background-position: center;
background-size: cover;

 

 

특정 컴포넌트의 위치를 조절해주는 4개의 세트.

      display : flex;
      flex-direction: column; 
      justify-content: center;
      align-items : center;

마우스가 위치했을 때 동작하는 것처럼 보이기 위해서 쓰는 기능. (button:hover)

 .mytitle > button:hover {

            border: 2px solid white;
        }

버튼 위로 올라오면 굵기 변경하기

 

모바일 버전에서 사이즈가 바뀌었을 때 사이즈 컨트롤 하는 팁

max-width: 500px;  (최대 폭을 제한하기 > 더 안커지게 만들기)
width : 95%; (평상시의 사이즈를 어떻게 운영할지 고민)
 

파이참 실행 > 페이지 열기 > 검사 > Console 탭 = Javascript와 동일한 기능을 수행한다.

 

Javascript에서 중요한 5가지 요소

 

변수, 자료형, 함수, 조건문, 반복문

 

[변수 중 List] 

let a_list = ['수박','참외','배']
a_list[0] = '수박'

 

List로 했다면, 타고타고 들어간다는 것을 이해할 것.

 

[변수 중 Dict]

실제로 대부분의 데이터는 List와 Dict형을 합쳐서 들어가게 된다.

 

실습 - 서울시 미세먼지 데이터의 구조.

mise_list라는 리스트형 자료 안에 아래와 같은 자료들이 들어가는 것임

MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 22,
PM25: 14,
O3: 0.018,
NO2: 0.015,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",

대부분 90% 이상의 데이터 처리 방법이 아래와 같다. [매우 중요. 복습 할 것]

 

mise_list를 반복문으로 돌려서, 이 리스트의 끝까지 반복을 하되.

그 안에 있는 Dict형 자료를 실제로 뽑아내는것.

 

mise_list[i]['IDEX_MVL'] 이라는 조건 자체가

mise_list의 있는 i 번째 자료에서 IDEX_MVL로 분류된 DICT 데이터를 읽어오라고 하는 것)

이것을 제대로 읽었을 때 어떤 값을 Return하거나, Action하게 만들면 된다. (이게 실제 개발 세계에서 쓰이는 구조)

[1주차 과제 제출]

 

[몰랐던 부분 : 응원댓글 창을 늘리는 법을 몰랐음. (방법 = textarea 영역에서 직접 Style 코드를 넣어서 height 값을 조절해주면 됨)