웹 페이지를 만드는 가장 기본이 되는 잔기술 들을 적어본다.
emmet이란 html이나 css등을 작성할때 시간을 단축시켜주는 확장 플러그인이다.
vscode에는 기본적으로 적용되어 있으니 사용해보자.
1. 기본 폼 만들기
: ! + tab 키를 누르면 자동으로 아래와 같은 기본폼이 만들어진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 제목</title>
</head>
<body>
</body>
</html>2. CSS 파일 연결하기
: link 라고 입력하고 tab을 누르면 자동으로 스타일시트 코드가 완성된다.
<link rel="stylesheet" href="">- 링크 입력(href)란에 CSS 파일 위치를 입력해준다.
3. 클래스 이름 쉽게 만들기
: div, nav 등 쓰고자 하는 태그명뒤에 .클래스명 을 입력하면 자동으로 태그가 생성된다.
<!-- 입력값 : nab.topbar -->
<nav class="topbar"></nav>4. 리스트 여러줄 쉽게 만들기
: <li></li> 를 여러번 반복해서 작성하는 대신 (li)*횟수 라고 입력하면 5줄이 입력된다.
<!-- (li>a)*5 -->
<li><a href="></a></li>
<li><a href="></a></li>
<li><a href="></a></li>
<li><a href="></a></li>
<li><a href="></a></li>5. 하위 태그 만들기
:
<!-- div>span -->
<div>
<span></span>
</div>부모>자식 태그를 입력하면 위와 같이 내부에 추가로 태그를 작성할 수 있다.
.jpg)
"꾸준한 삽질과 우연한 성공"