냠냠쩝쩝

CSS란? 

Cascading Style Sheet 을 말하여 웹에 사용되는 HTML 문서가 사용자에게 어떻게 보여지게 할지 만들어(꾸며) 주는 언어이다.

Mozilla에 설명이 잘 되어있어서 링크를 걸어둔다. (https://developer.mozilla.org/ko/docs/Web/CSS/ko/docs/Web/CSS/시작하기/CSS란)

HTML에 CSS를 적용하는 3가지 사용법이 있다.

1. 인라인(inline)방식

2. 내부스타일 시트

3. 외부스타일 시트 

(4. CSS 임포트)

1. 인라인 방식 

말그대로 HTML 코드안에서

<span>이라는 태그와 style속성을 통해 CSS 속성을 주어 사용한다.

※Result 누르면 결과를 확인 가능하다.

2. 내부스타일 시트 

HTML코드안에 넣는 것은 아니지만 같은 HTML문서 안에서 넣는 방식이다. 

<span>이라는 태그를 사용하였고

코드 외부에서 <span>태그를 정의하는 것처럼 <style>속성의 CSS를 사용하는 방식이다.

※Result 누르면 결과를 확인 가능하다.

3. 외부스타일 시트 

HTML코드안에 넣는 것도 아니고 같은 HTML문서 안에 넣는 방식도 아니다. 

HTML의 가장 중요한 것!  

링크를 통해서 확장자가 .CSS인 문서를 HTML과 연결 시켜주는 것이다. 

아래 코드를 보면 알 수 있는데 

<link rel ="stylesheet" href="style.css">를 통해 HTML에 style.css를 링크를 걸어 준걸 볼 수 있다. 

따라서 내부스타일 시트와 다르게 <style>태그 없이 바로 <span>을 통해 속성값을 줄 수 있다는 것도 확인 가능하다.

※CSS, Result 누르면 CSS문서와 결과를 확인 가능하다.

(4. CSS 임포트)

3. 외부스타일 시트 처럼 CSS를 작성하고 HTML에 @import url을 사용해 넣는 방식이다. 

너무 번거럽고 귀찮아 잘 사용하지 않는다.  

어떤 방식을 적용해야할까?

그렇다면 어떻게 CSS 적용해야 잘했다고 소문이 날까??

1. 인라인 방식의 경우 사람이 보았을 때는 무척 편리하다.

바로 앞에 속성이 정의가 되어있으니 읽어가면서 바로 확인이 가능하다. 

하지만 크롤링을하는 크롤러의 입장에서 보았을 경우에는 좋지 않다. (ex.글을 가져가야하는데 CSS속성이 끼여있다.)

그리고 한번만(적은 횟수)로 CSS를 사용했을 경우에는 좋지만, 

여러번 사용하게된다면 소스코드가 늘어나고 수정시 번거로운 일이 발생할 수 있다.

그렇다면 2. 내부스타일 시트 방식으로 CSS를 모아서 관리하게 되면 어떤가??

내부스타일 시트의 경우에는 CSS내용이 전부 HTML에 속해있다. 

이것이 중요한 포인트가 되는데..

스마트폰을 사용하면서 인터넷 네트워크를 사용하면 요금이 나간다. (LTE데이터, 3G데이터라고 하는 것들...)

따라서 인터넷 서핑을 하게 될 경우 HTML를 요청하고 응답받으면서 인터넷 네트워크를 사용하므로 데이터 사용이 발생하게 될 것이고, 

HTML안에 많은 내용의 CSS데이터가 포함이 되어있다면, 그많큼 더 많은 데이터를 사용하게 될 것이다. 

이렇게 생각했을 때.. 

CSS의 내용(속성)은 변하지 않는다고 가정하면

우리가 HTML을 받을 때마다 똑같은 CSS를 계속 포함해서 받게되면 우리는 아까운 데이터를 더욱 많이 사용하게 된다는 것이다.

이걸 막기위해 3. 외부스타일 시트 방식으로 CSS를 사용하면 좋은데

HTML문서가아닌 외부문서에 CSS를 관리하기 때문에 내용변화가 없는 CSS는 한번만 받아서 캐시(캐시메모리)로 저장하게 되면 불필요한 데이터 낭비없이 사용자가 사용하기에 더욱 편리한 웹 환경을 만들어 줄 것이다. 

정리:

1.인라인 방식은 가끔사용할때 사용하자.

2.내부스타일 시트방식을 사용할 바에는

3.외부스타일 시트방식을 사용해보자!!!!!

외부스타일 시트방식 짱!!!!

CSS 치트시트 링크 : http://learn.shayhowe.com/advanced-html-css/complex-selectors/

HTML 

HTML이름설명(http://hpitos.tistory.com/8)

Hyper Text Markup Language.

한가지 중요한 점이 HTML 태그를 사용함에 있어서

CSS나 JavaScript에서 표현 가능한 동적 처리 표현은 사용을 지양하는 것이 좋다.

cf) 인터넷 크롤링을 하였을때 

(인터넷 크롤링 : 웹 정보를 수집하는 봇들이 HTML내용을 긁어서 DB에 저장한다음 사용자가 검색한 키워드와 자신이 저장한 내용을 비교해 우선순위 높은 것을 나타내준다.)

예를들어 : <strong></strong> 이라는 태그안에 감싸져 있는 컨텐츠를 크롤러가 중요한 내용인줄 알고 판단할 수 있는 계기를 만들어 줄 수 있다. (<strong>하면 효과를 받는 컨텐츠가 굵게 표시된다.)

cf) <br> 태그는 글의 개행을 시키는 것에만 사용한다. (무조건 글안에만 사용할 것!!) 

