1.勉強の内容

今日、反応型サイトhelbakと呼ばれるデンマークのショッピングセンターのウェブサイトのレイアウトを直接作成する実習を行いました.
作成

HTML

style.css(スタイルとメディアクエリー)

子供のgaoサイトとは違って、アニメーションを入れずに2つのファイルしかありません.style.すなわち,cssではメディアクエリコードが同時に用いられる.
第二に、実務でよく使われる部分について学びました.
作成

HTML

style.css

成果物:

（1）halbak（onesize-up）

(円size-down)

(折りたたみsize-up)

(折りたたみsize-down)

（2）業務提示

この実務tipセクションでは、後のセクションでより具体的に結果を掲載します.

<学習内容>

helbakでは、レイアウトcatの一部が上部左側のhelbakであり、もう一部が上部右側の3つのボタンである.
ホームページ紹介したものをtagで包む.
下部はtermas and conditions cookieで、右側は支払い方式が支払い方式を受け入れるレイアウトです.

css :

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

/* 아래 코드는 default로 넣어주는게 좋다. */
html, body {
	width: 100%;
	height: 100%;
}

アスタリスクは、marginとpaddingをそれぞれ0として適用することを示します.
box sizeとborder-boxを追加してpaddingによる空間サイズの変更を防止します.

span {
	display: block;
}

span tagは元のinline要素を有する.
しかし、helbakは上のcodeのようにblock要素を与えます.
デンマークのショッピングセンターはメディア検索にpcバージョンを追加した.
(子供gaoとは反対)

#header .buttons ul {
	overflow: hidden;

}



#header .buttons li {
	position: relative;
	float: left;

	width: 33.33%;
	height: 65px;
	
}

#header .buttons .menu-button {
	display: block;

	width: 100%;
	height: 100%;
	text-align: center;
}


#header .buttons li:nth-child(1) .menu-button {
	background-color: blue;
}


#header .buttons li:nth-child(2) .menu-button {
	background-color: pink;
}


#header .buttons li:nth-child(3) .menu-button {
	background-color: green;
}

加えて、親は子供の高さ値を認識することができます.
<#header .buttons li:nth-child(1) .menu-button {
background-color: blue;>
}
→buttonのli tagでnizzy領域に最初に現れるbuttonを選択する

画像y軸の中央揃え

		top: 50%;	 
		transform: translateY(-50%);

実務的なコードとしては、y軸を揃えるときに暗記して使うと良いでしょう.下図のように、ちょうど真ん中に並んでいます.

position: absolute;
このposition値を指定するとwidth値が正しく認識されません.
中央の6つのセル範囲で、
maintagはexplorerでは認識できません.このように記入する必要があります.

左下揃え

< #footer ul, #footer li, #footer h3 {
		display: inline-block;
		vertical-align: middle;
	}

	#footer .left-nav a {
		font-size: 14px;
		padding: 0 5px;
		/*line-height: 20px;*/
	}>

ビジネス・ヒント

(1)href属性値は3種類あり得る.

			<li><a href="https://www.naver.com">one</a></li>
			<li><a href="contact.html">two</a></li>
			<li><a href="#three">three</a></li>	

url

全く異なるhtmlドキュメント

id属性値

(2)classはatagにマージできません.
(3)改行現象を解消するコード

  영역을 벗어나는 것 감추기
     <overflow: hidden;>
 

略語(...)タグ付け

cssでクラスを指定すると、コードを簡略化できます.
< .ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;} >

html에는 code를 추가 <h2 class="ellipsis">   
   

(4)自動適用
css <.m-b-10 {
margin-bottom: 10px;
}>
html

css <.p-t-50 {

		}>

	<.p-l-10 {

	}>
	<.p-r-10 {

			}>
      padding-top, left , right값도 적용할 수 있다.
  
  

2.実習

ダウンソース:
helbak(デンマークショップホームページレイアウト)HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/21
helbak css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/22
その他の実用的なテクニック(HTML)
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/23
その他の実用的なテクニック(css)
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/24

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

コードが長くなるにつれて,誤字だけでなく{}領域のせいでページのレイアウトが誤り,検索に多くの時間がかかった.また授業を聞きながら探すことができます.

4.感想

キッズは呉より実習がしやすいと思いますが、3次元位置継承のせいか、実際に使っているtipなどは自分でやってみて、いろいろな状況の数をうまく処理してこそ私のものになると思います.