웹디자인 or 웹퍼블리싱 면접용 질문 답변

안녕하세요 찐망고입니다.

해야할 컨텐츠가 산더미인데 일단 이번에 종강하여 면접보는 친구들을 위해 포스팅을 해볼게요.

 

면접을 보다보면 회사마다 분위기는 다르겠지만

일반적으로 물어보는 질문들이 있습니다.

테스트를 하는 회사도 존재하구여.

포트폴리오 자체를 100% 믿지 않는다는 거죠 ㅎㅎ 

 

물론 질문을 하지 않아도 알고 있어야 하는 내용들도 존재하구요.

오늘은 그런 부분과 관련된 포스팅을 해볼게요.

 

 

이론적인 질문들

 

1. 웹표준과 웹접근성에 대해 설명해봐라

•  웹표준은 크로스브라우징에 맞춰 W3C 등의 표준화 기구에서 정의 해준 명세에 맞게 마크업 하는 것
•  웹접근성은 이용자, 이용자의 장비에 관계없이 이용할 수 있는 웹 사이트를 구성하는 것. 
  시각장애인 등도 이용 할 수 있으며, 여러 PC나 장비에서도 접근 할 수 있는 웹 사이트를 뜻합니다.

일반적으로 웹 표준은 크로스 브라우징의 상위 단계이고, 웹 접근성은 웹 표준의 상위 단계이지만,

웹 표준을 맞춘다고 해서 크로스 브라우징이 해결되는 것은 아니며, 웹 접근성은 지켰지만

웹 표준과 크로스 브라우징이 해결되는 것은 아닙니다. 

 

 

2. 웹표준을 준수하기 위한 방법

•  HTML과 CSS를 분리하여 HTML은 구조를, CSS를 레이아웃과 디자인요소로 작업할 것.
• 시멘틱요소를 사용하고,  대체 텍스트를 사용할 것  <button><span>메뉴버튼</span></button>

 

3. 크로스 브라우징이란

• 한 개의 브라우저가 아닌 여러 브라우저에서 동등한 정보를 보여주는 것.

 

4. 시멘틱 마크업이란?

• 의미를 잘 전달하도록 문서 작성을 하는 것을 의미
• 웹사이트에 들어가는 요소들을 구조적으로 분리해서 분리된 각각의 요소를 의미가 있는 요소들로 사용하는 것
• <header><section><article><nav><aside><figure><figcaption><footer>...
• 시멘틱요소는 제목요소가 필수인데 (footer제외) h1요소는 전체페이지에서 한번만 사용할 수 있음
  

 

5. jQuery와 바닐라JS를 설명해주세요

• jQuery는 자바스크립트에서 제공하는 라이브러리 중 하나로 자바스크립트에 요소 선택이 직관적이고, 
  그 요소를 단순한 방법으로 제어할 수 있는 다양한 수단을 제공하는 언어
• 바닐라js는 순수한 자바스크립트를 의미, 외부 라이브러리나 프레임 워크를 쓰지 않는 상태를 뜻함.

 

6. 반응형 웹사이트와 적응형 웹사이트의 차이

• 반응형웹사이트는 하나의 사이트가 다양한  디바이스의 해상도에 맞춰 사이트의 레이아웃이 변하는 기법
  사이트 주소가 하나이다.
  
• 적응형웹사이트는 pc형태를 지원하는 사이트와 모바일기기를 지원하는 사이트로 나눠지는데
  레이아웃이 복잡하거나, 앱이 따로 있는 경우 사용한다
  사이트 주소가 두개이다.

 

7. 반응형 디자인의 3가지 기법

• width, padding, margin을 가변성있게 제작 (%, calc(), vw, vh이용)
• flex, grid 사용
• 미디어 쿼리 사용

 

8. 웹 폰트와 폰트의 차이점

• 폰트 - 시스템 폰트는 컴퓨터에 설치되어 있는 기본 폰트
• 웹폰트 - 제작자가 의도한 폰트를 방문자 화면에 그대로 출력하기 위해 해당 웹페이지 접속시 내려받아 설치하는 폰트

 

9. Sprite image란?

• 여러개의 이미지를 하나의 이미지로 합쳐서 관리하는 것
• 모바일 환경과 같이 한장된 자원을 사용하는 플랫폼에서 웹페이지의 로딩시간을 단축해주는 효과가 있음
  

 

10. SVG란?

• W3C가 개발, 2차원 백터그래픽의 표현을 위한 xml마크업언어
• 백터이미지의 공통적 특징을 가지고 있고 용량도 기존의 png와 gif보다 작다.
• 아이콘, 로고, 상표같은 마크, 만화 같은 플랫한 그림 도표 차트 다이어그램같은 데이터, 지도, 약도같은 인포그래픽등이 적합

 

11. Doctype을 사용하는 이유

• HTML은 버전별로 지원하는 요소가 조금씩 다르므로 현재 웹 브라우저에게 지금 사용하고 있는 HTML문서가 어떤 버전으로 작성되어있는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 지원.
  

 

 

 

 

 

기술적인 질문들

 

1. 화면상에는 보이지 않으나 스크린 리더에서 읽혀야 하는 요소를 줄 때 하는 방법?

• reset문서에 class=“hidden” 참조
  

.hidden {
	overflow: hidden;
	display: inline-block;
	position: absolute;
	z-index: -1;
	border: 0;
	width: 1px;
	height: 1px;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

 

 

2. 이미지를 HTML요소와 CSS로 적용하는 방법

• HTML요소 사용

<picture>
    <source media="(min-width: 700px)" srcset="경로/960.jpg">
    <source media="(min-width: 400px)" srcset="경로/575.jpg">
    <img src="경로/200.jpg" alt="대체텍스트">
</picture>

<figure>
	<img src="경로" alt="대체텍스트">
    <figcaption>이미지캡션</figcaption>
</figure>

<img src="경로" alt="대체텍스트">

• CSS 사용

.img {
	background: url(경로) no-repeat left top / 100%;
}

 

 

3. skip menu를 설정하기 위한 방법? (본문바로가기같은..)

• body 바로 밑에 a태그를 지정, id값 불러오기

<a href="#content"><span>본문바로가기</span></a>
<div id="content">본문내용</div>

 

 

4. ::after와 ::before의 사용방법과 차이점

• ::before – 실제 내용 바로 앞에서 생성되는 자식요소 / ::after – 실제 내용 바로 뒤에서 생성되는 자식요소
• gnb구분 bar를 넣거나, float를 해제할 때 사용한다.
• xeicon같은 백터아이콘을 넣을 떄 사용
• 요소에 지정하기 애매한 이미지등을 만들 때 사용

 

5. 컨텐츠 요소를 가운데 오게 하는 방법?

• width값이 있는 경우 position을 지정 한 후 left: 50%한 후 margin-left: -width/2
• width값이 없는 경우 left: 50% 후 transform: translate(-50%,-50%);
• display: flex에서 justify-content와 align-items를 사용
• 부모요소에 display: table 해당요소에 display: table-cell; vertical-align: middle;
• 블록요소는 margin: 0 auto; 인라인요소는 블록요소에 text-align: center; line-height: height값 (위아래 정렬)

 

 

6. position: relative 은 언제 사용?

• z-index값을 지정해야 하는 경우
• position: absolute 사용시 기준이 될 부모요소에게 지정

 

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

• 부모요소에 clearfix처리를 한다.

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

 

 

8. display: inline-block을 사용할 경우 요소 사이의 여백 없애는 해결법

• float: left를 같이 적용 후 부모요소에게 overflow: hidden적용

 

9. display: inline과 display: block의 차이점은 무엇?

• 블록요소는 웹페이지에 한 줄로 꽉 차게 들어간다. (텍스트길이와 상관없이), 줄바꿈이 일어남
• width와 height,  margin과 padding을 각각 지정할 수 있고 블록요소 안에 인라인요소를 넣을 수 있다.
• 인라인 요소는 요소에 들어가 있는 영역만큼 공간을 가진다.
• width와 height를 지정할 수 없고 padding이나 margin도 위아래는 적용이 불가, 상하 여백은 line-height을 사용한다
• 인라인요소안에 블록요소를 넣을 수 없다
• 시멘틱요소와 a요소는 블록요소와 인라인요소를 모두 넣을 수 있다. 

 

10. 높이값 100%맞추기

• 해당요소기준으로 모든 부모요소에게 100%적용시키기 (html, body포함)
• 100vh적용 (ios - 100dvh사용)
• absolute나 fixed적용 후 top: 0; bottom: 0 적용

 

11. css적용 우선 순위

1. 속성 값 뒤에 !important 를 붙인 속성
2. HTML에서 style을 직접 지정한 속성
3. #id 로 지정한 속성
4. 클래스, 추상클래스 로 지정한 속성
5. 태그이름 으로 지정한 속성
6. 상위 객체에 의해 상속된 속성

같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선

 

 

12. css속성 우선순서
 
 모질라에서 제안한 CSS속성 기술순서

1. display
2. position
3. float
4. clear 
5. width / height
6. padding / margin
7. border / background
8. color / font
9. text-decoration
10. text-align / vertical-align / line-height
11. white-space
12. other text
13. content

 NAVER CSS속성 기술순서

1. display(표시)
2. overflow(넘침)
3. float(흐름)
4. position(위치)
5. width/height(크기)
6. padding/margin(간격)
7. border(테두리)
8. background(배경)
9. color/font(글꼴)
10. animation
11. 기타