[Front]学習ログ-1
緒論
実は最初はフロントにあまり興味がありませんでした.フロントは面白くないし、勉強する理由も感じませんでした.だからこれまではバックエンドのみを学び、バックエンドのみを開発してきました.
そんな中、いきなりフロントの勉強をしたくなったのはコラボレーション.
最近チームプロジェクトが行われて、コミュニケーションが容易ではありません.私たちのチームにとって、バックエンドはバックエンドしか知らず、フロントはフロントエンドしか知らない.また、ほとんどのチームメンバーはチームプロジェクトの経験が少ないか、ないため、相互理解が難しい.
だからフロントを勉強することにしました.このようにしてこそ、彼らをよりよく理解することができ、彼らが一緒に良い方向に向かって成果を創造することができると信じているからだ.
CSS
Cascading Style Sheet
ノードを学ぶ前にJSはよく勉強していましたが、HTMLやCSSは勉強の必要性を感じていなかったので勉強しませんでした.
HTMLはやはり基礎知識を学んで過ぎてしまいますが、CSSは本当にやりたくないようです.だから私はまだCSSを作ることができません.
CSS Selector
セレクタには、特定の要素を選択する機能があります.選択した要素にCSS属性を付与できます.
選択者を使用せずにフォントに色を指定する場合は、次の操作を行います.
<a><font color="red">hi</font></a><a style="color: red;">hi</a><font>ラベル、下はCSS属性を直接付与しています.選択者の使用例は次のとおりです.
<head>
<style>
a {
color: red;
}
</style>
</head>
<body>
<a>hi</a>
</body><style>のラベルで記入します.または.cssファイルで作成できます..cssファイルの読み込み
.cssファイルを読み込む方法は大きく2種類あります.
<link>ラベルを使用する方法と@importがあります./* style.css */
a {
color: red;
}<!-- main.html -->
<body>
<a>hi</a>
</body><link>プロパティを使用する場合は、次のようになります.<head>
<link rel="stylesheet" href="css/style.css">
</head>@import文を使用する場合は、次のようになります.<head>
<style>
@import url('css/style.css');
</style>
</head>@import構文はCSSの構文であるため、<style>タグ内で使用する必要があります.link vs import
しかし、
<link>と@importの使用を決定する前に、両者の違いを理解する必要があるようだ.参考資料:http://egloos.zum.com/seye2/v/2319809
前述したように、
@importを使用すると、特定のバージョンのIEに互換性の問題が発生する可能性がある.比cssファイル.つまり、まずjsファイルをロードすると、DOM Queryを使用すると問題が発生する可能性があります.では、Chromeブラウザではどうなるのでしょうか.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import url('css/style.css');
</style>
<script src="js/a.js" type="text/javascript"></script>
</head>
<body>
<a>hi</a>
</body>
</html>
Chromeブラウザで行った実験結果は.html -> .css -> .js順に入ってきたようです.クロムで使うのは大丈夫でしょうか?
Reference
この問題について([Front]学習ログ-1), 我々は、より多くの情報をここで見つけました https://velog.io/@jiyong/front-공부일지-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol