Верстка

Question 1

Форматы изображения

Answer 1

Растровые - состоит из пикселей чем больше пикселей тем круче картинка, тем больше весит.

JPEG/JPE - не потдерживает прозрачность, хорошо сжимается, но теряет качество.

PNG - потдерживает прозрачность, но не так хорошо сжимается как jpec но и не так много теряет в качестве.

GIF - потдерживает анимация (несколько кадров которые сменяют себя), ограниченное количество цветов 256, весит много.

WEBP - формат изобрел гугл. Использует другие алгоритмы сжатия. Не размыливаются края но размыливается внутренняя детализация. Потдерживает прозрачность.

Векторные:
SVG - фрмат которые рисуется на основе формул и при маштабировании не теряет в качестве. Хорошо потдается анимации.

Question 2

Svg спрайты

Answer 2

Как менять цвет SVG картинки:
В SVG есть поле fill и stroke;

stroke - отвечает за линии
fill - за заливку

На прямую влиять на stroke or fill через css или html мы не можем.
При изменении svg в случае анимации нужно импортировать напрямую в html и уже в css задаем sroke.

ЧТО ТАКОЕ SPRITE SVG - Это отдельный фал с расширением svg. В нем у нас один тег <svg> и в нем вставляем все теги отдельных иконок с тегом <path>. если path не один то мы групируем все эти теги в один тег <g> </g>. В каждый тег path либо g указываем id (id='car). Потом вставляем в html:
<button>
<svg>
<use></use></svg></button></path></svg>

Question 3

Svg спрайты в REACT

Answer 3

import sprite from ‘../img/sprite.svg

<button class=’svg-tag’ iconID={‘car’}>
<svg>
<use xlinkHref={`${sprite}#${props.iconID` }/></svg>

Question 4

Favicon

Answer 4

Маленький значок для сайта в title
Всегда должна быть квадратная. Формат - ICO

Question 5

Единицы измирения

Answer 5

Все измерения делятся на две группы:
1. абсолютные - px;
2. относительные - %, em/rem, vh/vw;

% - размер зависит от родителя. (родитель 20% - и от этих 20% высчитывается % этого елемента).

em/rem - зависит от размера родительского ширфтаю:
    1em = равен одному значеню родительського шрифта.
    1rem = равен значению размеру root шрифта. (по дефолту HTML использует 10px)

vh/vw относительно окна браузера;