05 - 17 ui 개발 기본기 준비 (5)

카테고리 없음

05 - 17 ui 개발 기본기 준비 (5)

Wonseein 2022. 5. 17. 13:44

* html 문서 내에서 script의 위치를 어디에 구성하는 것이 가장 효과적인가? 또한 그렇다면 그 이유에 대해 설명하라.

-> <script> 태그는 body 태그 최하단에 위치하는 것이 가장 좋다.

* 이유는?

-> HTML을 읽어 내려가는 과정에서 script 요소를 만나면 파싱을 중단,

중단된 상태에서 자바스크립트 코드를 로드후에 자바스크립트 코드를 파싱한다.

그리도 다시 HTML 파싱이 계속된다.

결과적으로 HTML을 읽는 과정에서 자바스크립트 로드와 파싱을 위해서 중단되는 시점이 생기고,

그에 따라 그만큼 Display에 표시되는 것이 지연된다.

그래서 body 가 로드 된 이후

body 바로 밑에 script를 위치하게 하여 웹 페이지 로드를 최대한 줄여줄 수 있다.

( HTML 읽는 과정 중간에 스크립트 만나면 중단되는 시점이 생겨서 디스플레이에 표시되는게 지연이 되버림 )

( 그리고 파싱 끝나고 DOM 트리가 생기기 전에 자바스크립트가 실행 되어서 DOM 조작을 할 경우

에러가 발생 할 수 있는 문제가 있음 )

* 그렇다면 script 태그의 async / defer 속성에 대해서 설명하라.

또한 왜 그 태그를 사용하는지 그 이유도 설명하라.

-> 우선 body태그 최하단에 위치하지 않고도 이러한 문제들을 방지하기 위해서 사용하는 태그이다.

기본적으로 script 태그는 위에서 작성한 브라우저의 동작 방식대로 불러진다.

하지만 async / defer 속성을 사용함으로써 다르게 script 태그를 불러올 수 있게 된다.

async 또는 defer 속성을 사용하면 공통적으로 HTML 파싱과 동시에 스크립트 로드가 이루어진다.

그 후에,

async의 경우에는 HTML 파싱이 끝나지 않더라도 스크립트 로드가 완료되는 즉시 스크립트가 실행된다.

defer의 경우에는 HTML 파싱이 모두 끝난 뒤에 스크립트가 실행된다.

근데 일단 이 스크립트 태그가 바디 태그의 최하단에 위치한다면 굳이 이 태그들이 필요없다고 할 수 있다.

하지만 그렇지 않다면 이 async와 defer를 활용해서 볼 수 있는 효과가 있다.

( HTML 파싱이 완료되는 시간을 줄일 수 있는 효과 )

브라우저의 동작 방식.

1. HTML을 읽기 시작한다.

2. HTML을 파싱한다.

3. DOM 트리를 생성한다.

4. Render 트리 ( DOM tree + CSS의 CSSOM 트리 결합)가 생성되고

5. Display에 표시한다.

* 파싱이 무엇인가

* DOM이 무엇인가

* Render에 대해 설명하라

파싱 ( Parsing : 구문분석 ) 은 하나의 프로그램을 런타임환경 ( 예를 들면, 브라우저 내 자바스크립트 엔진 ) 이 실제로 행할 수 있는

웹 브라우저는 HTML 문서를 해석하고 화면을 통해 해석된 결과를 보여준다.

해석한 HTML 코드를 화면을 통해 보여주는 과정을 ' 렌더링 ' 이라고 한다.

렌더링 -> 해석 과정

DOM -> 렌더링되어 브라우저에 나타나기 전에 생성되는 문서이자 데이터! ( 트리형태임 )

DOM은 왜 굳이 존재하는 거임? ->

바로 스트레이트로 들어가면 되지 왜 중간에 dom이라는 중간 에이전시를 끼고 들어가는거임?

그것은 바로 " 자바스크립트 " 때문임.

이 문서에 스크립트를 이용할 수 있게하는데에 목적이 있음.

( 웹 콘텐츠 추가.. 동적인 요소 추가, 삭제, 각종 이벤트 처리 등 등 . . )

자바스크립트가 웹 문서에 대한 어떤 동작을 구현하고 나면,

dom에 그 결과가 반영되고,

웹 브라우저 화면이 다시 랜더링됨!

아무래도 HTML은 정적인데 이 DOM이라는 에이전시가 존재함으로 인해서

동적인 것들도 추가로 관리할 수 있게 되는거임.

DOM -> HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 하나의 형식이다. ( 에이전시임 )

DOM은 자바스크립트를 사용해서 웹 화면의 콘텐츠를 추가, 수정, 삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스를 제공.

파싱은 뭔데? 구문 분석이라고 했는데, 예를 들어

HTML을 일종의 DOM Tree로 해석하는 과정을 " 파싱한다 " 라고 한다.

( 알집을 푸는 것도 일종의 파싱! 컴파일도 일종의 파싱! )

파싱 ( Parsing ) 어떤 페이지 ( HTML ) 에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출하여 정보로 가공하는 것을 말한다.

* css flex에 대해서 설명하라.

보통 css를 통해서 레이아웃을 잡을 때에는 display, float, position과 같은 css 속성들을 이용한다.

그런데 이런 구성들로 레이아웃을 구현하는게 좀 복잡하거나 어려울 때가 있다.

그 한계를 극복하기 위해서 css3에 flex라는 방식이 새롭게 추가되었다.

flex는 레이아웃 배치 기능에 중점을 맞추어 고안되었기 때문에 기본 방식보다 훨씬 더 수월하게 마크업이 가능하다.

flexbox는 부모 요소인 flex container와 자식 요소인 flex item으로 구성된다.

* 어케 시작함?

flex를 시작하는 방법은 display:flex 를 적용하면 된다.

display:flex 를 딱 하게 되면, 보통 블락값이었던 박스들이 수직이 아닌 수평으로 변경되게 된다.

div 값은 flex container가 되고 내부 요소들은 flex item이 되는 것이다.

flex container와 flex item에 적용할 수 있는 속성은 각각 다르다.

flex container : display, flex-flow, flex-direction, flex-wrap, justify-content,

align-content, align-items

flex item : order, flex-grow, flex-shrink, flex-basis, flex, align-self . . .

( 이는 display flex 게임이 있으니 게임을 해보면서 개념을 더 정확히 하도록 하자. 개구리 게임 )

* 그렇다면 meta 태그란 무엇인가?

-> 브라우저와 검색 엔진을 사용할 수 있도록 문서의 정보를 포함하고 있는 태그이다.

* 왜 쓰는거임?

-> 메타 태그를 충실히 입력하면 검색 엔진에서 해당 키워드로 검색 시 상위에 노출될 확률이 높아진다.

이는 키워드 광고를 이용하지 않고도 사이트가 상위 노출됨으로써 광고비용이 절감된다.

* 종류는 뭐뭐가 있음?

1. keywords ( 검색엔진에 의해 검색되는 단어 지정 )

이렇게 쓰면 이제 아자아자화이팅을 검색했을 시에 노출이 되게 된다.

2. Description ( 검색 결과에 표시되는 문자 지정 ) - 설명, 서술

이렇게 쓰면 검색 결과 밑에 서술하는 칸 ( 제목 바로 밑에 ) 설명 부분에 컨텐츠 내용이 뜨게 된다.

3. robots ( 검색 로봇 제어 )

위와 같이 하면 구글에서 자신의 사이트가 색인화되거나 링크 연결이 안되도록 설정할 수 있다.

( 노인덱스,노팔로우 ) 주로 사이트가 개발중일 때, 자신의 사이트 중 일부 페이지가 구글에 노출되길

원치 않을 때 사용한다.

noindex: 검색 결과에 이 페이지를 표시하지 않는다.

nofollow: 이 페이지의 링크를 따라가지 않는다

noarchive : 검색 결과에 저장된 페이지 링크를 표시하지 않는다.

index: 그 페이지를 수집대상으로 한다.

Follow : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다.

4, charset ( 문자 코드의 종류 설정 )

인코딩 방식을 선언하는 것이다.

* 왜 선언하는거임?

-> 문자 깨짐 현상 등 심각한 오류가 나타날 수 있기 때문에 이를 방지하기 위해 가장 기본이 되는 것이 바로 인코딩 선언이다.

" UTF-8 " 을 쓰면 모든 언어의 문자를 인코딩 할 수 있다.

* 인코딩이 뭔데? ( encording )

-> 컴퓨터를 이용해서 영상이나 이미지 또는 소리 데이터를 생성할 때 원래의 데이터 양을 줄이기 위하여

데이터를 코드화하고 압축하는 것을 인코딩이라고 말한다.

( 다음팟 플레이어로 영상 변환하거나 용량 낮출 때 " 인코딩 " 이라는 단어를 많이 보았던 기억이 있다. 그게 그거임 )

5. Date ( 날짜 - 제작일 )

6. Content-Script-Type ( 웹페이지에 쓰인 언어 )

7. X-UA-Compatible ( 브라우저 호환성 )

8. subject ( 홈페이지 주제 지정 )

http-equiv = " 항목명 "

-> 웹 브라우저 서버에 명령을 내리는 속성이고 name 속성을 대신해서 사용할 수 있다.

9. title ( 제목 )

10. Author ( 페이지 작성 제작자명 )

11. Publisher ( 제작사 )

11. Other Agent ( 웹 책임자 )

12. Generator ( 제작도구 )

13. Reply-To / Email ( 메일 주소 )

14. File name = index. html ( 파일 이름 )

15. Location = "위치"

16. Distribution ( 배포자 )

17. Copyright ( 저작권 )

기타 등 등 ... 이 있다 ( 생각보다 양이 많다 )

* 파비콘은 뭐임? ( fav icon )

-> 주소창에 표시되는 작은 아이콘

* 메타태그 og ( 오픈그래프 ) 에 대해서 설명하라.

이런 형태인데, 카카오톡등에 공유할 때 보이는 그래픽 이미지와 설명, 타이틀을 보여주는 태그이다.

꼭 설정하지 않아도 되는 태그이지만 설정하지 않으면 웹에서 처음으로 보이는 이미지가

보이지 않기 때문에 꼭 따로 설정을 하고 싶다면 og 태그를 설정해주어야 한다.

* 현재 국내 브라우저 점유율은 어떤 상태인가?

-> 크롬이 압도적으로 많으며, 2위는 사파리이다. ( 그 외는 파이어폭스..엣지..웨일.. 등등 다양하다 )

* 그렇다면 이유는 무엇이라고 생각하는가?

-> 아마도 번역기능 및 더 다양한 확장프로그램의 존재유무일 것이다. 그리고 그런 확장프로그램들은

크롬에서는 무료지만 사파리에선 간혹 유료인 경우가 있다. 그래서 나도 사파리와 크롬 둘 다 쓰고 있다.

쾌적하게 쓰기엔 사파리가 좋지만 확장프로그램의 퀄리티나 가격적인 측면에선 크롬이 조금 더 우위를 가지고 있다.

그러나 사파리도 분명 안정성 측면과 쾌적함 측면 ( 리소스를 덜 잡아먹는다던지 ) 에서도 강점이 있기 때문에

앞으로 갈수록 엎치락 뒤치락 하지 않을까 하는 생각이 있다.

* 반응형 웹과 적응형 웹에 대해서 설명하라.

-> 반응형 웹이란 화면 크기와 기기 모델 상관 없이 거의 모든 유형과 화면 크기에 맞게끔 변경되는 방식이다.

반응형은 기기 해상도에 따라 모양이 반응형으로 변경된다는 점이 크다. 레이아웃이 해상도 사이즈에 따라

유동적으로 변한다. 그래서 이를 " 반응형 웹 " Responsive Web 이라고 한다.

그리고 이 웹은 " 도메인이 하나 " 이기 때문에 적응형에 비해 높은 검색 엔진 순위를 가진다.

순위가 높을수록 사용자들이 해당 사이트를 클릭할 가능성 또한 커진다.

그래서 SEO 를 높이게 하기 위해서는 도메인이 하나인 반응형이 좀 더 유리하다고 볼 수 있다.

-> 적응형 웹이란 사이즈를 고정하는 방식을 말한다. ( Adaptive Web )

적응형 홈페이지는 PC버전과 모바일 버전 별도로 웹사이트를 제작한다.

모바일로 접속하면 모바일버전의 웹사이트로,

PC로 접속하면 PC버전의 웹사이트로 이동하게 된다.

이 때 PC와 모바일 버전의 주소가 다르게 만들어진다.

반응형처럼 하나의 홈페이지가 아닌 2개의 홈페이지인 셈이다.

반응형에 비해 이점이 있다면 아마 기기에 최적화된 디자인이 가능하므로

가독성을 높이는데 반응형에 비해 자유로운 면이 있다는 점이다.

그러나 지정한 사이즈 이외의 사이즈 대응이 불가한 면에 있어서 유동적이지 못한 단점이 있다.

해서 현재의 대부분의 웹은 적응형이 아닌 반응형 웹으로 제작되고 있는 추세다. ( 한국 기준 )

* 블록요소와 인라인요소란 무엇인가? 또 이에 속하는 태그는 무엇인지 자세히 기재해달라.

-> Html에는 블록요소와 인라인요소가 존재한다.

( 블록 요소란 벽돌이나 블럭처럼 쌓이는 형태를 가진 태그를 말한다. )

블록요소는 층층이 쌓이는 요소이며, 가로값과 높이값을 가진다. 가로값은 기본적으로 100%이며

층층이 쌓이는 이유는 말 그대로 가로가 100%이기 때문이다.

해서 따로 css나 style을 통해 가로 값과 높이 값 그리고 마진이나 패딩과 같은 값들을 지정할 수 있다.

대표적인 태그로는

h1 h2 h3 h4 h5 h6 ( 제목태그 )

p 태그 ( 단락, 문단태그 )

ol , ul, li ,dd, dl, dt,

div,

hr,

address

인라인 요소는 그 반대로 층층이가 아닌 수평으로 쌓이는 구조이다. 열 부분에 해당됨.

보통 블락요소들의 자식 계층으로써 사용이 된다.

이들끼리 서로 부모 자식 관계를 가질 수 있다.

예시로는 <strong>, <em>, <span> 등이 있다.

<strong>태그는 텍스트를 굵게 표현하기 위해서 쓰이고,

<em>은 이탤릭체, 기울임체, 스트롱보다는 약하게 강조할 때 쓰인다.

<span> 태그는 요소들 중에서 일부의 디자인 혹은 기능을 바꿀 때 사용한다.

시각적으로 표현할 때 쓰인다.

a 태그 또한 인라인에 속하고, img또한 인라인에 속한다.

블록 요소 종류

address, article, aside, audio, blockquote,

canvas, dd, div, dl, fieldset, figcaption,

figure, footer, form, h1, h2, h3, h4, h5, h6,

header, hgroup, hr, noscript, ol, output, p,

pre, section, table, ul, video,

인라인 요소 종류 ( 위드와 헤이트 값으로 변형을 줄 수가 없습니다. ) 줄바꿈 x

a, button, em, i, img, input, label, span, strong, . . . .