기본 개념 잡기

UI 개발을 했다고는 하지만 설명을 할 수 없어 제대로 정리하는 글.

1. 웹 퍼블리셔란?

웹디자이너, 웹프로그래머, 웹기획자 등과 웹사이트의 제작 및 진행방향 등에 대해 협의하고 조언한다.
웹디자이너 또는 HTML 코딩원에 의해 코딩된 작업물을 웹 표준, 웹 접근성, 크로스 브라우징, 시멘틱 마크업 원칙에 맞추어 코딩한다.
작업 결과물을 웹프로그래머, 웹기획자 등에게 전달한다. 운영 중인 웹사이트를 점검하여 웹 표준, 웹 접근성 등에 부합하는지 검토하기도 한다.

출처 : 고용노동부 한국고용정보원 워크넷

1-1. 웹 퍼블리셔의 어원?

현재는 웹에 어플리케이션 개념이 들어오고 있지만, 기본적으로 웹은 문서이다.
그래서 문서나 책을 출판하는 퍼블리시라는 단어와 연관짓게 되었고,
어도비에서는 웹 페이지를 만드는 작업을 웹 퍼블리싱이라고 지칭했고, MS사 프론트 페이지도 퍼블리싱이라는 용어를 사용했기 때문에, 당시 웹 퍼블리싱을 담당하던 신현석 님에 의해 탄생되었다.

또한, 사용자 인터페이스를 구현한다는 의미에서 UI 개발자라고 부르는 경우도 있다

2. UI 개발자의 역할론

디자인을 구조화하고, HTML과 CSS로 실제 사용자가 보는 화면을 제작한다
XHTML/CSS를 통한 화면 제작, 웹표준 준수, 개발단과 디자인 조율, ajax와 플래시를 사용한 RIA 제작 등이 주 업무이다.
UI 개발이란 말 그대로 User Interface를 개발하는 것
사용자는 어떤 조작 부분을 조작하여 기계를 사용할 수 있게 된다.
따라서 사용자는 항상 조작부분에 해당하는 인터페이스를 사용한다.
이 과정에서 사용자 경험이 발생하게 되는데, 사용자 경험을 만드는 일이 바로 UI 개발인 것.

반응형

3-1. 반응형이란?

3-2. 반응형 처리 방법

HTML

  • HTML : 웹문서의 컨텐츠(의미, 구조)
    • HyperText Markup Language
  • CSS : 웹문서의 디자인(스타일)
  • JavaScript: 웹 문서의 동작
    • 최근에는 서버 사이드 프로그래밍도 지원
  • XML : Extensible Markup Language
  • 주로 웹 어플리케이션 or WAS 설정 정보를 명시할 때 사용
  • 데이터 통신용으로도 사용되었지만 최근에는 JSON을 주로 이용

HTML의 기본 구성

<!DOCTYPE html>
<html>
  <head>
    <!-- 본문에는 표시되지 않고, 현재 문서 설정 정보를 저장 -->
  </head>
  <body>
    <!-- 본문 화면의 디자인 구성 : 웹 화면을 표현 -->
  <br> <!-- 행 변경 -->
  <img src=""> <!-- 이미지 표현 -->
  </body>
</html>

head

HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않는다.
head는 title같은 페이지나, css의 링크, 파비콘, 그리고 다른 메타데이터(작성자,중요한 키워드같은 html에 대한 내용)를 포함한다.

메타데이터 란?
HTML의 head 안에는 문서 작성자나 문서 요약과 같이 문서를 설명하는 데이터를 넣을 수 있다. 이것이 바로 메타 데이터.

  • 문서의 character 인코딩을 특정하기
<meta charset="utf-8">

utf-8은 전세계적인 character 집합으로 많은 언어들과 문자들을 포함한다.

크롬같은 일부 브라우저는 잘못된 인코딩을 자동으로 고치기 때문에, 어떤 브라우저를 사용하는가에 따라 문제가 발생할 수도 안할 수도 있다.
다른 브라우저에 있을 잠재적인 문제를 피하기 위해 인코딩을 utf-8로 설정해야한다.

  • 저자와 설명을 추가

많은 meta 요소가 name과 content 속성을 가진다.

  • name
    • 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려준다
  • content
    • 실제 메타데이터의 컨텐츠이다

예제

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

저자를 지정하는 것은 콘텐츠 작성자에 대한 정보를 볼 수 있게 해준다.
일부 컨텐츠 관리 시스템에는 페이지 작성자 정보를 자동으로 추출해서 사용할 수 있는 기능이 있다.

페이지 콘텐츠 관련 키워드를 포함시키는 것은 검색엔진에서 이 페이지가 더 많이 표시 될 가능성이 생기게 할 수 있다.

예제

<!DOCTYPE html> <!-- html5 선언부 -->
<html lang="en-US">
<head> <!-- 현 웹 페이지의 설정 정보 명시 -->
<link rel="stylesheet" href="my-css-file.css">
<meta charset="UTF-8"> <!-- 한글 처리 방식을 명시 -->
<title>step1 html</title> <!-- 제목표시줄에 표현(웹브라우저 상단부) -->
</head>
<body> <!-- 본문 화면에 표현됨 -->
 Hello HTML <br> <!-- 행 바꿈 -->
 <font size="7" color="green"> 생일 축하합니다 ~ </font>
 <script src="my-js-file.js"></script>
</body>
</html>

1. Doctype을 사용하지 않으면?

: Docktype으로 코딩의 유형을 선언하게 되는데, 이를 사용하지 않으면 각 브라우저별로 깨지는 현상이 발생

DOCTYPE 선언은 HTML 작성된 버전을 브라우저에게 알려주는 것으로 웹브라우저가 내용을 올바르게 출력하도록 돕는다.

  • DOCTYPE 선언을 하면?
    • 표준 모드로 작동
  • DOCTYPE 선언하지 않으면?
    • 호환 모드(Quricks Mode)로 작동, 의도와 달라짐

2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는?

b & strong : 글자 굵게, i & em : 기울기

3. block 요소와 inline 요소에 해당하는 태그

답변 )

  • block
    • div, section, header, footer, aside
  • inline
    • span, p, strong, img, em, a
  • block address, article, aside, blockquote, canvas, div, dd/dl/dt , fieldset, figcaption/figure, footer, form, h1-h6, header, hr, ul/ol/li, main, nav, noscript, p, pre, section, table/tr/th/td, video….
  • inline a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, output, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var…

4. blockquote 태그의 용도

인용문의 출처, 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보

5. 인라인 스타일을 가급적 사용하지 말아야 할 이유?

인라인 스타일(style=“property:value”)은 가독성을 떨어트리고 유지보수가 어렵다

6. myPhoto.jpg 파일을 img 태그로 작성해보세요.

me) 사진이미지

7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?

내 답변 )
class와는 달리 유일한 속성을 가져야하는 태그에 사용한다.
공통 스타일을 적용할 수 없기 때문에 공통적인 부분은 클래스로, 유니크한 부분만 id로 작성해야한다

8. ‘TopArea’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

대문자로 시작하게 짓지 않는다.

9. ‘blue-box’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

직관적이지 않고, 바뀔 수 있는 색상이나 위치 등으로 네이밍을 하면 바뀌었을 때 네이밍도 다시 해야하는 번거로움이 있다.

10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?

주요한 주제가 아닌 부차적인 요소 적용

11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?

label

12. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?

CSS

1. 화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요.

clip-path를 이용해 숨기기.

clip-path란?
지정된 클리핑 범위 바깥 부분을 숨겨주는 속성.

추가 설명)
텍스트를 숨기는 방법은 여러가지가 있다.

출처 : https://velog.io/@ursr0706/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84-%EA%B3%A0%EB%A0%A4%ED%95%98%EC%97%AC-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%88%A8%EA%B8%B0%EA%B8%B0

  • 1) display: none 또는 visibility: hidden
{
  display: none;
}
/* 또는 */
{
  visibility: hidden; 
  /* 위와 달리 너비를 차지하고 있지만 못읽는다 */
}

영역에서 아예 사라진다.
화면에 안보이고, 보조기나 검색엔진이 접근할 수 없음.
따라서 스크린 리더 사용자가 해당 텍스트를 들을 수 없다.

스크린리더 읽지 ❌ 접근성 ❌

  • 2) 요소의 크기를 0으로
{
  width: 0; 
  height: 0;
  font-size: 0;
  line-height: 0;
}

일부 스크린리더가 해당 요소를 읽지 않을 수 있다.

스크린리더 읽지 ❌ 접근성 ❌

  • 3) 불투명도(opacity)를 0으로
{
  opacity: 0;
}

스크린리더 읽지 ❌ 접근성 ❌

  • 4) text-indent로 화면에서 밀어내기
{
  text-indent: -9999px;
}

form 또는 link와 같은 요소에 사용할 경우
포커싱 되었을 때 스크린 밖에 위치해 있기 때문에 정확한 위치를 표시 할 수 없어 혼란을 줄 수 있고, 검색엔진 최적화에도 좋지 않은 영향을 미칠 수 있다고 한다.

스크린리더 읽지 ❌ 접근성 ❌

  • 5) position으로 밀어내기
.offscreen {
    position: absolute;
    top: -9999px;
    overflow: hidden;
 }

화면에서 멀리 밀어내는 방법.
그런데 이 방법은 스크린리더가 차례대로 웹을 탐색하다가, .offscreen클래스가 적용된 영역을 읽을 때 top: -9999px;속성값이 적용되면서 화면 스크롤이 갑자기 상단으로 이동하게된다.
스크린 리더가 읽는 곳이 갑자기 화면에 보이지 않게 되면서 이용자는 콘텐츠를 이해하기 어렵게 된다.
(스크린리더 사용자 중 화면을 보며 스크린 리더를 사용하는 저시력 장애인 사용율도 높다고 한다.)

스크린리더 읽지 ❌ 접근성 ❌

  • 6) clip-path를 이용해서 숨기기 => 접근 가능한 숨김 텍스트를 만드는 속성! ⭐️
.a11y-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 0);
}

지정된 클리핑 범위 바깥 부붙을 숨겨주는 속성 Clippy — CSS clip-path maker - Bennett Feely에서 다양한 결과를 볼 수 있다.

  • position: absolute;
    • : 레이아웃에 영향을 주지 않게 nomal flow에서 해당 아이템 영역을 없앤다.
  • width: 1px; height: 1px;
    • : width, height값을 최소한의 크기로 조절한다.
  • margin: -1px;
    • : 화면상 아예 안나오게 한다.
  • overflow: hidden;
    • : overflow된 콘텐츠를 숨긴다.
  • clip-path: polygon(0 0, 0 0, 0 0);
    • : 클리핑 범위를 모두 0으로 지정해서 요소를 숨긴다.

이 방법은 화면에서 요소를 숨기고 스크린 리더가 해당 요소의 텍스트를 읽을 수 있으며 보조기기가 접근했을 때 화면 스크롤의 움직임을 막을 수 있다.
.ally-hidden클래스의 css값을 저장해두고 접근성을 고려하여 요소를 숨겨야 할 경우에 사용하면 좋을 것 같다.
[참조] https://developer.mozilla.org/ko/docs/Web/CSS/clip-path

2. float 속성을 가진 자식을 품은 부모요소는 높이 값이 0이 되는 때가 있습니다. 이 현상을 해소하는법(clearing)을 알고 있나요?

플로팅한 요소는 문서의 흐름상에서 벗어난 상태라, 레이아웃을 무너뜨리게 되는 현상이 생김

  • 해결법 1)
    이를 해결하려면 clear 속성을 적용해 float의 영향을 받지 않게 해야한다.

해제하는 방법 중, float가 적용된 요소의 부모요소에 적용하는 관용적인 방법으로 clearfix라는 방법이 있다.

.clearfix {
  clear: both;
}
  • left : 왼쪽에 floating 된 요소를 지정 해제
  • right : 오른쪽에 floating 된 요소를 지정 해제
  • both : 왼쪽 오른쪽 모두 floating 된 요소를 지정 해제
  • none : 기본값(default), floating 을 해제하지 않음

float를 선언하면 컨테이닝 문제가 발생한다. (float가 지정되면 공간을 차지하지 않음)
컨테이너가 float이 지정된 엘리먼트를 감싸지 못하는데,
clear를 지정하면 컨테이너가 float이 지정된 엘리먼트를 감싼다.

  • 해결법 2)

부모 요소에 overflow:hidden을 적용한다.
원래 자식 요소가 부모 요소 박스보다 클 경우, 자식 요소 박스의 콘텐츠를 숨기고 보이지 않게 해주는 속성인데,
넘치는 콘텐츠를 숨긴다는 의미는 부모 요소 박스가 그 자식 요소 콘텐츠를 숨긴다는 것.
부모 요소가 float된 자식 요소로 인해 높이를 인지하지 못할 때 overflow:hidden을 주면,
넘치는 요소를 숨김 처리하기 위해 자식 요소의 높이를 인지하려고 지동으로 높이값을 계산한다.

이 방법은 권장되지 않는다.
동적(스크립팅)으로 자식 요소들을 부모 요소를 벗어나서 보여줘야할 경우, hidden 값으로 인해 보여주고자 하는 콘텐츠를 보여줄 수 없게 되기 때문.

3. border-box와 content-box의 차이점은 무엇일까요?

box-sizing의 속성 중 하나. 초기값은 content-box.

  • content-box
    • width와 height 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않는다.
    • 요소의 크기
      • 너비 = 콘텐츠 너비
      • 높이 = 콘텐츠 높이로 계산하며 테두리와 안쪽의 여백은 식에 넣지 않믕
    • {width: 350px; border: 10px solid black;}를 적용한 요소의 너비는 370px
  • border-box
    • width와 height 속성이 안쪽 여백과 테두리를 포함하고, 바깥 여백은 포함하지 않는다.
    • 요소의 크기는 너비 = 테두리 + 안쪽여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽여백 + 콘텐츠 봎이
    • width: 350px; border: 10px solid black;를 적용한 요소의 너비는 350px

4. position: relative는 어떤 경우에 사용 하나요?

position:relative를 적용한 요소 자기 자신을 기준으로 배치할 때 사용.

position 속성

  • static
    • 기준 없음
  • relative
    • 요소 자기 자신을 기준으로 배치
    • 요소를 일반적인 문서 흐름에 따라 배치한다
    • 요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다
    • 위치를 이동하며 다른 요소에 영향을 주지 않는다.
    • 문서 상 원래 위치가 그대로 유지된다.
  • absolute
    • 부모(조상)요소를 기준으로 배치
    • 요소를 일반적인 문서 흐름에서 제거한다
    • 조상 중 position을 가진 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다.
    • 문서 상 원래 위치를 잃어버린다.(아래에 있는 요소가 해당 자리를 차지한다)
  • fixed
    • 뷰포트 기준으로 배치
    • 요소를 일반적인 문서 흐름에서 제거한다
    • 페이지 레이아웃에 어떠한 공간도 배정하지 않음
    • 뷰포트를 기준점으로 붙어있음
  • stickey
    • 스크롤 영역 기준으로 배치
  • 조상 relative & 자식 absolute
    • 한 단계 올라가서 조상의 position값을 찾아서 기준점으로 삼는다
  • 조상 position 없음 & 자식 absolute (body태그와 html태그까지 없음)
    • window 객체의 viewport를 기준점으로 삼는다

5. CSS Reset은 무엇이며 왜 사용할까요?

브라우저마다 서로 다르게 가지고 있는 기본 서식 스타일을 하나로 통일해서 크로스 브라우징 하기 위해서.

크로스 브라우징(Cross Browsing)?
작업물이 어떠한 브라우저에서든 같은 모양을 보여주게하는 작업

* { margin:0; padding:0; }

universal Selector로 모든 태그에 적용된 서식에 margin과 패딩을 제거할 수 있지만,

가장 많이 사용 하는 것은 에릭 마이어의 css Reset이 가장 유명하다.

6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?

CSS 전처리기(CSS Preprocessor)란?
모듈별로 특별한 syntax를 가지고 있고 여기에 믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(inheritance selector) 등 프로그래밍 방식의 요소를 접목해 방대해지는 CSS문서의 양을 효율적으로 처리하고 관리해주는 통합적인 단어.

대표적인 전처리기로는 Sass, Less, Stylus가 있다.

이 CSS 전처리기 자체만으로는 웹 서버가 인식하지 못하기 때문에, 각 전처리기에 맞는 Compiler를 사용해야하며 컴파일 하면 css 문서로 변환된다.

CSS 전처리기의 장점

  • 재사용성
    • 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체
  • 시간적 비용 감소
    • 임의 함수 및 Built-in 함수로 인해 개발 시간적 비용 절약
  • 유지 관리
    • 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리가 용이

유지 관리는 가장 중요한 장점이다.
CSS 스타일링을 하며 클래스를 정의하다보면 상속과 공통 속성을 지정하기 위해 엄청나게 길어지곤 한다.
이것이 CSS가 가독성이 떨어지는 이유 중 하나다.
그래서 CSS 전처리기에서는 중첩(Nesting)과 상속(Extend)를 통해 구조화할 수 있다.

  • 중첩(Nesting)
.class-A 
    width: 100%

    .A-child-1 
        color: red
    

    .A-child-2 
        color: blue

컴파일하면 아래처럼 된다

.class-A {
    width: 100%
}

.class-A .A-child-1 {
    color: red
}

.class-A .A-child-2 {
    color: blue
}
  • 상속(Extend)
.class-A 
    color: red
    padding: 10px

.class-B 
    @extend .class-A
    border: 1px solid red

컴파일하면 아래처럼 된다

.class-A, .class-B {
    color: red
    padding: 10px
}

.class-B {
    border: 1px solid red
}

CSS 전처리기의 단점

퍼블리셔나 디자이너가 개발에 대한 역량과 요소를 알아야 한다는 것이 문제이다. CSS 전처리기(CSS Preprocessor)는 프로그래밍 요소를 접목했기 때문에 분기문 처리, 변수의 이해, mixin의 이해 등 개발적인 요소를 알아야 한다.

7. id, class, inline style, !important를 우선순위 순으로 나열해보세요.

css 선택자의 명시도

  • 1) 유형 선택자(h1 등) 및 의사 요소(:before 등).
  • 2) 클래스 선택자(.example 등), 속성 선택자([type=”radio”] 등), 의사 클래스(:hover 등).
  • 3) ID 선택자(#example 등).

!important 예외 이 선언은 그 어떤 선언보다 우선시한다.
공통 스타일을 변경 시 !important를 사용하면 다른 부작용 신경 쓸 필요 없이 빠르고 간편하게 수정할 수 있기 때문에 사용할 수 있겠지만,
매우 좋지 않은 습관이고 반드시 다른 작업자와 상의 후 명시도에 따라 스타일링을 해야한다.
명시도와는 전혀 관련이 없으니 !important를 선언하기 전, 명시도를 활용할 방법을 찾아야한다.

8. CSS에서 상속이 되는 속성을 2개만 꼽아보세요.

me) color, font

visibility, opacity, font, color, line-height, text-align, white-space

  1. Sprite image 기법을 사용하는 이유는 무엇일까요?

me) 이미지를 불러오는 횟수를 줄여 로딩속도를 빠르게 처리

서버 요청 수가 감소되고 대역폭이 절약됨

  1. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.

me) background-position, background-size

  1. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?

me) 시간은 오래걸리지만 순차적으로 디벨롭 하는것

  1. 웹폰트를 적용하기 위해서는 어떤 확장자의 폰트 파일들이 필요할까요?

me) woff, woff2

TTF/OTF, WOFF, WOFF2, SVG, EOT

13. 개발사 접두어(vendor prefix)를 꼭 사용해야 할 CSS 속성(property)를 2개만 꼽아보세요.

벤더 프리픽스(vendor prefix )

브라우저마다 따로 노는 CSS3의 속성을 각각 브라우저들이 인식하게 하기 위해 만들어짐.
CSS 표준안으로 확정되지 않았거나 특정 브라우저에서만 지원되는 CSS 속성을 사용하고 싶을 때 사용하면,
그 기능이 포함되지 않은 브라우저에서도 사용 가능.

  • 벤더 프리픽스의 미래
    웹 브라우저 시장은 구글 크롬 중심으로 정리가 되고, 주요 웹 브라우저들은 최신 CSS 표준을 빠르게 지원하면서 벤더 프리픽스의 필요성은 점점 줄고있다.
    하지만 CSS는 HTML과 달리 웹표준이 정해지지 않았고
    모든 브라우저가 동일한 방식으로 지원하는 건 아니기 때문에
    CSS를 모든 브라우저에서 원활히 사용하기 위해 알아야할 필요가 있다. 
{
-webkit-border-radius: 10px; /* 크롬, 사파리 */
-moz-border-radius: 10px; /* 파이어폭스 */
-o-border-radius: 10px; /* 오페라 */
-ms-border-radius: 10px; /* 인터넷 익스플로러 */
border-radius: 10px;
}

CSS 속성은 오는 순서에 따라 순차적 적용되기 때문에, 벤더 프리픽스가 붙은 속성과 표준 속성이 모두 있을 경우 나중에 오는 속성이 적용된다.
=> 표준 속성을 가장 마지막에 둔다.

