zuryeong의 개발 블로그

1. SVG란

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.

2. SVG  vs  PNG

3. SVG 태그

<svg width="가로영역" height="세로영역">
	SVG그래픽
    ...
</svg>

SVG는 컨테이너로 묶음을 의미한다. 내부에 그래픽을 담기 위한 그릇과 같은 태그다. 

4. 모양 요소의 종류

SVG에는 개발자가 사용할 수 있는 몇 가지 요소가 미리 지정되어 있다.

   1) 사각형 : <rect>

   2) 원 : <circle>

<svg
  version="1.1"
  baseProfile="full"
  width="300"
  height="200"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

   3) 타원 : <ellipse>

   4) 선 : <line>

   5) 다각선 : <polyline>

   6) 다각형 : <polygon>

   7) 패스 : <path>

5. 장점

   1) 웹사이트 로딩 속도가 빠르다
SVG는 XML코드이기 때문에 파일의 크기가 작다. 사용 사례에 따라서 SVG는 60%에서 80%정도의 대역폭을 절감한다고 한다. SVG는 HTML파일에 작성이 될 수 있기때문에 외부 이미지를 가져오기 위해서 HTTP request를 할 필요가 없다.

   2) 어떤 크기에서든 재활용이 가능 (Future Proof) 
SVG는 크기에 따라 이미지가 왜곡되거나 품질이 떨어져 보이지 않는다. 그렇기 때문에 하드웨어 해상도가 높은 디바이스에서도 품질 저하없이 볼 수 있다.

   3) SEO 친화적이다
XML코드에는 키워드, 설명, 링크 등이 포함될 수 있다. 그래서 해당 콘텐츠를 검색 엔진에서 더 쉽게 인실할 수 있도록 할 수 있다.

   4) 개발 효율 증대 효과
디자이너가 Figma, Sketch 등에서 디자인한 작업물들을 SVG로 내보내거나, 직접 개발자가 SVG로 다운받을 수도 있어 번거로운 작업을 줄일 수 있다.

5) CSS로 디자인 수정이 가능하다
개발자는 SVG파일을 코드로 직접 변경할 수 있기때문에 디자이너에게 재요청 및 기다릴 필요가 없어지고 디자이너는 이미지를 수정할 필요가 없다.

6. 단점

   1) 너무 복잡한 SVG는 비효율적일 수 있다
많은 모양, 색상, 그라디언트를 포함하여서 파일 크기가 JPG나 PNG 보다 커지는 경우가 종종 있기 때문에 단점이 될 수 있다.

   2) 최적화
다양한 편집툴에서 내보내진 SVG 파일에는 중복되고 쓸모없는 정보가 많이 포함되어 있다. 예를 들어, 편집기의 메타 데이터, 주석, 숨겨진 요소가 있다. 최적화 되지 않은 경우에는 PNG보다 파일 크기가 커질 수 있기때문에 최적화를 할 수 있는 도구의 도움을 받는 것이 좋을 수 있다.

1. display

1-1 block

1-2 inline

1-3 inline-block

1-4 none

2. position에 대해 설명하라

2-1 static

2-2 relative

2-3 fixed

2-4 absolute

3. float가 어떻게 작동하는가

4. flexbox나 grid 스펙을 사용해본적이 있나

4-1 flexbox를 사용하는 이유가 무엇인가

4-2 grid를 사용하는 이유가 무엇인가

5. 이미지 태그를 스타일로 대처하는 법

6. 반응형 웹의 3요소

7. css selector가 어떠한 원리로 동작하나

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

9. px, em에 대해 설명하라

9-1 절대단위

9-2 상대단위

9-3 px

9-4 em

9-5 ex

9-6 %

9-7 pt

10. cs 적용 우선순위

11. css-in-js에 대해서 설명하라

12. css 전처리기(css preprocessors)를 사용해본적 있는가

12-1 사용해봤다면 장점과 단점

13. padding과 margin의 차이가 무엇인가

13-1 dadding에 대하여

13-2 margin에 대하여

1. DOCTYPE

1-1 DOCTYPE에 대해 설명하시오

1-2 meta 태그에 대해 알고있는가

1-3 meta 태그의 요소에 대해서 아는대로 말하라

2. 웹 표준 및 웹 접근성

2-1 웹 표준이란

2-2 HTML5에서 추가된 내용이 있는가

2-3 웹 접근성이란

2-4 웹 접근성에 맞는 마크업 예시 몇가지 말해보라

2-5 시멘틱 태그란 무엇인가. 왜 사용하는가

2-6 텍스트 관련 태그

2-7 SEO란 무엇인가

2-8 button 태그의 default type은 무엇인가

2-9 section 태그와 article 태그의 차이점

2-10 크로스 브라우징이란 무엇인가

3. 그 외

3-1 이미지 크기가 클 경우 렌더링 속도가 느려질텐데 이를 개선하기 위한 방법

3-2 UI란 무엇인지 설명하라

4. SVG

4-1 SVG란 무엇인가

4-2 SVG 장단점

4-3 SVG내부 도형에 대해 아는게 있는가

# 반응형 웹 개요

1. 반응형 웹이란, 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 시용하는 기법을 뜻한다.

2. 반응형 웹사이트에서 가장 핵심이 되는 키워드는 "가변성"이다

3. 기기에 따라 다른 화면 크기에 대응하기 위해 웹문서에 viewpoint 속성에 대한 마크업을 추가해야 한다

# 상대단위 em, rem

1. 절대 길이 단위인 px(픽셀)은 어떤 상황에서도 동일한 값을 유지하므로, 가변성이 없다

2. em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위이다

3. em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미한다

4. em으로 여백 크기(pading과 margin)를 정할 때는 자기 자신의 글자 크기를 기준으로 한다

# 뷰포트 단위 vw, vh, vmin, vmax

1. 뷰포트 크기를 기반으로 크기를 계산하는 가변 단위들이 있다

2. vw는 뷰포트 너비의 100분의 1 크기를 뜻한다

3. wh는 뷰포트 높이의 100분의 1 크기를 뜻한다

4. vmin은 뷰포트 높이와 너비 중 작은 쪽의 100분의 1 크기를 뜻한다

5. vmax는 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 크기를 뜻한다

# 가변 레이아웃 (가변 그리드)

1. 비율 계산 기반으로 변화하는 가변 레이아웃에는 %단위가 주로 사용된다

2. %단위는 백분율 값으로, 부모 요소와의 상대적 크기를 지정한다

3. 너비와 여백은 부모 요소와의 상대적 크기를 지정한다

4. 높이는 부모 요소의 높이에 비례해 계산된다

5. 글자 크기는 부모 요소의 글자 크기에 비례해 계산된다

# CSS 함수 개념과 calc()

1. 함수한 주어진 인수에 따라 정해지는 값을 일컫는 표현이다

2. CSS의 함수는 괄호 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 동작한다

3. calc()를 이용하면 계산식의 결과를 속성값으로 지정할 수 있다

# 미디어 쿼리

1. 미디어쿼리는 미디어 타입을 인식하고, 콘텐츠를 읽어들이거나 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치이다

2. 미디어 타입과 조건문(쿼리)로 구성된다

3. 다양한 미디어 타입과 조건을 지정할 수 있다

4. 화면(screen)의 너비(width)를 조건으로 사용하는 경우가 가장 많다

# 가변 이미지

1. 이미지 요소에도 상대 단위 em, vw, % 등을 사용할 수 있다

2. 브라우저에서 이미지는 기본적으로 비율을 유지한다

3. 이미지가 원본보다 커지면 이미지 품질이 떨어질 수 있다

4. max-width 속성은 요소의 최대 너비 제한을 정할 수 있는 속성이다

5. picture와 source 요소는 이미지를 미디어 조건에 맞게 선택적으로 불러올 수 있는 요소이