cf) <h*> 태그는 <strong>과 비슷한 개념 h1, h2, h3.... 진행하는데 h1이 가장 크다.

HTML 기본 태그를 알고가자

<CSS나 JavaScript에서 표현 가능한 동적 처리 표현은 사용을 지양!!>

(표 참고:http://2verworks.tistory.com/8)

HTML 치트시트 사이트 : http://overapi.com/html

Node.js 란???

자바스크립트가 서버로 사용하기 어려웠는데 구글에서 서버개발해서 웹서버로 사용해도 되겠다. 

Node.js 특징

프로세스와 쓰레드

쓰레드 : 한번에 여려개 실행할수 있도록하는 것 (멀티태스킹)

멀티프로세스 : 메모리 위에 프로그램을 여러개 올린다. 

멀티쓰레드: 프로그램 하나 안에서 메모리 공유를 하고있는 것이다. 

쓰레드: 함수 실행단위 하나하나

쓰레드 풀:

Node.js는 싱글 쓰레드 기반이다. 

- 그럼 한명밖에 웹서버를 사용하는 것 아닌가?? 

non blocking I/O 모델을 사용했기 때문에 

Blocking은 우리가 경험해보았던 것이다. 

함수호출 순서 (콜링이 포함되어있을때)

함수호출이 일어났을때 멈춰있는 상태가 블로킹

non blocking 은 호출 끝나는거 기다리는 것없이 바로 진행한다. 

예제는 파일 입출력으로 주로한다. 

문서보는 법 

동기화는 블로킹

논블로킹은 동기화가 아니다. 

인자가 다르다는 것을 볼 수 있다. 

fs쓸때 노드 이름이랑 같이 쓴다. 

const => 상수가 된다. 어디에 들어갔나 알수있다. 모듈을 넣을때 var대신 const로 넣는다. 

코드짜서 해보기 실습하고

nonblocking해본다. 

자바스크립트 코드에서 '작은따음표'

왜이렇게 찍혔나

node

|

|    A Point

|

writefile ------> 이벤트 루프 전임

|

|    B Point

|

끝 <---------------- 이벤트 루프 마침

함수 호출은 해버려 해버리고 이벤트루프--> 쓰래드를 여러개 가지고있는데 얘한테 writefile을 시켜버린다.

이벤트루프는 실행루프에따라서 전달받은것을 실행한다. 

그리고 일을 처리하고 끝났다라고 한것을 알려줘야지만

callback함수 -- 호출을 어떤함수에서 하는 것이 아니라 호출을 당하는 함수이다. 

Sync붙어있는 거는 블로킹방식이다. 

Node.js는 싱글쓰레드다. 그래서 Sync를 쓰고있는 동안에 다른 사용자가 서버쓰는 중에 다른 사용자가 할 수 없다. 

기술적으로 해결을 가능한데 동기화 방식을 통해서 해결할 수 있긴하다. 

차이점 정도만 알고있자....

OS보는거

운영체제 왜보는지

자바스크립트위에서 돌아가기때문에 상관없는데 조금씩 다르게 쓸때 필요하다.

이벤트

생성자를 호출해서 객체를 만들어주어서 사용한다. 

HTTP모듈을알아보자

그전에 요청하고 응답에 대해서 알아봐야한다. 

NETWORK 부분설명

HTML 보내고 받는거

찍어보기

req. url 

url.parse(req.url)

app.js를 통해서 내용볼수있는데

query를 통해서 내용을 검색할 수 있다. 

매핑과정

: if 로그인폼 출력

헤더에따라 달라진다.

createserver :

listen(8080):

매핑하는 법 

express 사용하고

JSON이라는 객체를 통해서 전달한다. 

JAVA Script

obvece

notation

웹1.0    웹2.0

     AJAX 통해서 새로고침을 안해도 자동완성을 받아올수있다. 페이지 전체를 새로고침하는 것이 아니고

     XML 를 JSON이 대체했다. 

상식:

X86

LTS : 

람다식: 불필요한거 티나지 않게 

=== : 타입까지 검사한다. 

문자를 따로 구분하지않고 문자열이라고한다. 

NULL = 아무것도 안가르키는것

undefined = 값을 아직안넣은것 (초기화가 안되어있는 상태)

자바스크립트 comparison table 을 통해서 1 === '1' 타입까지 확인할 수 있다.  !==를 통해 if문에서 참으로 동작하는 것과 아닌것들 확인가능