[TIL] 1101 LikeLion🦁 FES 01

이춘구·2021년 11월 1일

emmet html

멋쟁이 사자처럼 프론트엔드 스쿨

목록 보기

1/18

git gui로 사용

cli 사용법과 잘 매핑하기

VSC emmet

VSC(비쥬얼 스튜디오 코드)에서 지원하는 단축키로 마크업 시간을 크게 줄일 수 있다.

1. !

html 양식 자동 완성

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        
    </body>
</html>

2. # 과 .

태그에 클래스나 아이디 부여. 태그를 작성하지 않으면 자동으로 div 태그로 생성.

#identifier
<div id="identifier"></div>
.class-name
<div class="class-name"></div>

3. >

부모자식 관계의 태그를 작성

div>ul>li
<div>
  <ul>
    <li></li>
  </ul>
</div>

4. +

형제 관계의 태그를 작성

div>ul+ol
<div>
  <ul></ul>
  <ol></ol>
</div>

5. *

태그를 반복 생성

ul>li*5
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

6. ^

부모 단계의 층으로 이동

div>ul>li^ol>li
<div>
  <ul>
    <li></li>
  </ul>
  <ol>
    <li></li>
  </ol>
</div>

7. ( )

태그를 그룹화 해서 작성

div>(header>ul>li*2)+footer>p
<div>
  <header>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

8. { }

태그 내부에 텍스트 작성

p{Hello World}
<p>Hello World</p>

9. [ ]

속성을 정의

a[href="www.naver.com"]
<a href="www.naver.com"></a>

10. $

$자리에 숫자를 할당

p.class{item $}*5
<p class="class">item 1</p>
<p class="class">item 2</p>
<p class="class">item 3</p>
<p class="class">item 4</p>
<p class="class">item 5</p>

11. lorem

더미 텍스트 생성

lorem - 한 줄 생성
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam cum excepturi repellendus, quisquam atque voluptas. Ullam minus numquam voluptates, quam ducimus odio, perspiciatis consequatur beatae culpa voluptatum id reprehenderit et.

lorem3 - 세 단어 생성
Lorem, ipsum dolor.

lorem*3 - 세 줄 생성
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium fugiat ex inventore, saepe molestiae illo optio porro dicta. Et dicta impedit rem praesentium doloremque nesciunt harum cupiditate quasi autem dolores?
Laborum earum dolores esse qui saepe accusamus dicta aliquam omnis rem pariatur laudantium quas modi aut facilis, nesciunt sint aperiam. Qui nam quibusdam placeat molestias sapiente aperiam natus, repellendus odio?
Consequatur, maxime placeat? Nisi amet eius tenetur excepturi corrupti ratione ipsum porro, libero doloremque! Sed, repellendus provident. Cumque, hic! Molestiae, quis ullam voluptates fugiat exercitationem delectus deleniti pariatur architecto tenetur!

emmet 공식 문서

dl dt dd

각각 description list, term, description을 의미하며,
key-value 형태로 설명(정의)할 때 사용한다.

주의사항

dl 안에서 dt와 dd는 항상 쌍으로 존재한다.
dt와 dd는 항상 dl 내에 존재해야 한다(독립적으로 존재할 수 없다).
div는 dt-dd 쌍을 감쌀 수 있지만 dt-dd의 형제이면 안 된다.
하나의 dt에 여러 개의 dd가 존재할 수 있으며 그 반대도 가능하다.(ex. dt-dd-dd, dt-dt-dd)
하지만 스크린리더는 dt와 dd가 1:1로 쌍을 이룰 때 가장 정확한 의미를 읽어내므로 이 경우에만 사용하는 것을 권장한다.

비가시성 요소 처리

화면에 보이지 않아도 될 요소(스크린리더에게만 필요한 요소)는 다양한 방법으로 처리할 수 있다.

.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

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

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

이춘구

프런트엔드 개발자

다음 포스트

[TIL] 1102 LikeLion🦁 FES 02

0개의 댓글