[웹 프론트엔드] 인터랙티브 웹 개발) 준비하기

인터랙티브 웹 개발) 준비하기

emmet 사용하기

• ! + tap: 빈 html 문서 자동 완성

• css seletor + tap: 해당 css seletor를 갖는 element 생성하기

<!-- 태그(default: div)  -->
<태그></태그>

<!-- 태그.클래스  -->
<태그 class="클래스"></태그>
<!-- 태그#아이디 -->
<태그 id="아이디"></태그>

<!-- 태그.클래스1.클래스2#아이디1 -->
<태그 class="클래스1 클래스2" id="아이디1"></태그>

• 속성(attribute) 값 지정하기

<!-- button[type="button"] -->
<button type="button"></button>

<!-- [data-selected].active -->
<div data-selected="" class="active"></div>

• $>$: child
  +: sibling
  ^: climb up
  (): grouping
  {}: innerHTML
  $: numbering

<!-- span.parent>span.child   -->
<span class="parent"><span class="child"></span></span>

<!-- header>nav>ul>li*3.class-${text-$$} -->
<header>
	<nav> 
		<ul>
			<li class="class-1">text-01</li>
			<li class="class-2">text-02</li>
			<li class="class-3">text-03</li>
		</ul>
	</nav>
</header>

<!-- header+main+footer  -->
<header></header>
<main></main>
<footer></footer>

<!-- header>nav^main+footer  -->
<header>
	<nav></nav>
</header>
<main></main>
<footer></footer>
<!-- (header>nav)+main+footer  -->
<header>
	<nav></nav>
</header>
<main></main>
<footer></footer>

<!-- (header>h2{Heading}+nav>ol>li*5>a{Link $})+main+footer -->
<header>
	<h2>Heading</h2>
	<nav>
		<ol>
			<li><a href="">Link 1</a></li>
			<li><a href="">Link 2</a></li>
			<li><a href="">Link 3</a></li>
			<li><a href="">Link 4</a></li>
			<li><a href="">Link 5</a></li>
		</ol>
	</nav>
</header>
<main></main>
<footer></footer>

<!-- form:post>(.group>lable+input:text)+(.group>lable+input:number) -->
<form action="" method="post">
	<div class="group">
		<lable for=""></lable>
		<input type="text" name="" id=""></id>
	</div>
	<div class="group">
		<lable for=""></lable>
		<input type="number" name="" id=""></id>
	</div>
</form>

📌 참고자료

• Learn Emmet in 15 Minutes
  https://www.youtube.com/watch?v=V8vizNQKtx0