새로 알게 된 것들(1)

Emmet

Emmet은 HTML과 CSS 작성을 빠르게 도와주는 단축키 모음이다.

VS Code에 내장되어 있는 플러그인이다.

HTML과 CSS문법을 알고 있다면 높은 학습 곡선을 필요로 하지 않는다.

(예제)

.wrapper>h1{ Title }+.content

wrapper라는 클래스이름(.클래스이름)을 가진 div태그 생성(태그이름이 없으면 div태그)

div태그 하위에(>) "Title"이라는 문자열의 h1태그 생성

같은 자식 위치(+)에 content라는 클래스 이름을 가진 div태그 생성

<div class="wrapper">
    <h1>Title</h1>
    <div class="content"></div>
</div>

nav>ul.nav>li.nav-item*3>a

nav태그 하위에 nav라는 클래스 이름을 가진 ul태그 생성

nav-item이라는 클래스 이름을 가진 li태그 3개 생성(*3)

li태그 하위에 a태그 생성

<nav>
    <ul class="nav">
        <li class="nav-item"><a href=""></a></li>
        <li class="nav-item"><a href=""></a></li>
        <li class="nav-item"><a href=""></a></li>
    </ul>
</nav>

//문자열을 태그의 이름 또는 각 속성에 대입하고 싶을 때
one
two
three
four

ul>li[title=$#]*>{$#}+img[alt=$# src=""]

ul태그 하위에

li태그를 위의 문자열 수만큼 반복해서(*) 만들고 각 문자열을 title로 지정

li태그 하위에 각 문자열을 지정

같은 위치에 alt가 각 문자열이고 src=""인 img태그 생성

<ul>
    <li title="one">
        one
        <img src="" alt="one">
    </li>
    <li title="two">
        two
        <img src="" alt="two">
    </li>
    <li title="three">
        three
        <img src="" alt="three">
    </li>
    <li title="four">
        four
        <img src="" alt="four">
    </li>
</ul>

이외에도 유용한 단축키들이 많다.

https://docs.emmet.io/cheat-sheet/

Cheat Sheet

Download cheat sheet as printable PDF A5

docs.emmet.io

SVG(Scalable Vector Graphics) 파일

확장 가능한 이미지 형식(동적 이미지)

XML을 사용하여 정

- 아이콘

- 그래프/차트

- 크고 단순한 이미지

- 패턴 배경

- SVG 필터를 통해 다른 요소에 효과 적용

기존의 "래스터 그래픽"은 픽셀 격자의 크기로 제한되어 있어

이미지 크기를 늘리려면 그리드의 크기를 늘려야 하는데

그만큼 파일의 크기가 커진다.

반면, 벡터 그래픽에는 그리드가 없다.

단순히 수학으로 정의되어 있어 댜앙햔 모양과 선에 대한 공식이 있다.

그래서 원하는 크기로 크기를 확장할 수 있고,

파일의 품질이나 크기에 영향을 미치지 않는다.

장점	단점
Human Readable File	복잡한 이미지 저장하는 데에는 비효율적
HTML과 상호 운용이 가능 (DOM의 요소가 될 수 있음)	미세한 디테일을 필요로 하는 이미지에 적합하지 않음

//svg의 예시

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <rect x=0 y=0 width=100 height=50 />
    <circle class="svg-circle" cx="50" cy="50" r="10"/>
</svg>

SVG의 구조

xmlns - 사용 중인 XML 언어를 지정 / SVG언어 사양viewBox - SVG의 범위를 정의rect, circle, path - 기본 빌딩 블록=기본 요소들

SVG 임베딩

링크

background-image: url(./my-image.svg)

이런식으로 바로 링크 연결을 시킬 수 있지만

SVG의 콘텐츠는 웹페이지에서 액세스 할 수 없다.

인라인

웹 페이지의 코드에 직접 붙여넣어 인라인하는 것

CSS 또는 JS로 동적으로 이미지를 변경할 수 있다.

단점 : 코드 난독화, 페이지 캐싱가능성이 적어짐, HTML의 나머지 요소들의 로드를 지연시킬 수 있음

저작자표시

쩜징의 개발로그 :)

새로 알게 된 것들(1)