0425-HtmlAndCss

John Doe Apr 25, 2018

크롱 피드백 !!!

ReadMe에는 img를 적절히 섞어서 시각화 하라는 의미?

-> 추상화 된 도식화 된 이미지 !!!
그냥 설명은 … 오히려 -> 코드 읽어봐 라는 의미 !!!

핵심을 그래프나 도식화 해서 더 파악하기 쉽게 설명 ~~!!!

네이밍

너무 위에서 부터 의존성 있는 그룹화는 좋지 않다 뎁스가 3이상 가지 않도록 주의

내 질문… 너무 단편적으로 만 봤다. 피드백 의도를 좀 더 생각 왜 시각화가 필요한 걸까?
더 잘 보이게 구조나 알고리즘이 며칠 고민했던 부분이 처음 보는 사람도 조금 더 쉽게 접근하기 위한 부분 문서화를 할 때 늘 처음 보는 사람인 시각을 고려 + 그 사람이 이해하기 쉬웠는가를 잘 파악할 것 !!!

CSS 방법론

CSS_방법론
CSS_방법론_byNTS

역시 한글 설명이ㅜ 정리도 잘되어 있다 !!!

Bem_자세한설명

BEM OOP와 유사 -> 그룹화 하는 점이 유사하다 하는 것 같다.
블락은 독립된 객체 어디 띄워놓아서 조립할 수 있는 단위 simple or Compound로 이루어져 있다.
SearchBlock에서
반면 element는 블락에서 특정 기능을 수행하는 파트이다 text, input, button
modifier는 여기서 변할 수 있는 성질의 것들 text수행하는 부분은 변하지 않지만 color, size등 등 style은 변할 수 있을 것이다 !!!

오늘은 Web자판기 HTML_CSS 부분을 공부!!!

CSS flex를 쓰지 않고 text 가운데 정렬


//부모
position: relative;
//자식
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;

or 하위 지원도 가능함 ! 

//부모ㄴ
display: table
//자식
display: table-cell;
vertical-align: middle;

하위 지원도 되고 2번째 부분이 텍스트 길이에도 더 안정적인 면이 있어서 display: table이 좋았다.

ETC

성실성 ?.? 체크 지각하면 커피라도 사야겠다 !

애플 사이트 보면서 공부

Question

html

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
요거 왜 해주는지 알아볼 것! 반응형에 필요한 걸까?

pre,code,address,caption,th,figcaption {
    font-size: 1em;
    font-weight: normal;
    font-style: normal
}
이 tag들... 잘 모르는 tag들 
...

hero라는 naming이 가지는 의미 ? hero class가 자주 나온다

stack_overflow_hero_css
w3_School_hero

저런 이미지 배너에 사용되는 부분을 hero !!! w3School Page에 가보니 어떤 것을 말하는지 좀 알 것 같다.

사이트의 메인 배너에 주로 사용하는 이름이라고 마케팅에서 왔다라는 유래 정도를 찾아볼 수 있었다.

async_defer

attribute에 async나 defer을 하지 않으면 html 파싱이 멈춘다 script다운과 실행하는 동안

async 일반적으로 async를 쓴다
async는 html 파싱과 script 다운로드를 동시에 한다. 그리고 script실행하는 동안 html 파싱이 잠시 멈춘다. 실행 한 후에 나머지 파싱을 한다.
defer defer는 html파싱 후에 async처럼 다운이 동시에 되는 부분은 같지만 script가 html파싱이 다 된 후에 실행된다.

이 속성은 IE9부터는 지원한다.

네이버,카카오… 같은 큰 회사 아닌 이상 사실상 써도 무관 :D IE9부터 지원하는 회사가 대부분이니 아닌가 우리나라는 잘 모르겠다 ㅜ

책 읽기

그림으로 배우는 HTTP & NetWork
웹을 지탱하는 기술

Ch1 웹과 네트워크의 기본에 대해서 알아보자

