HTML/CSSを使用したポートフォリオの作成

かっこいいライオンのようにTILの勉強を始める
こんにちは!幸いなことに、おしゃれなライオンのように、創業学校の第2期に入った.
トレーニング開始:)
最初の週、あなたは毎日異なる授業を聞いて、言語全体を勉強します.
今日の授業は「最初に始まるHTML/CSS」で、李斗熙(イ・ドゥヒ)代表が直接講義する.
私はまずコンピュータ工学を学びましたが、最近は基礎を築くためにHTML/CSSを学びました.
李斗熙代表の講義を聞いて、基礎を築きなさい.このような気持ちで授業を受けます.
まず、今日のレッスンはポートフォリオの作成です.
李斗熙代表はHTML/CSSを文書と比較した.
実はHTMLはエンコードされています!専門家はこの言葉に強く反応し、
これに対し、李斗熙(イ・ドゥヒ)代表は、「HTMLをコードするというよりは、文書を作るということだ」と話した.そう言っている
基礎構文もパッケージと比較した.
<パッケージ1>コンテンツ物にこのようなコードがあると仮定すると、
<パッケージ2><パッケージ1>内容物.
大きなバッグ2の中にバッグ1が入っている感じが連想されます.
HEADとBODY
headはhtmlの大きなフレームワークの一つです.
headはハンドバッグにたとえられる.
空港に荷物を貼りに行くとスーツケースにラベルが貼られますよね?
ラベルには目的地がどこにあるか、何時に出発するかなど、多くの情報があります.
このように頭も同じで、もっと詳しい内容がbodyのアイデアに入っていればいいのです.
頭と体を考えています.
私たちの体はHEADになります鼻と口と足はBODYになります
Google fontsの使い方
ウェブページを作成するとき、フォントは実は最も重要な内容です.
授業中にGoogleフォントを使う方法があるので、シェアしてみましょう.
*Googleフォントの使い方
まずGoogle Fontに入り、必要なフォントのurlをコピーします.

ここで右側のimportをクリックすると、スタイルラベル付きのコードが表示されます!コピーさえすれば終わりなので簡単です.

@import url('구글 폰트에서 복사한 주소 url');

* {
	font-family : 'Montserrat'; /*다운받은 폰트*/
}

*タグを使用してフォントを指定すると、ダウンロードしたフォントがすべてのフォントに適用されます.
左揃え、右揃え:float
最も基本的で最もよく使われるソート方法です.例えば、写真を左側に、文章を右側に置きます.

これでAwesome Programming Companyは左に同じ線ですが2020-Nowは右でしょうか?
李斗熙(イ・ドゥヒ)代表は、これを大きな部分に分けて等級だけを変えて浮動順位をつけて簡単に解決した.
HTMLコンテンツ

< div class="float wrap" >
	<p class="title-text">UI/UX Designer </p>
	<p class="year-text">2011 - 2015 </p>
</div>

このように、divでは、タイトルと年テキストがpラベルに設定され、次のcssはfloat:leftとfloat:right属性値を与えます.
css内容

.float wrap {
 overflow: hidden;
margin-bottom: 4px;
}

.title-text {
float : left
}

.year-text {
float : right 
}

<p> 내용 </p>
<p> 내용2 </p>

画像へのハイパーリンクの追加

通常、このようなアイコンをクリックすると、グーグルに直接アクセスする機能がたくさん追加されます.すぐに理解してみましょう.

<a href="내 sns 주소">
< img class="sns-img" src="images/facebook.png">
</a>
.sns-img {
	width : 12px;
	height : 12px;
}

このように、aタグ内でimgを与え、クラスで縦横に小さくして完成!簡単ですよね?
最後に最近好きなemmetの使い方をご紹介します
Emmet
強力な自動補完機能によりHTMLの作成速度を大幅に速めたプラグインです.
必要なタグを入力したら、Tapボタンを押して、自動的に完了します.たとえば、次のようにします.

div.hihi

このようなコードを書いたらtapをクリックします

<div class="hihi></div>

コードを完了します.簡単ですよね?
それ以外は

div*4

実行すると、同じステップで4つのdivが完了します.
.次はクラス名です!*個数と+が加算生成であることが分かれば、容易に符号化できます.
https://nachwon.github.io/How_to_use_emmet/
誰かが整理したドキュメントを共有する:)
色々な文法を書いているみたいですね次回はもっときれいに整理された文字で皆さんを探しますありがとうございます.