05 - 16 ui 개발 기본기 준비 4

 

* cdn이란 무엇인가?

content Delivery Network 의 약자. 

 

전 세계에 전략적으로 분산되어있는 서버 네트워크이다. ( 지리적 )

 

일단 이걸 왜 쓰는지가 중요함. 아니 그냥 온라인 상에서 쓰면 되는데 왜 굳이 사람들이 cdn을 사용하는걸까?

 

서버란 것도 결국 컴퓨터이다.

 

누군가 해당 A 사이트에 접속한다면,

이 A 사이트를 제공하는 서버 컴퓨터에

방문자의 컴퓨터로부터 요청이 들어올거고

그 요청에 따라 서버가 컨텐츠를 보내주는 방식이다.

 

그림으로 표현하자면 대충 이렇다.

 

 

컴퓨터와 컴퓨터가 서로 ㅇㅋ 해야 컨텐츠가 보여진다는 것이 크다.

 

그런데, 이 그림에선 사용자가 1명이지만 만약 사용자가 수백명, 수천명이라면?

그리고, 여기에선 둘이 가까운 거리에 있지만. 한국이 아닌 아주 먼~ 아프리카에서 접속 요청을 한 것이라면?

 

이걸 어떻게 해결한담?

 

-> 이런 요청들을 여러 곳에다가 분산 시키는 방식을 선택한거임.

 

바로 여기에 쓰이는 기술이 CDN ( Content Delivery Network ) 인 것.

 

체인점 개념이라고 생각하면 될 듯?

 

버거킹 가고 싶음. 미국에 있는 버거킹 갈거임?

집 앞에 버거킹 체인점 있잖음. 거기 갈거아녀. 그게 cdn임.

각 지역의 담당 cdn 서버를 두고 분산하여 나눠서 방문객들을 처리하는거지.

 

dns -> 인터넷 상의 전화번호부 domain name system

 

 

* 가상 요소와 가상 클래스의 차이는?

 

 

css에서는 가상 요소 ( Pseudo-element ) 와 가상 클래스 ( Pseudo-element ) 가 있다.

이것들을 사용해서 html 문서의 수정 없이 css만으로 디자인적 요소를 추가할 수 있다.

 

이점 -> html 문서에 쓸데없는 태그를 사용해서 화면 리더기 등에 정보가 추가로 더 읽혀버리거나 

불필요한 클래스를 남발해 코드 가독성을 낮추지 않게 할 수 있다. ( 한줄 요약 - 최적화 )

 

가상 클래스 :

가상 요소 ::

 

 

사용자 동작에 반응하는 가상 클래스

:link , :hover , :active , :visited(한번 방문했던) , :focus (키보드)

 

가상 요소 -> 내용의 일부만 선택해서 스타일을 적용할 때에 사용됨.

가상클래스랑 구분하기 위해서 클론을 하나 더 붙여 ::로 표시한다!

 

::before, ::after, ( 내용의 앞 뒤에 컨텐츠 추가하기 )

 

가상 클래스는 선택자에 추가하는걸로 뭔가 특별한 상태여야 만족할 수 있음.

가상 요소는 이제 가상으로 어떠한 요소를 주는거지 ( 별도의 추가 마크업 없이 css 만으로 제어가 가능하도록 )

 

크게 보면 클래스는 어떤 지정과 동작이 들어가고 요소는 하나를 콕 집어서 가상으로 추가한다! 이런 느낌이 강함.

 

 

 

* CSS 적용 우선순위를 말하라. 그리고 CSS란 무엇인가?

 

CSS란 Cascading Stylesheet.

웹 문서의 전반적인 스타일을 미리 저장해둔 스타일시트이다. 

문서 전체의 일관성을 유지할 수 있고 세세한 스타일 지정의 필요를 줄어들게 하였다.

 

CSS 써서 이점 ? -> 아무래도 유지보수 측면이 더 크다. 보다 더 풍부한 디자인으로 웹을 설계할 수 있다.

글자의 크기, 글자체, 줄간격, 배경 색상, 배열 위치 등을 자유롭게 선택하거나 변경할 수 있고 유지 보수도 간편해진다.

 

스타일 시트는 문서 내부에 포함될 수도 있고 외부로 연결될 수도 있다.

 

작성자측의 스타일시트보다 사용자 측의 스타일시트를 우선적으로 적용한다. ( 사용자 우선!!! 자동차 )

 

1. 속성 값 뒤에 !important를 붙인 속성이 첫 빠따이다.

2. HTML에서 style을 직접 지정한 속성이 두번째이다.

3. #id로 지정한 속성이 세번째이다.

4. .클래스 :추상클래스로 지정한 속성이 4번째이다.

5. 태그 이름으로 지정한 속성이다.

6. 그 다음이 상위 객체에 의해 상속된 속성이다 ( 예를 들어 부모 태그에서부터 상속되어 값을 받는다거나 할 때 )

 

* 같은 우선 순위에 있는 경우는 ?

-> 이런 케이스는 부모-자식 관계가 많은 경우가 우선시 되며, 모든 설정이 같은 경우 제일 나중에 선언한 것이 우선시 되어 적용된다.

 

1. 먼저 임포턴트 처리된게 제일 쎄고

2. 그 다음이 HTML 기본 뼈대에다가 따로 스타일 지정한게 두번째임.

3. 세번째가 이제 아이디고

4. 그 다음이 이제 클래스임. 또는 추상클래스.

5. 그 다음이 이제 태그 이름으로 지정한 속성이다.

6. 그 다음이 상속받는 css.

 

더 정확하게?

 

1. !important

2. html = style " "

3. # id

4. . class

5. :hover :link :active ( 가상 클래스 )

6. 태그

7. 전체 선택자 ( * )

8. 상속

 

 

* 제이쿼리란 무엇인가?

 

-> 제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리이다.

주로 플러그인들을 많이 활용.

 

* 그래 그럼 제이쿼리 플러그인은 뭐임?

 

-> 제이쿼리 플러그인이란 여러 개발자가 드래그 앤 드롭, 슬라이드 배너, 툴 팁 같은 기능등을 구현해놓은 프로그램을

자바스크립트 파일로 제공하는 제이쿼리 라이브러리이다.

ex ) 스와이퍼 JS

 

 

* 크로스브라우징이란 무엇인가?

 

-> 웹 페이지 제작시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 ( 호환성 ) 나오게 하는 작업을 말한다.

호환성과 관련이 깊다. 

HTML, CSS, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써, 

어느 브라우저, 어느 기기에서든지 사이트가 의도된 대로 보여지고 작동되도록 하는 기법을 말함.

 

- 크로스 브라우징 작업이 필요한 원인은 뭐임?

-> 이제 브라우저마다 랜더링 엔진이 다르기 때문이다. ( 특히나 IE 버전마다 웹페이지가 다르게 나오는 경우가 잦더라 )

 

 

* CSS 스프라이트란 무엇인가?

-> Css Image Sprite. 

웹 페이지의 첫 로딩 속도를 줄여주는 여러 방법 중 하나로 ( 최적화 ) 

서버로의 요청 횟수를 최소화 해줘서 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼의 최적화 요소 중에서도

실제 적용하기에 아주 손쉬운 방법 중 하나이다. ( 실제로 코딩할 때도 조금 더 편해짐 이미지 하나로 전부 다 처리가 가능하니까 )

 

아이콘이나 버튼과 같은 반복되서 표시되지 않는 그림들 처럼 독립된 여러 그림을 하나의 그림으로 합쳐놓고

CSS의 background-position 속성을 이용해서 이미지의 특정 부분만 노출되도록 하는 것이다. 

이렇게 하면 이제 각 이미지가 필요할 때 마다 이미지를 불러오는게 아니라

단 하나의 이미지로만 처리를 하니까 서버로부터의 요청 횟수가 획기적으로 줄어들게 된다.

그래서 사이트 로딩 속도를 줄여주고 내려받는 이미지의 크기까지 줄어 매우 효과적인 최적화 작업이 가능해진다.