HTTP, TCP/IP 뿐아니라 Resource나 URI 와 같은 용어 중심으로 이해한다. 우리가 흔히 웹브라우저를 통해 인터넷을 하면서 경험한 것들인 것들이 많다. 동시에 크롬브라우저의 개발자도구를 살짝 학습하고, 네트워크 항목을 열어서 인터넷을 하면서 쌓이는 정보를 같이 살펴본다. 책에 나오는 개념을 같이 살펴보면 좋다.

HTTP 웹에서 서버-클라이언트가 주고 받는 통신규약 hyperText transfer protocol 즉, HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜(protocol)입니다

TCP-IP
Resouce
URI

URI 주소 자원이 있는
Resource 편지 자원 주고받을 컨텐츠 이미지,비디오, html, css,js …
HTTP 어떻게 주고 받을 건데 뭘로 비둘기

HTTP_MDN

여역시 mdn!!! :D 근데 알아야 될 것이 이리 많군요 ㅡㅜ

http는 무상태 프로토콜
stateless protocol,
웹_계층_구조

Though often based on a TCP/IP layer

HTTP는 또한 온디멘드 방식으로 웹 페이지를 갱신하기 위해 문서의 일부를 가져오는데 사용될 수도 있습니다.

Question KeyWord

onDemand방식
TCP/ TLS

부스트코스 풀스택 과정 레슨

웹서버
웹서버의 가장 중요한 기능은 클라이언트가 요청하는 각종 리소르를 보내주는 역할

웹 서버 프로그램들이 세세한 부분에서 다를지라도, 대부분의 프로그램들은 몇 가지 기본 공통 기능을 갖고 있다.

HTTP
통신 기록
그리고 기본 공통 기능에는 포함되지 않지만 대다수 웹 서버는 다음과 같은 기능도 제공한다.

인증
정적 콘텐츠 관리
HTTPS 지원
콘텐츠 압축
가상 호스팅
대용량 파일 지원
대역폭 스로틀링

ㅇ
크롤러 -> 다른 웹 사이트의 정보를 읽어오는 소프트웨어
웹서버의 이해서 실행되는 프로그램은 동적인 파일이 될 수 있다.

http - 교통 룰 에 비유해주심 신호등, 횡단보도로 걷는다.
통신규약

아파치, nginX
아파치 점유을 강자!
nginX 최근 뜨고 있음 차세대 웹 서버 !
nginX

생각해보기

네이버, 구글과 같은 검색을 할 수 있는 사이트에서는 검색어를 입력하면 검색어가 포함된 웹 페이지 목록을 보여줍니다.
네이버와 구글은 검색어가 포함된 웹페이지를 어떻게 알 수 있었을까요?

클라이언트에서 요청
tag?들이나 카데고리를 읽어올 수 있게 끔 분류해놓은 부분이 있어서 해당 컨텐츠들을 가지고 찾아서 가지고 오는 것 아닐까요???

WAS

Web-Application-Server
Apache Tomcat
DBMS database management system

dbms -> mddleware 클라이언트와 dbms사이에 중간 다리를 놓는 친구 대부분의 로직을 수행

was도 미들웨어의 한 종류
프로그램 실행환경과 dbms연결을 제공한다.
여러개의 트렌젝션을 관리한다
업무를 수행하는 비지니스 로직을 처리한다.
웹 서버의 기본 기능도 제공

TomCat->으로 다 처리할 수 있습니다 :D
규모가 커지면 웹서버와 WAS를 분리합니다. 그 목적은 장애 극복 기능인 경우가 많음 was-웹서버 여러개 서로 서로 연결 해 놓고 장애가 있으면 다른데서 was에서 문제가 발생했을 떄 앞단에 해당 웹서버에 접근을 먼저 못하게 한 후에 제시작을 하고 다시 접근 가능하게 함 !
웹서버는 WAS 보다 간단한 구조로 이루어져 있음

생각해보기
톰켓 버전별 차이점에 대해서 알아보세요.

링크줍줍

MVVM

JK가 던져준 링크 읽어볼 것 !