1.勉強の内容

(1)ページ練習
NAVER携帯電話ページ(https://m.naver.com/)の基本分野について作業を行った.
(本課程後の独学課程)


△下にスクロールすると、上部画面が切り替わります.




(2)学習内容
まず、作成する内容を少し下にスクロールすると、変換したメニューを一番上に置いて開始します.
週末に変更した後、検索窓にも入れます.

開発者ツールのモバイルバージョン表示とメディアクエリーの初期化、使用

以前メディア検索を学んだことがありますが、開発者ツールを開き、携帯電話の表示(図の赤い原図部分)をクリックすると、携帯電話のバージョンが表示されます.
widthとheightsizeに調整できます.

まだあります.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

習った部分ですが、meta tagにviewportを入れます.
画面が小さくなると、寸法で塗りつぶされたロールが実行されます.
また、移動ページを表示すると、画面にスクロールが表示される部分があるので、以下のflex-wrapを設定できます.

作業中に発生した問題の解決-1

△結果

cssブラウザのスクロールバーを消去し、スタイルを指定および変更します。

スタイルを変更するには、次の手順に従います.
( https://webisfree.com/2019-01-08/css-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%B0%94-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%A7%80%EC%A0%95-%EB%B0%94%EA%BE%B8%EB%8A%94-%EB%B0%A9%EB%B2%95-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0 )

css新単位:vh

その他、CSSの7単位-rem、vh、vw、vmin、vmax、ex、chの内容も参照できます.
https://webclub.tistory.com/356
従来は主にemとpxが使われていたので、疎遠でした.

2.実習

ダウンソース:
https://github.com/Yeonsu-Hong/Daegu-AI-school-files

3.困難な内容&解決方法

大きなページに比べて、携帯電話のバージョンはコンパクトで、狭い空間の設計に工夫が必要です.

4.感想

残りの最初の授業はメディアクエリーに変換される可能性があり、週末に授業を聞いた後、全体の内容をフィードバックします.