[Webデザイン]Killer Webサイトプロジェクト学習を整理する1

33513 ワード

授業内容を整理する CSS html テキストリンク

[The Killer Website Project] Section 5. Killer Webサイトプロジェクトの学習内容を整理する
#38 - 40 Building the header

#38 Building the header - Part 1

html要素:header、nav

:タイトル.navラベルが含まれています.

:navigatorの略.メニューまたはリンクを含む他のページにナビゲートするロール.
両方ともbodyラベルの内部に入ります.
[ HTML ]

<body>
    <header>
        <nav></nav>
    </header>
</body>

Webページの背景画像の設定

[ CSS ]
background-image:url(フォルダ名/ファイル名);

//Ex.
header{
  background-image: url(img/hero.jpg);
}

ブラウザのビューポイントと同じ画像の高さを変更

vhは、ビューポートのパーセント長のheightを表します.vh: 1vhは、ビューポートの高さの1%に等しい.すなわち,100vhはDOMツリー内の要素の位置に関係なくブラウザウィンドウの高さと同じである.background-size: coverおよびbackground-position: centerは、スクリーン解像度が変化しても、背景画像を常に中心に保つ.
[ CSS ]
height: 100vh;
background-size: cover;
background-position: center;

//Ex.
header {
  background-image: url(img/hero.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

上の画面と同様に、オレンジ色の部分(h 1セグメント)の余白を削除する必要があるが、UI上部の空白を解消し、ブラウザの視点と同じ高画像を作成することができる.
(chrome dev toolを使用して、スペースを削除する必要がある領域を正確にチェックします!)
[ CSS ]
margin-top: 0;

//Ex. 
h1 {
    margin: 0;
}

中央揃えボックスの作成

[ CSS ]
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

//Ex.
/*html*/
<div class="hero-text-box">
        <h1>Goodbye junk food. <br />Hello super healthy meals.</h1>
</div>
/*css*/
.hero-text-box {
  position: absolute;
  width: 1140px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); ⭐️⭐️⭐️
}

translate: translate(x, y)エレメントを指定した位置に移動し、X軸またはY軸を移動します.transform: translate(-50%, -50%);は、x軸−50%、y軸−50%(pxであってもよい)を示す.

Responsive Designでも、中央の箱を作ることがよくあります.

画像にテキストをぶら下げる:画像を暗くする

linear-gradient(색상#1, 색상#2)を使用すると、2つのバックグラウンド画像を同時に使用するように画像を暗くすることができます.
[ CSS ]
背景-画像:線形-グラデーション(色1,色2),url(img/hero.jpg);

//Ex.
header {
   background-image: linear-gradient(rgba(0, 0, 0, 0.835), rgba(0, 0, 0, 0.603)),
     url(images/hero.jpg); ⭐️⭐️⭐️
   background-size: cover;
   background-position: center;
   height: 100vh;
}

#39 Building the header - Part 2

反作用font-size

Responsive Designでは、defaultフォントのサイズを先に決定し、階層%でフォントのサイズを指定すると、defaultフォントのサイズを基準として各フォントの相対サイズが決定されます.(解像度が変わっても、そうです)
[ CSS ]
font-size: ___%;

//Ex.
html {
   font-size: 20px;
}
h1 {
   color: #fff;
   font-size: 200%; ⭐️⭐️⭐️
}

上のhtml全体がfont-sizedefaultを20 pxに設定しているので、それを基準に200%調整できます.
これは、反作用設計だけでなく、変更が必要な場合はdefaul font-sizeを変更してfont-size全体を一度に変更できます.

Uppercase文字の作成(大文字)

[ CSS ]
text-transform: uppercase;

//Ex.
h1 {
   text-transform: uppercase; 
}

+Plus:通常h 1セグメントはfont-weight高に設定されます.font-sizeは昇るのが一番、font-weightは下がるのが一番です.

ピッチ&ピッチ

[ CSS ]
letter-spacing: _px;
word-spacing: _px;

//Ex. 
h1 {
  letter-spacing: 1px;
  word-spacing: 4px;
}

inline-blockエイリアスの作成

デフォルトでは、<a></a>はinline宣言です.ただし、paddingとmarginを設定するには、display: inlineでinline-blockに変換する必要があります.
[ CSS ]
display: inline-block;
padding: _ px _px;

//Ex. 
/*html*/
<a class="btn" href="#">I’m hungry</a>
<a class="btn" href="#">Show me more</a>
/*css*/
.btn {
     display: inline-block; ⭐️⭐️⭐️
     padding: 10px 30px; //위&아래 10px, 오른쪽&왼쪽 30px
}

文字の下線を削除

上のボタンのテキストの青い線を消すには、text-decoration: none;を追加します.
[ CSS ]
text-decoration: none;

//Ex.
btn {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none; ⭐️⭐️⭐️ 
}

Link states: link, visited, hover, active

CSSではbuttonまたはlinkは、次の4つの状態(状態)を持つことができます.
statesはpseudo-clases(:state name)で表されます.

1.link:レイヤが最も基本的な状態(normal state)にある場合の様子を表します。

2.訪問：訪問後（クリック後）装飾品の様子を見ることができます。

3.サスペンション：エレベーターにマウスを置いたときの様子を表示します。

4.active:エレメントがアクティブになったときの様子を表します。通常、アクティブ化は、マウスクリックから移動することを意味します。

[ CSS ]
.クラス名:state name{
}

//Ex.
/*html*/
<a class="btn btn-full" href="#">I’m hungry</a>
/*css*/
.btn-full:link,	⭐️⭐️⭐️
.btn-full:visited { ⭐️⭐️⭐️
  background-color: #e67e22;
  border: 1px solid #e67e22; /*ghost버튼이랑 똑같이 설정*/
  color: #fff;
  margin-right: 15px;
}
.btn:hover, ⭐️⭐️⭐️
.btn:active { ⭐️⭐️⭐️
  /*마우스를 버튼 위에 올려놓았을 때 색깔이 바뀌는 모습 설정*/
  background-color: #cf6d178a;
}

上記の例では、ボタンをクリックした後(アクセス済み)とデフォルト(リンク)の状態のスタイルは同じです.マウスを離すとボタンの色が暗くなります.

アニメーションのCSS遷移

[ CSS ]
≪トランジション｜Transition｜oem_src≫:必要な効果時間(秒単位)
ex. transition: width 2s, height 2s, background-color 2s, transform 2s;

//Ex.
/*html*/
<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>
/*css*/
.btn:link,
.btn:visited {
  display: inline-block;
  padding: 10px 30px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 200px;
  transition: background-color 0.2s, border 0.2s, color 0.2s; ⭐️⭐️⭐️
  /*링크(버튼)에 마우스를 갖다대면 바로 변하는 것이 아니라 0.2s(초) 이후에 변함*/
}

#40 Building the header - Part 3

ナビゲーションの作成

設計の完了
(赤い箱の中の要素)

[ HTML ]<nav></nav>

/*html*/
     <nav>
        <div class="row">
          <img src="Resources/images/logo-white.png" alt="omnifood logo" class="logo"/>
          <ul class="main-nav">
            <li><a href="#">Food delivery</a></li>
            <li><a href="#">How it works</a></li>
            <li><a href="#">Our cities</a></li>
            <li><a href="#">Sign up</a></li>
          </ul>
        </div>
      </nav>

floatでシンボルを整列するには

次のコードを使用して、Omnifoodフラグ(class:logo)を左揃え、その他の文字ナビゲーション(class:main-nav)を右揃えに設定します.
[ CSS ]
float: right/left;

/*css*/
.logo {
  height: 100px;
  width: auto;
  float: left; ⭐️⭐️⭐️
}
.main-nav {
  float: right; ⭐️⭐️⭐️
}

だんてん

[ CSS ]
list-style: none;

/*css*/
.main-nav {
  float: right;
  list-style: none;  ⭐️⭐️⭐️
}

Liラベルをエッジで位置合わせする

基本的に、liラベルは1行の空間が占めるblock要素です.
したがって、両側を揃えるためにはinline block elmentに変更する必要があります.
次に、各装飾ブロックに1つの余白を指定し、間隔を形成します.
[ CSS ]
display: inline-block;
margin-left(or right): __px;

/*html*/
 <ul class="main-nav">
	<li><a href="#">Food delivery</a></li>
	<li><a href="#">How it works</a></li>
	<li><a href="#">Our cities</a></li>
	<li><a href="#">Sign up</a></li>
 </ul>
/*css*/
.main-nav li {
  display: inline-block; ⭐️⭐️⭐️
  margin-left: 40px;  ⭐️⭐️⭐️
}

+Plus:.main-nav liliタグ要素が選択されているように、.main-nav li aはaタグ要素を選択することができる.

エアクッション効果を使用した枠線の作成

[CS]linkstatesは他の主要ディレクトリです.
.クラス名(+ラベル名):link,
.クラス名(+ラベル名):アクセス済み{
border-bottom: _px solid transparent
}
.クラス名(+ラベル名):hover,
.クラス名(+タグ名):active{
border-bottom:px solid#色
}

/*html*/
 <ul class="main-nav">
	<li><a href="#">Food delivery</a></li>
	<li><a href="#">How it works</a></li>
	<li><a href="#">Our cities</a></li>
	<li><a href="#">Sign up</a></li>
 </ul>
/*css*/
.main-nav li a:link,
.main-nav li a:visited {
  padding: 8px 0;   <--- top&bottom left&right; border-bottom과 nav사이에 간격주기❗️
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid transparent; ⭐️⭐️⭐️
  transition: border-bottom 0.2s;   <--- +btn에 적용했던 것처럼 애니메이션 넣어주기❗️
}
.main-nav li a:hover,
.main-nav li a:active {
  border-bottom: 2px solid #e67e22; ⭐️⭐️⭐️
}

Border lineはマウスが停止する前に作成する必要があります.したがって、ステータスがlinkvistedの場合にのみ存在する必要があります.ただし、このとき要素はUIに表示されるべきではないので、transparent(透過)状態に設定します.
FOOD DELIVERY上にマウスを置くと表示されます⬽¥

完了ヘッド

Reference

*この投稿には、Udemyの「HTML 5とCS 3を含む応答リアルワールドWebサイトの作成」コースが含まれています.
https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/
https://c10106.tistory.com/1711

Reference

この問題について([Webデザイン]Killer Webサイトプロジェクト学習を整理する1), 我々は、より多くの情報をここで見つけました https://velog.io/@grinding_hannah/Web-Design-The-Killer-Website-Project-학습내용정리

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

The X11 forwarding request was rejected!

Spring-MVC : 1