[Webフロントエンド]インタラクティブWeb開発の準備)
22511 ワード
インタラクティブWeb開発)準備
emmetの使用
! + tap:空のhtmlドキュメントを自動的に完了
css selector+tap:css selectorを使用して要素を作成する
属性値 を指定 >>>: child
+: sibling
^: climb up
(): grouping
{}: innerHTML
$: numbering Learn Emmet in 15 Minutes
https://www.youtube.com/watch?v=V8vizNQKtx0
emmetの使用
! + tap:空のhtmlドキュメントを自動的に完了
css selector+tap:css selectorを使用して要素を作成する
<!-- 태그(default: div) -->
<태그></태그>
<!-- 태그.클래스 -->
<태그 class="클래스"></태그>
<!-- 태그#아이디 -->
<태그 id="아이디"></태그>
<!-- 태그.클래스1.클래스2#아이디1 -->
<태그 class="클래스1 클래스2" id="아이디1"></태그>
<!-- button[type="button"] -->
<button type="button"></button>
<!-- [data-selected].active -->
<div data-selected="" class="active"></div>
+: 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>
📌 参考資料https://www.youtube.com/watch?v=V8vizNQKtx0
Reference
この問題について([Webフロントエンド]インタラクティブWeb開発の準備)), 我々は、より多くの情報をここで見つけました https://velog.io/@sunjoo9912/웹-프론트엔드-인터랙티브-웹-개발-준비하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol