-강의 -코딩이 처음이어도 쉽게 배우는 웹개발 A to Z
-1주차 7번째 강의까지 보고나서
- 배운 것으로
1-웹의 작동 원리
- 웹개발은 보이는 홈페이지를 만드는 기술인데,
어떤 개발자도 개발의 기초는 웹을 아는 걸로 먼저 시작해.
- 인터넷 연결과 상관없이 보여주는데 그건 이미 관련 자료를 내 컴퓨터로 가져와서
인터넷 연결이 끊어져도 보이는 건 그대로야.
대신 뭔가를 클릭해서 동작시키면 그때서야 안 된다는 신호를 주고.
- 주소창에 naver.com를 쳤을 때 일어나는 과정으로 웹이 동작하는 걸 알 수 있어.
-> 주소창에 naver.com를 치면
-> 클라이언트(내 컴퓨터)가 naver.com에 대응하는 서버(naver.com에 해당하는 컴퓨터)에게
필요한 뭔가(자료)를 요청하고
-> 서버는 요청한 뭔가(자료)를 클라이언트에게 주면
-> 클라이언트가 받은 자료를 눈에 보이게 그려줘.
=> 받아온 그 자료는 HTML, CSS, JS(javascript)야.
*클라이언트 : 뭔가의 소스를 요청하는 쪽
*서버 : 뭔가의 소스를 주는 쪽
2-HTML
- 받은 자료를 그려낼 때 뼈대 역할을 해.
- 뼈대를 그릴 때 많은 태그(tags)를 써.
- 크게 두 부분으로 나뉘어. head와 body.
- body를 제외한 모든 부분, CSS, JS, 홈페이지를 검색엔진이 어떻게 가져갈 건지도 head에 해당 돼.
3-CSS
- html이라는 뼈대에 살을 붙여주는 꾸미기 역할을 해.
- CSS를 사용하는 법을 배웠어 명령해주고 마지막에 세미콜론(;)을 붙여주는 게 중요해.
<head>
<style>
.클래스명 { 명령어 }
</style>
</head>
- head태그 내에서 style태그 내에서 자료의 대명사같은 class를 불러서
어떤 식으로 꾸미라고 명령을 주는거야.
<head>
<style>
.mytitle {
color: green;
}
</style>
</head>
4-JS(Javascript)
- 뼈대와 살에 js가 어울리면 뼈에 살이 붙은 몸(HTML+CSS)을 동작하게 해줘
5-VS Code, 개발 환경 설정 및 실행
- Visual studio Code 약자인데, 마이크로소프트 사에서 개발한 코드 에디터(code editor)인데
- 코딩하기에 조금 더 효율적으로 도와주는 프로그램이야. 워드나 한글같이.
- 메모장에서도 코딩이 가능해.
- extention에서 다양한 기능을 설치하면 프로그램을 사용하거나 코딩하기 편해져.
- extention에서 open in browser, Korean Language Pack을 설치했어.
- vs Code 단축키가 있어. 여러가지가 있어. 추후 추가할 예정이야.
- Alt + B : 해당 폴더 브라우저로 열기야. 이건 open in browser을 설치하면
단축키를 썼을 때 연결된 브라우저로 작성한 코드가 그려진 걸 볼 수 있어.
- 느낀 것으로
1-무조건 외우는 게 아니라 과정을 이해하고
응용해야하더라.
2-신이 사람을 만들 때 뼈대랑 살이랑 모양을 내듯
웹페이지를 만드는 개발자가 그런 게 아닐까.
프론트엔드 개발자와 백엔드 개발자는 사람의 겉모습(보이는 부분)과
사람의 내용물(안 보이는 부분)을 구성하고 관리하는 창조자이고 관리자인 듯.
3-세미콜론을 꼭 써줘야 하는 걸 명심하자.
4-몇 가지 실행 단축키를 알아두면 코딩할 때 편하다.
'개발일지' 카테고리의 다른 글
| [TIL] 23_1227 미니 프로젝트를 마치며 (0) | 2023.12.27 |
|---|---|
| [TIL] 23_1226 .on("click",~) 과 .click의 차이 = 동적으로 처리, 정적으로 처리 (0) | 2023.12.26 |
| [TIL] 23_1222 firestorage 내장함수, flex로 비율 조정 (2) | 2023.12.22 |
| [TIL] 23_1221 리눅스 기초 명령어, git기초 (2) | 2023.12.21 |
| [TIL] 23_1124 jQuery적용, Fetch개념 (2) | 2023.11.24 |