CSS 코드만 넣으면 자동으로 벤더 프리픽스를 붙여주는 사이트도 있다.

-webkit- : 구글 , 사파리 브라우저에 적용 -moz- : 파이어폭스 브라우저에 적용 -ms- : 익스플로러에 적용 , 보통 생략합니다. -0- : 오페라 브라우저에 적용

  1. 반응형웹디자인의 3가지 요소를 꼽아보세요.
  • 1) Fluid Grid : 가변성이 있는 그리드(레이아웃)이용
  • 2) Flexible Images : 고정값이 아닌 퍼센트개념
  • 3) Media Query : 디바이스에 따라 스타일 다르게 적용
  1. 모바일기기를 대응할 때 기준으로 삼는 해상도 사이즈는 몇이며 그 이유는 무엇인가요?

[4개의 반응형 분기점]

  1. 낮은 해상도의 PC, 테블릿 가로 : ~1024px
  2. 테블릿 가로 : 768px ~ 1023px
  3. 모바일 가로, 테블릿 : 480px ~ 767px
  4. 모바일 : 320px ~ 480px

18. jpg, gif, png의 차이점을 설명해보세요.

  • jpg: 고해상도 이미지

  • gif : 움직이는 이미지, 용량이 작음

  • png: bmp 또는 투명도 들어간 이미지, 용량이 작음

19. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?

가상선택자는 꾸밈을 위해서 의미없는 태그를 더 추가해야 될 때

  1. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?

웹접근성

  • 1) IR기법(Image Replacement)
    • 웹 표준을 준수하기 위한 가상 대체문자 기법
    • 이미지의 대체 텍스트 제공을 위한 css 기법
    • Phark Method, WA IR, Screen out 기법 등을 주로 사용하여 대체텍스트를 제공
  • Phark Method

의미있는 이미지의 대체 텍스트를 제공하는 경우 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으 로 (-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하 는 방법

.ir_pm {
  display: block;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  }
  • WA IR

의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용

이미지로 대체 할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 보이지 않게 처리 

.ir_wa {
  display: block;
 overflow: hidden;
 position: relative;
 z-index: -1;
 width: 100%;
 height: 100%;
}
  • Screen Out

대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공 할 떄

.ir_so {
  overflow: hidden;
 position: absolute;
 width: 0;
 height: 0;
 line-height: 0;
 text-indent: -9999px;
}

마크업 개발 레벨 테스트 질문

출처 : https://tobyyun.tumblr.com/post/115282929482

1) display:inline 과 display:block의 차이점이 무엇인가요?

display:inline은 텍스트 요소를 말하여 display:block은 박스 영역을 의미합니다.

2) dl,dd가 무엇인가요?

ul, li 는 목록형 태그를 의미하며, dl은 설명형 목록 태그를 의미합니다. dd은 설명형 목록 태그의 목록 요소를 의미합니다. 참고 : http://coderap.tistory.com/1

3) strong과 em의 차이점은 무엇인가요?

strong 태그는 콘텐츠가 중요한 의미를 갖거나 단어를 강하게 강조하고 싶을 때 사용합니다. em 태그는 글씨를 강조하고 싶을 때 사용합니다. 참고 : http://coderap.tistory.com/99

4) float:left를 썼을 경우 영역사라짐(height:0)을 방지하는 방법?

float:left를 쓰게 되면 레이아웃이 깨지는 현상이 발생합니다. 즉 하이트 값이 없어지는거죠~ 다른 말로 한다면 영역이 사라지는 현상입니다. 이 현상을 막기위해서는 여러가지 방법이 있는데 현재는 clearfix 방법을 추천합니다.

  • 깨지는 영역에 똑같이 float을 사용하면 깨짐 현상을 막을 수 있지만 모든 박스 영역에 float이 들어가는 문제점이 있어 잘 사용하지 않습니다.
  • 깨지는 영역에 clear:both를 사용하여 영역깨짐 현상을 막을 수 있지만 레이아웃이 복잡한 곳에서는 어디가 깨지는지 알 수 없어 잘 사용하지 않습니다.
  • 부모요소에 display:inline-block을 사용하면 되지만 성질을 바꾸어야 하기 때문에 제약이 있어 잘 사용하지 않습니다.
  • 부모요소에 overflow: hidden을 사용합니다. 제일 편하게 흔히 사용하는 방법이지만 내가 지정한 영역 외에는 보이지 않기 때문에 못쓰는 경우도 있어 완벽하지는 않습니다.
  • float을 사용한 부모 태그한테 clearfix라는 css를 만들어 사용합니다. 현재는 제일 많이 사용하는 방법이며 아직까진 문제점을 가지고 있지 않지만 css를 만들어줘야 하는 번거로움이 있습니다.

