第1週
19908 ワード
[HTML、CSS基本情報]
HTMLはスケルトン、CSSは修飾、Javascriptは移動
HTMLは主にheadとbodyで構成されています
headはページの属性情報=>meta,script,link,titleなどである.
bodyはページの内容です
-----区分マーク-----
<div>구역 나눔</div>
<p>문단</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul> <h1>제목</h1>
<h2>소제목</h2>
<h3>비중이 작지만 각자의 역할 있음</h3>
<hr> 가로선
<span style="color:red">특정 글자 꾸미기</span>
<a href="http://naver.com/"> 하이퍼링크 </a>
<img src="이미지 주소" />
<input type="text" />
<button> 버튼</button>
<textarea>텍스트 입력 상자</textarea>[CSSベース]
css headのスタイルスペースで作成
classを歌うとき点呼する
<head>
<style>
.mytitle {
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<h1 class="mytitle"> ~~~</h1>
</body>マージンは外、パッドは内マージン
文字属性は箱のように縦横概念がありません。
=>移動するには、文章属性をbox属性に変更して移動する必要があります.display:blockを使う
クラスが重なる場合は、書き換えてから書き続けます。
<button class="mybtn red-font">注記不要なコードを削除したり、一時的に無効にしたり、コードの簡単な説明が必要な場合に使用します。
!コメントを追加すると、ブラウザ/コンピュータを読むのではなく、開発者や同僚に情報を提供します.
ショートカットキー:ctrl+/
[ガイドバー]
きれいなcssコレクション.あらかじめ作成したcssを使用します.
-ガイドバーを使用するには、テンプレートを起動する必要があります.
ガイドバー構成部品4.0
-テンプレートの起動
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>[Javascript]
JavaScriptはプログラミング言語で、ブラウザが聞き取れる言語です.
警告ウィンドウの作成
=>alert()
<head>
~~
<script>
function hey() {
alert('안녕');
}
</script>
</head>
<body>
~~
<button onclick="hey()" type="button" class="btn btn-primary">버튼 경고창</button>
</body>✔クロム開発者ツール>コンソール
コンソールウィンドウは、開いているページでJavaScriptをすばやくテストできるツールです.
console.log(変数):コンソールウィンドウに変数値を出力する
console.log(変数1,変数2)を使用することもできます
Shift+Enter:改行(コンソールウィンドウ)
✔変数
*変数は値を格納するボックスです
変数をletと宣言
let a=1はaという変数に1を入れることを表す
きほんえんざん
let first_name = 'Bob'
let last_name = 'Lee'
first name+last name//「BobLee」出力
インベントリ
順序がある.
let a list=["変数1",2,3]
a list[1]/2出力
要素をリストに入れる
a_list.push(変数4)
a list/[変数1,2,3,変数4]出力
リストの長さを求める
a_list.長さ/4出力
専制的
順序なし、キー(key)-値(value)の集合
a_dict = {'name' : 'Bob','age' : 21}
a dict["name"//"Bob"出力
a_dict ['height'] = 180
a dict/{name:“Bob”,age:21,height:180}出力
a dict/{name:“Bob”,age:21,height:180,list:Array(4)}出力
a dict["list"][1]/2出力
✔基本関数
余剰を求める
let a = 20
let b = 7
a%b/6出力
文字列を分割する場合
let myemail = [email protected]
let result = myemail.split("@")/["abc","naver.com"]出力
結果[0]/abc出力
let result2 = result[1].xplit('.')//['naver','com']
resulte 2[0]//naver出力
要約=>mymail.split('@')[1].split(".")[0]//naver出力
✔関数
function sum (num1,num2){
return num1+num2
}//
let result = sum(2,3)//
結果//5出力
条件文
くりかえし文
[Q.ジョブ]
宿題は今まで習ったことをもとに、企画書を見ながらやっています!
Boot Street制作を参考にして、初めて説明を聞かずに、最初から制作して、迷っていましたが、どうしても完成しました!!
できるだけ早く熟知し、
Reference
この問題について(第1週), 我々は、より多くの情報をここで見つけました https://velog.io/@spahy12/스파르타-왕초보-1주차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol