유튜브 생활코딩 강의 정리 (html, css, JavaScript)

html, css, JavaScript

유튜브 생활코딩 강의 정리 (html, css, JavaScript)

sognociel 2022. 8. 12. 15:46

생활코딩 사이트

강의 내에서 알려주신 사이트

최초의 웹사이트

Advanced WEB RANKING HTML Study : html 태그들이 사용되는 랭킹

DISQUS : 댓글기능 추가

tawk.to : 실시간 채팅 기능 추가

caniuse : html 태그들이 각각의 웹 브라우저에서 지원되는지 알려줌

HTML, CSS는 컴퓨터 언어
JavaCcript는 컴퓨터 프로그래밍 언어
프로그램 : 순서. 프로그래밍 언어는 순서를 만드는 언어.

만들어진 웹에 자바스크립트를 이용하여 사용자와 상호작용할 수 있게 만듦.

★WEB1 - HTML & Internet
나의 문제를 코딩으로 해결하려는 엔지니어. 이해력보다 공감력이 중요함

기획-구현의 단계를 거친다.
무엇인가를 만들기 전에 무엇을 만들 것인가를 미리 상상하고 계획해 보는 과정이 필요한다. 이런 과정을 기획이라고 한다.

사람이 하는 일. 원인을 부르는. 코드
기계가 하는 일. 결과를 부르는. 애플리케이션, 응용프로그램. 웹사이트 등
=>코드를 통해서 결과(앱이나 페이지)를 만드는 것

웹페이지를 만드는 언어는 html (Hyper Text Markup Language)
두 가지 장점 : 쉽고 중요함
웹 : 저작권이 없는 퍼블릭 도메인

코딩을 하기 위해서는 에디터(Editor)라는 프로그램이 필요함
각자의 운영체제에는 이미 에디터가 준비되어 있음
윈도 - 메모장 / 맥 - 텍스트 편집기 / 리눅스 - gedit, nano, vim
이 수업에서는 github.com 에서 만든 Atom(아톰)

최신 에디터가 궁금하면 best HTML Editor 2022 <-이런 식으로 검색
웹브라우저에서 만든 페이지를 열어보고 싶을 때 아래 단축키 이용
윈도우 : Ctrl+O / 맥 : Command+O
그러면 파일 선택 화면이 나오는데 마이크로 엣지는 안 나옴. 크롬이나 다른 브라우저로.

웹의 핵심적인 철학은 접근성(accessibility). 신체적인 장애가 있는 분들도 정보로부터 소외되지 않도록 노력해야 하는 것. 예를 들어 시각장애인분들은 스크린 리더나 각종 보조 장치를 이용해서 정보를 받아들임. 이때 웹페이지를 예쁘게 만들기 위해 이미지로 만든다면 이런 분들은 정보를 얻을 수 없음. 자신도 모르는 사이에 누군가를 소외시키고 있는 것.

attribute : 태그 안에 있는 속성들. 아래 방식으로 값을 가져올 수 있다.

document.getElementById( 'abc' ).getAttribute( 'href' )

서버(response)와 클라이언트(request)
웹 브라우저, 클라이언트(request) : 웹 서버에 index.html이라는 파일을 달라고 요청, 웹 서버에서 보낸 코드를 해석한 후 화면에 index.html을 표시
웹 서버(response) : 웹 브라우저의 요청을 받으면 하드디스크에서 index.html이라는 파일을 웹브라우저에 전기적 신호로 보냄

인터넷에 연결된 컴퓨터를 빌려주는 것. 웹호스팅, 클라우드

구글 확장 프로그램 Web Server for Chrome 을 통해 실습해봤다.

HTML Character Entity(HTML 문자 단위(엔티티))
html 문법에서 부등호(<작다 >크다)는 꺽쇠이기 때문에 아래 특수코드를 사용한다.
< (less than ~보다 작은) > (grater than ~보다 큰)
  공백
& &문자 출력
" "큰따옴표 하나

HTML&Internet
CSS
JavaScript - 프론트엔드
PHP, JSP, Node.js 등 - 백엔드
Advertisement - 광고로 수익창출

★WEB2 - CSS

<style>
	a {
    	color:black;
	}
</style>

위 예문에서 a는 Selector 이 웹페이지에 있는 모든 a태그를 선택한다. 선택자.
color:black; 는 Declaration 선택자가 지정하는 태그들에 대해서 어떤 효과를 줄 것인가. 선언. 효과.
속성:속성의 값(Property:Value;)

중복의 제거 -> 웹페이지 유지 보수가 편리해짐. 가독성도 높아짐.
웹페이지를 디자인할 때 HTML을 이용해서 디자인하는 것보다 훨씬 더 효과적이 될 수 있다. 우리가 CSS를 사용하는 중요한 이유.

CSS 자체로 인식하는 방법(style 태그로 사용)과 HTML 안의 속성으로 CSS를 인식시키는 두 가지 방법이 있다.

선택자 순위 : id>class>tag
모든 선택자가 class라면 제일 마지막에 오는 선택자가 강함
id의 값은 한 번만 등장해야 함(중복되어서는 안됨). 주민등록번호와 같은 개념.

화면 전체를 쓰는 태그들을 block 본인 크기만큼을 쓰는 태그들을 inline element
div는 block element, span은 inline element

border : 테두리

padding : 안쪽 여백 (겨울에는 패딩을 입는다 식으로 기억)

margin : 바깥쪽 여백

반응형 디자인. 미디어 퀴리. 아래 코드는 창의 가로가 600px 이하가 되면 gird 속성을 해제하는 역할을 한다.

@media (max-width:600px) {
  #grid{
    display:block;
  }

★WEB2 - JavaScript
-웹페이지 제어
document
DOM(Document Object Model)
-웹브라우저 제어
window
-웹페이지를 리로드하지 않고 정보를 변경하고 싶을 때
ajax
-웹페이지가 리로드되어도 현재 상태를 유지하고 싶을 때
cookie <-사용자를 위한 개인화된 서비스 제공 가능
-인터넷에 끊겨도 동작하는 웹 페이지
offline web application
-화상통신 웹앱
webRTC
-사용자의 음성을 인식하고 음성으로 정보를 전달
speech로 시작하는 api
-3차원 그래픽으로 게임과 같은 것
webGL
-가상현실
webVR

toggle : night와 day를 한 버튼으로 합친 것

리팩토링 : 코드의 비효율적인 것들을 개선하는 것. 효율적으로 개선.
중복을 끝까지 쫓아가서 다 없애버려라

배열 []
객체 {} 객체에 소속된 변수(key 값)은 프로퍼티라고 부른다.
메소드 : 객체에 소속된 변수로 만들어진 함수

함수 : 코드가 많아지면 정리 정돈하는 도구
객체 : 함수와 변수가 많아지면 연관된 것들을 그룹핑해서 정리 정돈하는 도구. 키:값의 형태이며 coworkers[key]로 해당 키에 할당된 값을 불러올 수 있다.

  var coworkers = {
    "programmer" : "egoing",
    "designer" : "leezche"
  };
  document.write("programmer : " + coworkers.programmer+"<br>");
  document.write("designer : " + coworkers.designer+"<br>");
  coworkers.bookkeeper = "duru";
  document.write("bookkeeper : " + coworkers.bookkeeper+"<br>");
  coworkers["data scientist"] = "taeho"; //key 값에 띄어쓰기를 넣고 싶을 때 대괄호 사용
  document.write("data scientist : " + coworkers["data scientist"]+"<br>");

jQuery : 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리

UI(User Interface) : 사용자가 시스템을 제어할 수 있게 만들어주는 기능
API(Application Programming Interface) : 소프트웨어를 제어, 개발하기 위해 사용하는 인터페이스
모든 애플리케이션들은 API를 프로그래밍적으로, 즉 순서대로 실행하는 것을 통해 만들어짐.

저작자표시