/* clearfix / .clearfix {zoom:1;} .clearfix:before, .clearfix:after {display: block; content: ‘’; line-height: 0;} .clearfix:after {clear: both;}

  1. 컨텐츠 요소를 가운데 오게 하는 방법? 반응형을 작업할 때 어떤 요소를 가운데 오게 하는 방법은 상당히 중요하고 방법도 여러가지가 있습니다.

가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.

  • 부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게)
  • 요소(블록구조) : margin:0 auto; line-height: (height값과 동일하게) 요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다.
  • 부모요소 : display:table;
  • 자식요소 : display:table-cell, text-align:center; vertical-align:middle;

절대 요소를 이용한 가운데 정렬방법이며, 제일 흔하게 쓰이지만 단점은 영역이 없어지는 것이 단점이어서 반응형을 할 때 사용하기 불편한 점이 있습니다.

  • 부모요소 : position:relative;
  • 자식요소 : position:absolute; top:50%; left: 50%; margin-top:-(자식 요소 높이값의 반); margin-left:-(자식 요소 가로값의 반);

만약 자식요소의 가로값과 세로 값을 모르고 유동적인 경우에 절대 요소를 사용하여 가운데로 오는 정렬방법입니다.

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

절대 요소를 이용한 가운데 정렬 방법이지만 흔하게 쓰이지는 않습니다.

  • 부모요소 : position:relative;
  • 자식요소 : position:absolute; top:0; left:0; top:0; right:0; margin: auto;

CSS3를 이용한 방법이지만 최신 브라우저 이외에서는 작동하지 않는 단점이 있지만 표준화 된다면 앞으로 많이 쓰일 방법입니다.

  • 부모요소 : height 값 설정
  • 자식요소 : display: flex; justify-content: center; align-items: center;

  1. ::after와 ::before는 언제 사용하는가? 요소에 가상으로 요소를 줄 때 사용합니다. 즉 마크업의 수정없이 또 다른 요소를 줄 때 많이 사용합니다.

  2. jpg, gif, png의 차이점이 무엇인가요?
    • jpg : 이미지 손실 압축 방식, 24비트(트루컬러) 지원, 투명도 미지원
    • gif : 이미지 비손실 압축 방식, 256 칼라 방식, 투명도 지원(0%,100%만지원), 이미지 컬러가 적게 들어가는 곳에 사용, gif 애니메이션 가능
    • Png-8 : 이미지 비손실 압축 방식, 256 칼라 방식, 투명도 지원(0%,100%만지원)
    • Png-24 : 이미지 비손실 압축 방식, 24비트(트루컬러) 지원(0%~100%지원), 최상의 이지미를 구현 할 때 사용

  3. skip menu를 설정하기 위한 방법? 웹 표준 준수를 위한 메뉴 건너 띄기 기능입니다. 보통 숨겨 놓았다가 탭을 누르면 보일 수 있도록 CSS를 설정합니다. #skip {position: relative; z-index: 9999; } #skip a {position: absolute; left: 0; top: -50px; } #skip a:focus, #skip a:active {top: 0; }

  4. 이미지를 html태그와 Css를 통해 구현 하는 방법의 차이?
    • 의미가 있는 중요한 이미지(이미지가 없으면 내용을 알 수 없는 경우)는 HTML을 통해 이미지를 구현하고 alt를 설정합니다.
    • 의미가 없는 단순한 이미지(이미지가 없어도 내용이랑 상관없는 경우)는 CSS를 통해 이미지를 구현합니다. 이미지를 표현하는 방법은 이렇게 두가지 방법이 있었지만 요즘에는 이미지 스프라이트 기법을 통해 중요한 이미지도 CSS를 통해 이미지를 구현합니다. alt태그 효과는 IR효과로 대처합니다. 참고 : http://darum.daum.net/convention/css/css_ir

  5. CSS 적용 우선순위? CSS속성이 여러개가 겹쳤을 경우 !important > inline style > id > class > style (작업한 스타일.css 에서 속성이 겹치는 경우는 속성이 아래이 있을 수록 우선순위가 높습니다.)

  6. position:relative은 언제 사용하나요?
    • Position: absolute의 기준점이 필요할 때
    • z-index를 사용하고 싶은데 포지션이 없으면 relative를 사용하여 z-index값을 인식시킬 수 있습니다.
    • 요소의 위치를 유지한채로 left, top, right, bottom의 위치 값을 사용하고 싶을 때

  7. 화면상에는 보이지 않으나 스크린 리더에서 읽혀야 하는 요소를 줄 때 하는 방법? 이런걸 ir효과라고 하죠~~ 여러가지 방법들이 있으니 자세한건 링크를 참고하세요 참고 : http://darum.daum.net/convention/css/css_ir

  8. 독타입을 사용하는 이유는? 웹 페이지의 문서 유형을 설정하기 위해서 사용합니다.
    독타입을 설정하지 않거나 잘못 설정하면 브라우저에 따라 화면이 다르게 나오거나 렌더링이 달라지게 때문에 독타입을 설정해야 한다.

UI 개발자 면접 질문

출처 : https://beop07.tistory.com/33

1. Doctype에 대해서 아시는대로 설명하라

  • 안썼을때는 어떻게 되는가?

  • 쿼크모드? 표준모드?

웹 페이지는 HTML과 CSS로 구성된다. 하지만 오래된 웹페이지들은 매우 오래되어서 웹 표준(W3C)에 부합하지 않아서 의도대로 렌더링하지 않는 문제가 있다.
이것을 해결하기 위해 렌더링 모드가 생김

!DOCTYPE html은 HTML5에서 권장하는, 가장 간단한 방식이다.
이전 버전의 HTML 표준들은 다른 방식들을 권장하지만, 오늘날 현존하는 모든 브라우저들은 이 DOCTYPE은 완전 표준 모드로 렌더링할 것이다.

브라우저가 출력하고자 하는 문서가 최신이라고 판단하면 표준모드로 랜더링, 예전 문서라고 판단하면 호환모드로 렌더링한다.

  • 그럼 브라우저는 무엇을 보고 모드를 결정하나? 웹 브라우저는 HTML페이지를 호환 모드나 표준 모드 중 무엇으로 랜더링할지 결정할 때, 문서 첫부분의 DOCTYPE을 참조한다.
    웹 페이지를 표준모드로 렌더링하려고 한다면 페이지 첫부분에 DOCTYPE을 기술해야한다. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <title>Hello World!</title>
  </head>
  <body>
  </body>
</html>

1-1. 표준모드

html 상단에 DOCTYPE 선언을 하면 표준모드로 선언된다.

1-2. 쿼크모드(호환모드)

html 상단에 DOCTYPE 선언이 없으면 호환모드로 선언된다.

  1. 웹표준은 무엇이며 웹접근성은 무엇인가?

2-1. 웹 표준

  • 정의
    W3C가 지정한 표준안을 지켜 웹 사이트를 제작
  • 목적
    어떤 운영체제나 웹브라우저에서도 비교적 동일한 디자인과 기능을 구현하는 것
  • 기술
    • 구조(HTML)
    • 표현(CSS)
    • 동작(ECMAScript)
  • 장점
    • 수정 및 운영관리가 용이, 웹 접근성 향상, 검색엔진 최적화(SEO), 다양한 장치에서의 호환
  • 조건
    • W3C 권장 표준 DTD 사용
    • HTML 문법 오류가 페이지 별 평균 99개 이하
    • 논리적이고 의미에 맞는 HTML 마크업 및 CSS 레이아웃 사용
    • 다양한 브라우저에서 키보드만으로 대부분의 콘텐츠를 탐색, 조작할 수 있음
    • 최신 버전의 디바이스, 브라우저에서도 콘텐츠 호환성 유지
    • 부가 애플리케이션(ActiveX, Flash 등)이 존재하더라도 핵심 기능의 사용에 지장이 없음

2-2. 웹 접근성

  • 정의
    • 전문적인 능력 없이도 웹사이트에서 제공하는 모든 정보에 접근하고 이용할 수 있도록 보장
    • 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다.
  • 4대원칙
    • 인식의 용이성
      • : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다
    • 운용의 용이성
      • : 사용자 인터페이스 구성요소는 조작 가능하고 네비게이션 할 수 있어야 한다
    • 이해의 용이성
      • : 콘텐츠는 이해할 수 있어야 한다
    • 견고성
      • : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다
  1. 시멘틱태그는 무엇이며 왜 사용하는가?

시멘틱태그는 div와 마찬가지로 block element이면서 사이트의 구조(레이아웃)을 설계하기 위한 태그.
html의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 사이트 구조 파악하기 용이할 수 있도록 도와주기 위해 만들어졌다.

장점

  • SEO 최적화에 유리(Search Engine Optimization) 검색 엔진이 태그의 목적에 부합하게 설계된 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해준다.
  • 웹 접근성에 효율적 일반적 브라우저에서는 차이가 없지만, 스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서 웹 접근성과 사용성을 향상시킨다
  • 유지보수의 용이성 많은 div의 사용으로 관리가 어려워지는 문제점에서 벗어나, 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하며,
    해당 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이
  1. UI가 무엇인가?

  • Interface란?

  • API란?

  1. float를 clear하는 방법 대표적으로 2가지만 말해달라.
  • 각각의 장단점은?
  1. 각종 태그 문제

  • ul, ol의 차이는?

  • dl dt dd는?

  • strong, em, b 차이는?

  • figure태그 설명?

  1. CSS 전처리기란?
  • sass, scss, portcss, less 등 사용경험은?

  1. MDN 사이트를 아는가?

  2. Button태그의 Default type은?

button 태그의 기본 type은 submit이다.
(form 태그 안에 form data와 관련 없는 버튼을 만들어서 누르면 form이 submit되는 실수)

button 태그의 type 속성

  • submit (폼을 제출하는 이벤트 발생)
  • reset (폼 안에 작성한 내용을 초기화)

  • button (그 자체로 아무 이벤트 없고, click 이벤트와 연결시켜서 자바스크립트를 활용하는 방법을 많이 사용어플)

  • 과 차이점은?

button 태그는 스스로 닫지 않고, input 태그는 스스로 닫는다.
button은 하위 태그를 추가 가능.
button 사용 시에는 img 태그 삽입 가능하지만,
input에는 못넣고 css로 background-image로 처리해야험

  1. 문장에 취소선을 넣고싶을때 어떤 태그를 사용하는가?

취소선은 del 태그

  • 밑줄 넣는 태그는?
    u 태그

  1. section 태그와 article 태그의 차이점을 설명해달라

  2. cdn이란?

cdn이란?

(Content Delivery Network)의 약자로, 지리적 제약없이 전 세계 사용자에게 빠르고 안전하게 컨텐츠 전송을 할 수 있는 기술을 말한다.
이를 통해 컨텐츠의 병목현상을 피할 수 있다.
CDN 방식은 물리적으로 떨어져있는 사용자에게 컨텐츠를 더 빠르게 제공하기 위해 고안된 기술이다.
우리나라에 있는 사람이 미국에 있는 서버로부터 파일을 다운받으려고 하면 시간이 오래 걸릴 것이다.

따라서 서버를 분산시켜 캐싱해두고,
사용자의 컨텐츠 요청이 들어오면 사용자와 가장 가까운 위치에 존재하는 서버로 매핑시켜
요청된 콘텐츠의 캐싱된 내용을 내어주는 방식으로 빠르게 데이터를 전송할 수 있게 된다.

활용사례
온라인 게임의 오픈 베타테스트나 정식 서비스 시작시점에 클라이언트의 다운로드 수요가 급격히 증가한다.
이럴 경우 병목 현상이 일어나거나 심할 경우 서버가 다운되기도 하기 때문에, CDN이 필수적으로 사용된다.
또한 대규모 업데이트를 위한 패치가 있을 경우에도 병목 현상을 막기 위해 사용한다.

넷플릭스는 지연없이 안정적이고 빠르게 컨텐츠를 제공하기 위해 CDN을 사용한다.

  • cdn방식이 빠른가? 직접로드가 빠른가? 혹은 케바케?
  1. 가상요소와 가상클래스에 대해서 설명해달라

가상 클래스 (싱글 콜론 : 한개 사용)

  • 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 class를 주고 css로 제어하는 기능
  • 별도의 class 지정 없이 해당 요소에게 css 속성을 부여할 수 있다
  • 예) :link / :hover / :first-child / :nth-child(n) / :checked 등

가상 요소 (더블 콜론 :: 두개 사용 권장)

  • 실제로 존재하지 않는 가상으로 요소(엘리먼트)를 만들어 스타일을 주는 기능
  • 해당 요소에게 내용(content)와 css 속성을 부여할 수 있다(content:’hello’)

  • 예) ::before / ::after / ::first-line / ::first-letter 등

  • 가상요소 : 한개와 :: 두개의 차이는?
  1. css 적용 우선순위를 말해달라

!important » inline style » id » class » tag(요소)
이 순서에 따라 우선순위를 자연수 1000자리 숫자에 비유해서 설명하는 게 명시도.

  • inline style 1000(천의 자리)
  • id 100(백의 자리)
  • class 10(십의 자리)
  • tag 1(일의 자리)
  1. 바닐라JS란?

플러그인과 라이브러리를 사용하지 않은 순수한 java script를 말한다.

  • 장점, 단점, 사용경험

SPA와 React 완벽정리

기존에 서버는 모든 html을 전달해서 화면에 보여줬다. 그러다보니 페이지를 이동할 대마다 새로운 html을 받아오고 리소스를 전달받아 해석하여 화면에 보여줬다. 하지만 요즘 웹애서 제공되는 정보가 정말 많기에, 새로운 화면을 보여줘야할 때마다 서버측에 모든 뷰를 준비하면 성능상 문제가 발생할 수 있다.

예를 들어, 사용자가 몰릴 경우 트래픽이 너무 많이 나와 서버에 부하가 쉽게 걸릴 수 있다.

1. SSR(서버사이드 렌더링)과 CSR(클라이언트사이드 렌더링)

웹 문서는 브라우저에 표시되어야 할 정보들을 담고 있다.
이 정보들은 브라우저가 해석할 수 있는 프로그래밍 언어로 되어 있으며, 서비스를 제공하는 회사 혹은 개인의 서버에 저장되어 있다.
사용자(client)는 url을 통해 그 정보를 요청하게 되고, 그 요청을 받은 서버는 웹 문서를 사용자 브라우저에 전달해주게 된다.
그리고 나서 브라우저가 사용자가 보기 편하게 표시하는 과정을 렌더링(Rendering)이라고 한다.

1-1. SSR(Server Side Rendering)

브라우저가 html 파일을 먼저 다운받는다.
그 다음 java script 파일도 다운받는다.
java script 파일을 다운받는 동안에 이미 html 파일의 렌더링을 시작해서 웹페이지 표시가 빠르다.
(그러나 컴퓨터 속도가 느리다면 처음 js가 다 다운받아지지 않아서 기능이 동작하지 않을 수 있다)

  • 사용자가 네비게이션의 링크를 클릭하여 페이지를 이동했을 때?
    • 해당 페이지의 html 파일을 다운받고,
    • 이어서 java script 파일을 다운 받는 일련의 과정이 반복된다.
  • 장점
    • 렌더링이 빠르다
  • 단점
    • 페이지를 이동할 때마다 화면 깜빡임(화면 로드될 때마다 백지로 변하고 다시 화면이 출력되는 과정)이 있다

=> 웹페이지 용량이 가벼울 경우 문제 없으나 무거워질 경우에는 화면 깜빡임이 길어져 사용자 경험이 나빠질 수 있다.

1-2. CSR(Client Side Rendering)

맨 처음 url 요청에 웹문서가 가지고 있는 모든 정보, 링크페이지까지도 한번에 다 받아온다.
그래서 초기 화면 로드가 느리다.
그러나 일단 로드가 되면 사이트 내에서 페이지를 이동할 때 로드되는 과정이 없으지므로, 사용성이 좋아진다.
(페이스북 같은 대형 플랫폼에서 페이지를 이동해도 화면 깜빡임이 없는 이유가 바로 이것. 그래서 초기 로딩이 될 때 loading 화면을 띄운다)

  • 장점
    • 페이지 이동 시 화면깜빡임이 없다
  • 단점
    • 초기 화면 로드가 느리다
    • **SEO(검색엔진최적화)**가 나쁘다

=> 링크 이동을 할 때 자바스크립트를 이용해 동적으로 화면을 바꿔주므로,
html 문서가 가지고있는 정보가 적어 검색엔진들이 웹사이트를 분석해 내용을 파악하고 검색 시에 뿌려주어야 할 때 제대로 걸러지지 못해서 검색엔진 최적화가 나쁘다.

2. SPA(Single page Application)

과거 웹사이트는 현재처럼 유저 인터렉션이 많은 페이지가 없었고, 페이지의 용량도 가벼웠다.
현재에는 실시간으로 많은 유저의 인터렉션이 일어나는 페이스북, 인스타그램, 유튜브 등의 서비스들이 생기며 화면 깜빡임 없이 부드럽게 동작하는 동적인 웹사이트의 개발이 필요하게 됨.

=> 이 문제를 해결하기 위해 생겨난 많은 프레임워크들 중 React가 가장 성공적으로 자리를 잡았다.
React는 CSR(Client Side Rendering) 방식을채택하고 SPA(Single Page Application) 의 구축을 가능하게 해준다.
초반에 표시되는 index.html 파일 외에 html 문서는 없고,
index.html 파일의 내용을 자바스크립트를 이용해 재렌더링 해주는 방식으로 페이지를 구성한다.
그래서 페이지 별로 파일을 구성하지 않고, 표시해야할 내용을 각각의 컴포넌트 형식으로 구성하는 것이다!

동적으로 DOM을 구성하여 렌더링 되는 화면이 바뀌게 한다 => 이것이 바로 CSR

(대부분의 SPA는 클라이언트 사이드에서 렌더링을 진행한다.)

  • SPA 서버로부터 처음에만 페이지를 받아오고 이후에는 동적으로 DOM을 구성하여 렌더링 되는 화면이 바뀌게 한다.

  • MPA 반대로 MPA는 동적이지 않은 페이지를 상황에 맞게 클라이언트에 뿌려주기 때문에 SSR 방식을 채택한 것

Virtual DOM

DOM(Document Object Model)은 html 문서 내의 요소를 말한다.
html, css, javascript로 만들었던 웹사이트에서는 querySelector나 getElementbyID 등으로 직접 DOM요소를 찾아 조작한다.

그런데 이렇게 직접 요소를 조작하면?
페이지 내에 정보가 변할 때마다 다시 페이지를 로드해야해서 페이지 용량이 클 수록 느려지는 단점이 있다.

=> CSR 방식으로 한번에 모든 정보를 받고, Virtual DOM을 이용해 변한 부분만 감지해서 그 부분만 변경해주면 훨씬 부담을 줄일 수 있다!
페이지 내의 정보가 변해도 전체 새로고침을 하지 않고, 변화된 부분만 재 렌더링을 해준다.
(SPA는 처음에만 페이지를 받아오고 이후에는 받아오지 않는데 이럼에도 데이터가 수정되고 조회되게 하고 싶어서 CSR이란 “방식”을 채택한 것)

CSR 방식으로

  1. JQuery란?
  • 장점, 단점, 개인적인 생각

라이브러리, 프레임워크, 플러그인

1. 라이브러리

소프트웨어 개발에 사용되는 프로그램의 구성요소들 중에서 공통으로 사용될 수 있는 특정 기능들을 모듈화한 것.
자주 사용하는 기능을 모아두었다가 필요할 때 가져다 쓸 수 있도록 해 놓은 묶음.
그 기능을 사용하기 위해 언제든 필요한 곳에서 호출하여 사용할 수 있도록 class나 function으로 만들어짐.

예) java script의 라이브러리 : jQuery

2. 프레임워크

프로그램의 기본 구조(뼈대)
코드의 품질, 필수적 코드, 알고리즘, 데이터베이스 연동 같은 기능을 어느정도 갖춘 뼈대를 제공하도록 만들어진 것이 프레임워크.
원하는 기능 구현에 집중해 빠른 개발을 할 수 있도록, 기본적인 기능을 갖추고 있고 라이브러리도 포함되어 있다.
프레임워크만으로는 프로그램이 실행되지 않고 기능을 추가해야하며, 프레임워크가 정의한 규칙을 준수해야한다.

예) java script의 프레임워크 : angular, react
css의 프레임워크 : bootstrap

3. 플러그인(Plugin)

사람들이 자주 사용할 만한 기능을 직접 하나하나 구현할 필요없이 필요한 기능만 찾아서 사용할 수 있도록 만들어 둔 것이 플러그인이다.

이 플러그인의 집합이 라이브러리라고 할 수 있다.

예) jQuery의 플러그인 : datepicker, modal, bxslider

<!– + 무엇을 사용해보았나?

  • 장점, 단점 –>
  1. 크로스브라우징이란?

웹페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 나오게 하는 작업
브라우저 마다 렌더링 엔진이 다르기 때문에, 전부 적용되게끔 설정해야한다.

렌더링 엔진이란?
렌더링 엔진이란 페이지를 렌더할 때에 실질적으로 페이지를 작업해주는 브라우저의 엔진들을 의미한다

어떻게 대응해야하는가?

일단 점유율이 가장 높은 브라우저를 포커싱하는 것이 중요하다.
펄어비스처럼 IE용 주석을 이용하는 방법이 있다.
<!– [if IE 7]>

<![endif]–>

  • 경험을 말해달라
  1. CSS 스트라이프란?
  • 장점은? 단점은?

  1. script를 로드할때 defer, async는 각각 무엇을 나타내는가?

  2. AJAX란?

  • 사용 경험

  • 비동기 통신이란?

  1. 슬라이드를 직접 구현할 수 있는가?

  2. 제이쿼리의 attr(), prop()의 차이는?

  • http://www.devkuma.com/books/pages/227

    좋은 설명글 참고

  1. 체크박스의 네모버튼을 커스텀으로 수정하고싶다 어떻게 하는가?

  2. 제이쿼리 선택자중 형제노드를 탐색하고 싶다 어떻게 하는가?

  • 부모선택자는? 자식선택자는?

  1. 제이쿼리 선택된 요소의 위치를 알고 싶다 어떻게 하는가?

  2. 제이쿼리 e.preventDefault()란?

  3. 전파방지란?

  4. css keyframe을 사용하여 위아래로 움직이는 도형을 만들수 있는가?

  5. css로 세모는 어떻게 만드는가?

  6. 자바스크립트에서 호이스팅이라고 들어보았는가?(프론트영역)

  7. 자바스크립트 ES6에서 많은 변화가 일어났는데 대표적으로 3가지만 말해달라

  • 1) 화살표 함수
    • 익명함수로만 만들 수 있다
    • this가 없다
    • new 연산자와 함께 호출할 수 없다
      • this가 없기 때문에 생성자 함수로 사용할 수 없다
    • argument가 없다
    • 모든 인수에 접근할 수 있게 해주는 유사 배열 객체 arguments를 지원하지 않는다
    • super가 없다

    1-1) 함수 선언 방식이 어떻게 달라졌나?

    • ES5에서는 객체 내에 있는 메서드를 실행하면 메서드의 this: 메서드가 선언된 해당 객체
      객체 내에 있는 함수의 this: window를 바라보기 때문에 window
      이런 경우, this를 바인딩 시키거나 this를 해당 변수에 담아 사용할 수 있었다.
    • ES6에서는 this는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요없이 사용 가능.

    중요!⭐️
    일반함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 게 ❌
    함수 호출할 때 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정
    화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
    (화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다)

  • 2) 템플릿 리터럴 `` 백틱과 ${}를 통해 한줄로 표기 가능하고, single quotation과 double 모두 자유롭게 사용 가능.

  • 3) 객체 리터럴 객체의 속성을 작성할 때 변수명과 동일할 경우 생략 가능.
    객체 생성 시, 변수 값을 객체의 속성을 지정하는 경우 속성 값을 생략하여 표기 가능

  • 4) 클래스 ES6부터 공식적으로 클래스를 지원

  • 5) 컬렉션
    • Set객체 : 중복을 제거한 값들의 집합
    • Map객체 : 키-값 쌍의 집합체이며, 키는 고유한 값이어야한다. Iteration 기반으로 만들어졌다. (키 순서가 보장된다)
    • WeakSet
    • WeakMap

  • 6) 모듈(ESM)

  • 7) Promise 이전까지는 AJAX 처리를 위한 비동기 작업을 수행할 때,
    비동기 처리가 완료되면 콜백함수가 호출되도록 작성했지만 비동기 처리가 필요한 작업이 많다면 콜백이 중첩되어 콜백헬을 만들어버림. 예외처리가 어려워진다.
    ES6부터 Promise 객체를 지원해 비동기 처리를 보다 깔끔하게 수행할 수 있다.

  • 8) Spread Operator(전개 연산자)

  • 9) let & const

  • 10) 구조분해할당

만약 es6 이상의 버전을 브라우저에서 인식하지 못한다면?

es6 이상의 JS 버전은 브라우저별로 지원이 상이하다.
그렇기 때문에 트랜스파일러인 바벨을 사용해서 ES6 => ES5로 변환해준다.

요약

ES6에서 바뀐 문법

  • const & let (var과 다르게 block scope를 갖는 점)
  • 비동기 처리를 위한 Promise
  • 모듈(ESM) 지원으로 import와 export를통해 내보내기 및 가져오기 가능
  • 컬렉션 (Map과 Set객체)
  • Destructuring(구조분해할당)
  • 화살표 함수
  • Spread Operator 등

  1. 국내에선 아직 최신 브라우저를 사용하지 않아 ES6에 대해 완벽한 지원이 안되고있다 어떻게하면 좋을까?

  2. css flex에 대해 설명하라

  3. 반응형웹이란? 적응형웹이란?

  • 반응형에서 중요한건 무엇이라 생각하는가?
  1. meta태그는 무엇인가?

  • 오픈그래프란(og)?

  • 모바일에서 손가락으로 확대하는것을 2배까지만 제한하고 싶다 어떻게하는가?

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no"/>

이코드를


 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2"/>

이렇게 변경하면 됨.

  1. 팝업창을 구현해달라고 의뢰 받았다. 대략적으로 어떤 방식으로 구현이 되는지 말로 설명해달라.

  2. 현재 국내 브라우저 점유율이 어떤지 파악하고 있는가? (웹에 대한 관심도를 보기위함 https://gs.statcounter.com/ 한국을 참고.)

  3. 협업에 대한 경험은?

  • git을 써보았나?
  1. 퍼블리싱 스터디는 어떻게하는가?
  • 보고있는 개발 유튜브 있는가?

  1. 최종 목표가 무엇인가?

  2. 마지막질문/어필

(장황하게 말고 핵심 내용을 정리해서 자신있게 어필하길바람.)

게임에서의 UI

게임에서는 주로 게임장르별로 보편적인 UI 스타일이 존재하는데요.
이를테면 파티 목록이나 캐릭터의 스테이터스는 왼쪽 위 채팅 창은 왼쪽 아래, 스킬이나 아이템 슬롯, 또 각종 메뉴 아이콘은 중앙 하단, 퀘스트는 오른쪽 상단에 놓는 등의 ‘디폴트’ 배치가 그렇습니다.

게임에서의 UX

UX는 UI를 통해 생성되는 사용자의 경험입니다.
주로 사용하는 사람들의 경험을 분석하여 더 편하게 만들거나 원활하게 작동하게끔 하는 것이지요.
특정한 조작이나 단축키로 기능을 쉽게 이용할 수 있게 하거나,
슥 보고 색깔만으로도 피아 식별을 가능하게 만들거나,
‘체력은 빨강, 마력은 파랑’ 같은 구분을 넣거나,
미니맵이나 캐릭터 이름 같은 부분에서 아군과 적군을 색으로 구분해서 표시하게 하는 등의 기능적인 도입이 UX에 해당합니다.

게임 UI는 사용성 높은 UX를 추구함과 동시에 유저에게 동적인 인터렉션에서 오는 재미 또한 선사해줘야한다.

그래서 다른 분야 UI보다 에셋의 그래픽 소스(사진, 텍스쳐, 이펙트 등) 사용률이 높고, 게임 전체의 아트적인 콘셉트도 고려해야 합니다.

시안 제작은 뭘 만드냐가 다른거지, 웹과 앱(과거 포토샵을 쓸때의)의 시안제작과 큰 차이를 없는 것 같습니다. 실제로 스포츠, fps장르에선 웹페이지와 유사한 디자인을 많이 사용합니다.

프론트

테스트

  • 단위테스트 각 모듈을 단독 실행 환경에서 독립적으로 테스트하는 것을 말한다. 유틸함수를 검증할 수도 있고, 리엑트에서 렌더링 테스트를 할 수도 있고, ui 테스트를 할 수도 있고, 이전과 다음을 비교하는 스냅샷 테스트를 할 수도 있따.
  • 통합테스트 두 개 이상의 모듈이 실제로 연결된 상태를 테스트하는 것을 말한다. 단위 테스트만으로는 부족한 경우를 채워줄 수 있다

  • E2E 테스트 실제 사용자의 입장 및 환경에서 테스트하는 것을 말한다. 프론트엔드에서 E2E 테스트는 실제 브라우저를 실행해서 테스트하는 것을 말한다.

  • jest, react-testing-library

프로세스는 프로세서로부터 자원을 할당 받아 하나의 작업을하는 단위입니다. 쓰레드는 프로세스에서 스텍영역과 자원을 할당받아 작업을하는 단위입니다. 오버로딩과 오버라이드는 다형성을 구현하는 방법입니다. 오버라이드는 하위 클래스에서 부모클래스의 함수를 별도의 기능으로 구현하는 방법입니다. 오버로딩은 같은타입,함수명 다른 파라미터로 함수를 구

회사만의 ide를 사용해 코딩테스트와 함께 기본 cs를 묻는 필기 시험과 같이 진행됨. 문제 유출이다보니 섞어서 몇가지 추스려 얘기해주겠음.

1) 가상함수테이블과 virtual에 대해 설명하시오. 2) 상속과 오버라이딩에 대해 설명하시오. 3) 스마트포인터와 RAII에 대해 설명하시오. 4) 스택과 힙 메모리의 차이점에 대해 서술하시오. 5) 동적할당에 대해 서술하시오. 기타 등등 10문항이였던걸로 기억함

코딩테스트는

  1. 구현
  2. 시뮬레이션
  3. 백트래킹
  4. 우선순위 큐