TIL 2021.09.16-1週間
📍今週の学習目標学習ネットワークプログラミング基礎 HTML/CSSを使用してWebサイト を公開
学習 Linux 学習 Git
今日習った内容💪 html,学習css創建ウェブサイト <今日復習する目次>メッシュ 変換、変換、アニメーション属性 メディアクエリー
1.グリッド
レイアウトを表現する方法はたくさんありますが、最新の機能グリッド!
聞いたことがありますが、一度か二度本を習ったことがありますが、あまり役に立たないと思っていたので、大まかに理解して通り過ぎました.
Gridをサポートしているのは96%のブラウザなので、実際の作業でも使用できます.
この機会によく勉強して理解してください.メッシュ構文
これまでhtmlやcssを扱う際にダイナミック要素が入っていなかったのでうまく使ったことがないので、心を込めて理解してスキップすべきだと思います.初めて接する人なら、transform、translate、transition、animationの名前も似ていて、どこに属性をつけるべきか混同しているので、もう少し整理しておけばよかった!
まず.名前が悪いので用語を整理しておきます!
Transform-エレメントの外観、位置、サイズのプロパティを変更します.
Transition(Transition)-指定した時間内に要素のプロパティ値をスムーズに変更します.
animation-エレメントの現在のスタイルをゆっくりと別のスタイルに変更するプロパティです. transform
=transformは形状を変えることができる属性です.その類は以下の通りである. translate(x, y) rotate(deg) scale(x倍、y倍) skew(x-deg, y-deg) matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()) このhtml要素にtransformプロパティを指定すると、形状が変化する要素が表示されます. transition
=エレメントのアトリビュート値のアトリビュート値を一定時間スムーズに変更します.
アニメーションとは異なり、トリガデバイスを設定すると動作します.使い捨ての行動と理解する.たとえば、マウスをクリックしたときに大きくなるか、マウスを離したときにカラーの一度の移動を変更すると、トランジションアトリビュートが作成されます. animation
=エレメントの現在のスタイルを徐々に別のスタイルのプロパティに変更します.
特別にトリガーされた動作をしていなくても、設定したら自動的に起動します.
メディア検索も何度か処理されているので、見慣れていませんが、最近は使っていないので、再度チェックしてスキップ!メディアを使用してクエリを実行する際の注意事項
次のコードがモバイルデバイスにも予想される画面が表示されることを確認します! メディアクエリ構文
学習
今日習った内容💪
レイアウトを表現する方法はたくさんありますが、最新の機能グリッド!
聞いたことがありますが、一度か二度本を習ったことがありますが、あまり役に立たないと思っていたので、大まかに理解して通り過ぎました.
Gridをサポートしているのは96%のブラウザなので、実際の作業でも使用できます.
この機会によく勉強して理解してください.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* grid-template-columns: repeat(3, 1fr); */
grid-template-rows: 100px 500px;
}これまでhtmlやcssを扱う際にダイナミック要素が入っていなかったのでうまく使ったことがないので、心を込めて理解してスキップすべきだと思います.初めて接する人なら、transform、translate、transition、animationの名前も似ていて、どこに属性をつけるべきか混同しているので、もう少し整理しておけばよかった!
まず.名前が悪いので用語を整理しておきます!
Transform-エレメントの外観、位置、サイズのプロパティを変更します.
Transition(Transition)-指定した時間内に要素のプロパティ値をスムーズに変更します.
animation-エレメントの現在のスタイルをゆっくりと別のスタイルに変更するプロパティです.
=transformは形状を変えることができる属性です.その類は以下の通りである.
=エレメントのアトリビュート値のアトリビュート値を一定時間スムーズに変更します.
アニメーションとは異なり、トリガデバイスを設定すると動作します.使い捨ての行動と理解する.たとえば、マウスをクリックしたときに大きくなるか、マウスを離したときにカラーの一度の移動を変更すると、トランジションアトリビュートが作成されます.
/* transition 속성 작성 문법 */
.transition {
transition-property: all;
transition-duration: 1000ms;
transition-timing-function: linear;
transition-delay: 3000ms;
}
/* 마우스를 호버하면 색깔이 바뀌는 움직임을 설정하는 예제로 알아보자 */
.box1 {
color: blue;
transition: color 0.3s linear;
}
.box1:hover{
color: red;
}
// 0.3초 동안 색깔이 blue 에서 red로 일정한 속도로 부드럽게 변화 =エレメントの現在のスタイルを徐々に別のスタイルのプロパティに変更します.
特別にトリガーされた動作をしていなくても、設定したら自動的に起動します.
/* animation 속성 작성 문법 */
.animation{
animation-name: makeAnimationName;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes makeAnimationName{
from{ width: 300px }
to{ width: 600px }
}
/* 크기가 변하는 움직임을 설정하는 예제로 알아보자 */
.animation {
width: 300px;
height: 300px;
background-color:orange;
animation: changeWidth 3s linear 1s 6 alternate;
}
@keyframes changeWidth{
from{ width: 300px; }
to{ width: 600px; }
}
メディア検索も何度か処理されているので、見慣れていませんが、最近は使っていないので、再度チェックしてスキップ!
次のコードがモバイルデバイスにも予想される画面が表示されることを確認します!
<head>
<meta name="viewport" content=“width=device-width, initial-scale=1.0”>
</head>@media (min-width: 320px) and (max-width: 640px){
.media{
//원하는 내용 입력
}
}Reference
この問題について(TIL 2021.09.16-1週間), 我々は、より多くの情報をここで見つけました https://velog.io/@leemin02_/TIL-2021.09.16テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol