TIL-20.10.15(Googleクローンコード)

📖 自己紹介ページ

1.電子メールアイコン、電子メールポップアップ機能、プッシュ機能の追加

直接メールを送るmailtoを使いたいのですが.
ポップアップウィンドウの前から再生したいので、ポップアップウィンドウを使うことにしました.onclick="alert('이메일')"

📖 Googleサイトクローンエンコーディング(UIのみ)

私は自己紹介ページを作って、私ができることを豪快に言い始めました.
しかし、私の望み通りにできることは一つもありません.

📌 ナビゲーションバー

1.垂直方向中央揃えナビゲーションバー

heightなどのline-heightを与えることで解決できず、
親要素display: table;,子要素display: table-cell;解析

2.ナビゲーションバーとロゴが重なる

ロゴはナビゲーションバーの下部にある必要がありますが、同じ行にある現象が発生します.

position: absolute;
top: 0px;
right: 0px;

上のコードをナビゲーションバーに追加し、右上隅に固定します.

📌 検索ウィンドウ

1.検索ウィンドウ

<form action="https://www.google.com/search" method="GET">
	<input id="search" type="text">
</form>

Googleサイトの検索結果に接続するために、

2.ウィンドウシャドウの検索

inputはborder-radius,box-shadowを適用した.
開発者ツールを使用してGoogle検索ウィンドウを表示すると、ボックスにinputウィンドウが含まれます.

<div class="searchbox">
	<form action="https://www.google.com/search" method="GET">
		<input id="search" type="text">
	</form>

formを囲むdivを追加しborder-radius、box-shadowをdivに適用
しかしdivのinputクリックで次のような恐ろしい黒い枠が生成されます😭

3.inputをクリックすると黒い枠の問題が発生

Input boxをクリックしたときに表示される枠線の色を削除input:focus {outline:none;}

4.input boxでデフォルト値を設定する

<input value="텍스트">クリックすると空白に設定してJSに設定できるので、JSを学習して実施します

5.検索ウィンドウに拡大鏡とマイクの画像を配置する

display: inline; やっても、1行1行食べるという問題が発生します.

display: flex;
justify-content: space-between;
align-items: center;

dispaly: flex;:Flexible Boxの作成
flexの概念はさらに学ぶ必要があります...

justify-content: space-between;:開始Itemと開始位置合わせ、最後のItemと終了位置合わせ、残りのItemsと間揃え

align-items: center;:垂直中央

📌 ツールバーの

<input type="button" value="버튼내용"/> <button>버튼내용</button>Inputとbuttonには2つの方法がありますが、今回はbuttonを使います

1.マウスの通過、シャドウ、フォントの色の変化

.btn:hover{
  color: black;
  border: 1px solid gray;
}

2.マウスをクリックすると、枠線の色が変わります

ボタンをクリックすると、自動的に真っ黒な枠が生成され、何をしても消えないという問題が…
マウスクリックで消えるoutline: 0;それでも現れ続ける
調べてみました:activeではなく、状態outline: 0;😂

3.ボタンをクリックしてページを移動する

<button onclick="location.href='이동할 페이지'">버튼내용</button>一日中やってやっと終わりました!
まだまだ足りないことはたくさんあるけど嬉しい🤪
私たちはもっと努力しなければなりません.👊🏻💪🏻

結果

https://syeeuns.github.io/gooclone

ソースコード

https://github.com/syeeuns/gooclone
どうしてイメージが現れるのでしょうか.😱