[Front-end🦁] #12 Flex Project
15064 ワード
1.復習
1-1. font
通常ttfファイルとして適用されます.ネットフォントとしてもよく使われます.
Webフォントの読み込み時に点滅しないようにする
1-2. 復習flex
基本的なプロパティをいくつか復習しました.#6-2
margin-right: auto; スナップショットを使うと、自動的に間隔をとります.
flex-startとstretchの違い:前者は要素の高さを増加させ、stretchは要素の高さを増加させる.
2. holy grail layout
2-1. menu
メニューをクリックすると,sub-メニューが現れるレイアウトも同時に開発された.005.html
PC環境ではメニューが表示され、クリックするとsub-menuが表示され、移動中にはメニューボタンが1つしかなく、ボタンをクリックするとメニュー項目が表示されます!こんなレイアウト.flexを使用しているので、アイコンに位置を指定せずに順番にアップロードできるので便利です.
.subitem { display: block; }
.icon { display: none; }
@media screen and (max-width: 800px) {
.icon {
display: block;
order: 10;
line-height: 35px;
font-size: 25px;
}
.item {
order: 20;
width: 100%;
text-align: center;
}
.subitem {
display: none;
}
}<!-- 핵심 부분만 간추림! -->
nav>ul>li
<li class="item has-submenu">
<a href="#">BLOG</a>
<ul class="submenu">
<li class="subitem"><a href="#">HTML</a></li>
<li class="subitem"><a href="#">CSS</a></li>
<li class="subitem"><a href="#">JAVASCRIPT</a></li>
<li class="subitem"><a href="#">INFRA</a></li>
<li class="subitem"><a href="#">NODE</a></li>
</ul>
</li>
<li class="item">
<a href="#">CONTACT</a>
</li>
<!-- mobile 환경에서 버튼 하나로만 동작하게끔. -->
<li class="icon">
<!-- icon 사용. -->
<a href="#"><i class="fas fa-bars"></i></a>modal:urlはなく、後ろの内容の背景だけをあげます.
pop-up:いっそ新しいウィンドウを交換します.
overflow: auto;を与えると、ページ内にスクロールが表示されます.2-2. layout
ソースコード
私の場合はheader、section(section>article、aside)、footerでパーティション化し、sectionでflex、flex-growを使用して両側に配置します.また,@mediaタグでwidthが小さくなるとasideが下がる.反応型を別途処理し、
先生は全体のflexを提供し、ヘッダー、フッターでwidth:100%、section>article 70%、aside 30%を実現しました.
3. JS challenge
無糖ココアのバニラ.これはjs挑戦が始まった日です.もう一人の学生が教えてくれたので、登録して、一度聞いてみると、この授業で聞いたときに感じが違うと思ったので、ついでにブラウズして、計画を立てなくても、私の挑戦に挑戦することにしました.ビデオも長くないので、聴くときは字幕を消して英語の聴力を高めることにしました.
JavaScript
1.ページをインタラクティブにするため!
2.すべてのブラウザに内蔵
3.フロントエンドはhtml、css、javascriptのみです.
4.jsもcssのようにhtmlファイルに接続して使用!
<body>
<script src="app.js"></script>
</body>4.感じ
Reference
この問題について([Front-end🦁] #12 Flex Project), 我々は、より多くの情報をここで見つけました https://velog.io/@ddosang/Front-end-12テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol