[マルコのコーディング入門]ネットワーク開発学習ログ1週間
64420 ワード
この文章は受講と勉強の内容を整理するために書いたものです.
(スパルタコードクラブネットワーク開発総合クラス1週目)
スパルタエンコーディングクラブ第1回ミッションで優秀な活動者に選ばれ、正規講座の1つを受けることができる.コードが全然分からない私はコード入門課のWeb開発総合クラスを選びました.
これから8週間、しっかり復習して、ぜひ彼氏と一緒に面白いページを作っていきたいと思います!
Web動作原理、HTML、CSS基本内容 CSS基礎&常用CSS フォント、注釈処理、ファイル分離 作成ログインページ ガイド 位置決め箱完成 Javascript HTML に接続 Javascriptベース
-変数&基本演算
-リスト&専制
-基本関数
- function
-条件文
-記事 を繰り返します
🚩 Web動作原理、HTML、CSS基本内容
ブラウザはリクエストを送信し、サーバが準備したコンテンツを受信して描画します. サーバは、APIという名前のウィンドウにおいて、所定のコンテンツ を送信することができる.
HTMLはスケルトン、CSSはデコレーション
HTML:エリア、テキストを表すコード head(ページ属性情報)、body(ホームページ内容)、計 meta、script、link、titleなど
CSS: ずっとmetaを検索していてどういう意味なのか整理したいい文章を見つけました!
metaラベルの整理
script:簡単に言えば、JavaScriptをHTMLに接続するために必要なコード
脚本に関するいい文章
スクリプトタグの位置の比較
コードソートショートカット
tab:インデント
shift+tab:マイナス記号
ctrl+Alt+L:自動ソート機能(複数行同時にソートしやすい)
🚩 CSSベース&よく使うCSS
不要なコードを削除し、一時的に実行したくない場合は、「 」を選択します.コードの簡単な説明 開発者本人または同僚に を貼り付ける
スタイルの長い部分は表示しにくいため、この部分をファイル から個別に削除します. style.同じフォルダにcssファイルを作成し、headラベルから をロードします.🚩 簡単なログインページの作成
きれいなCSS を集めました他の人が作成したCSSを私のHTMLに適用します.CSSファイルはインターネット上の位置 にあります.
🚩 位置決めボックス完了
横寸法500 px, 画面が小さくなって移動時の自動変換方法 になる.🚩 Javascript HTMLへの接続
リスト:データを順番に持つ形式 ディレクトリ=key:value
ex)文字列を特定文字で区切る
後で授業を聞いたらすぐ復習してからアップロードします.
今はファンリストを作るだけで1週間目が終わります!
ファンリストを作成したらこちらにコードをアップします
(スパルタコードクラブネットワーク開発総合クラス1週目)
スパルタエンコーディングクラブ第1回ミッションで優秀な活動者に選ばれ、正規講座の1つを受けることができる.コードが全然分からない私はコード入門課のWeb開発総合クラスを選びました.
これから8週間、しっかり復習して、ぜひ彼氏と一緒に面白いページを作っていきたいと思います!
今週の勉強内容
-変数&基本演算
-リスト&専制
-基本関数
- function
-条件文
-記事
🚩 Web動作原理、HTML、CSS基本内容
ネットワーク動作原理
HTML, CSS
HTMLはスケルトン、CSSはデコレーション
HTML:エリア、テキストを表すコード
CSS:
metaラベルの整理
script:簡単に言えば、JavaScriptをHTMLに接続するために必要なコード
脚本に関するいい文章
スクリプトタグの位置の比較
コードソートショートカット
tab:インデント
shift+tab:マイナス記号
ctrl+Alt+L:自動ソート機能(複数行同時にソートしやすい)
🚩 CSSベース&よく使うCSS
CSSの使い方
<head></head>
<style></style>
안에 공간을 만들어 작성한다
常用CSS
背景
background-color
background-image
background-size
サイズ
width
height
フォント
font-size
font-weight
font-family
color
間隔
margin
padding
CSS flex boxに関する記事
リンクテキスト
🚩 フォント、注釈、CSSファイルの分離
フォント、注釈、CSSファイルの分離
Googleフォントを適用
①自分の好きなフォントを選んで、このスタイルを選んで、追加してからViewyour selected familyをクリックします
②黄色いマークの部分をコピーする
③head部分にコピーした内容をcssルールに入れ、指定したファミリーのコードをstyleにコピーする(一部のみで行う場合はクラスを個別に指定し、このコードを「.class」に挿入する)
Googleフォントのコードを適用
アイラインフォントの適用
①必要なフォントを選択し、「Webフォントとして使用」セクションのコードをコピーし、styleセクションを入力
②必要な部分にfont-family部分を入力
アイラインフォントを適用するコード(class=wannago)
アノテーションほう
コメントはいつ使用しますか?
<head></head>
<style></style>
안에 공간을 만들어 작성한다フォント、注釈、CSSファイルの分離
Googleフォントを適用
①自分の好きなフォントを選んで、このスタイルを選んで、追加してからViewyour selected familyをクリックします
②黄色いマークの部分をコピーする
③head部分にコピーした内容をcssルールに入れ、指定したファミリーのコードをstyleにコピーする(一部のみで行う場合はクラスを個別に指定し、このコードを「.class」に挿入する)
Googleフォントのコードを適用
アイラインフォントの適用
①必要なフォントを選択し、「Webフォントとして使用」セクションのコードをコピーし、styleセクションを入力
②必要な部分にfont-family部分を入力
アイラインフォントを適用するコード(class=wannago)
アノテーションほう
コメントはいつ使用しますか?
コメントショートカット:コメントする行+ctrl(またはCommand)+/を選択
CSSファイルの分離
<link rel="stylesheet" type="test/csss" href = "(css파일이름).css">🚩 簡単なログインページの作成 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Gaegu&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gaegu', cursive;
}
.mytitle {
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("http://image.dongascience.com/Photo/2019/12/fb4f7da04758d289a466f81478f5f488.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 40px;
}
.wrap {
width: 300px;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>로그인하고 햄스터를 보러 가요!</h5>
</div>
<p>ID <input type="text"/></p>
<p>PW <input type="text"/></p>
<p><button>햄스터 보러가기</button></p>
</div>
</body>
</html>
完成本
🚩 ガイドバー
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Gaegu&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gaegu', cursive;
}
.mytitle {
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("http://image.dongascience.com/Photo/2019/12/fb4f7da04758d289a466f81478f5f488.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 40px;
}
.wrap {
width: 300px;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>로그인하고 햄스터를 보러 가요!</h5>
</div>
<p>ID <input type="text"/></p>
<p>PW <input type="text"/></p>
<p><button>햄스터 보러가기</button></p>
</div>
</body>
</html>🚩 位置決めボックス完了 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>무비피디아</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
height: 250px;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg);
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 30px;
}
.mytitle > button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
width: 1200px;
margin: 20px auto 0 auto;
}
.mypost {
max-width: 500px;
width:95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.input-group {
max-width: 500px;
width:95%;
margin: 20px auto 0px auto;
}
.twobuttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.twobuttons > button {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기❣</button>
</div>
<div class="mypost">
<div class="form-floating">
<input type="url" class="form-control" id="floatingInput" placeholder="url">
<label for="floatingInput">영화url</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="twobuttons">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
*移動Tip
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>무비피디아</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
height: 250px;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg);
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 30px;
}
.mytitle > button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
width: 1200px;
margin: 20px auto 0 auto;
}
.mypost {
max-width: 500px;
width:95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.input-group {
max-width: 500px;
width:95%;
margin: 20px auto 0px auto;
}
.twobuttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.twobuttons > button {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기❣</button>
</div>
<div class="mypost">
<div class="form-floating">
<input type="url" class="form-control" id="floatingInput" placeholder="url">
<label for="floatingInput">영화url</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="twobuttons">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다</h5>
<p class="card-text">여기에 내용이 들어가지요.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>width: 95%;
max-width: 500px;
화면 폭 500px전에는 95%로 맞추다가 넘으면 500px로 보여줘라는 의미🚩 Javascript HTMLへの接続
「ボタンです」を押すと「さようなら」が表示されます
①headでscriptでスペースを作成し、その中で作成
②関数をボタンに接続する<button onclick = "hey()">나는 버튼이다</button>
適用
🚩 Javascriptベース
Webページ>右クリック[チェック]>[コンソール]でテスト
入力した内容が更新されない場合は、その内容は変更されません.
変数&基本演算
≪変数代入|Variable代入|ldap≫:右側を変数に挿入します.> let a = 2
-------------
> a
> 2
-------------
> let b = 3
-------------
> b
> 3
-------------
> a+b
> 5
-------------
インベントリ
<button onclick = "hey()">나는 버튼이다</button>Webページ>右クリック[チェック]>[コンソール]でテスト
入力した内容が更新されない場合は、その内容は変更されません.
変数&基本演算
≪変数代入|Variable代入|ldap≫:右側を変数に挿入します.
> let a = 2
-------------
> a
> 2
-------------
> let b = 3
-------------
> b
> 3
-------------
> a+b
> 5
-------------インベントリ
> let a_list = [1,2,'사과']
> a_list[0]
> 1
> a_list[2]
>'사과'
길이 구하기
> a_list.length
> 2>let a_dict = {'name' : 'Minsu', 'age': 26}
>a_dict['name']
>Minsu
>a_dict['age']
>26きほんかんすう
ex)文字列を特定文字で区切る
>let myemail = '[email protected]'
>let result = myemail.split('@')
>'abc', 'velog.com'
>result[0]
>'abc'
result[1]
>velog.com
>let result2 = result[1].split('.')
>'velog','com'
>result2[0]
>velog
보다 간편하게 velog 도출하는 법
>let myemail = '[email protected]'
>let result = myemail.split('@')[1].split('.')[0]
>velogきほんかんすう
function 함수이름(필요한 변수들) {
명령 순차적으로 작성
}
예시
sum = 두 개의 숫자를 입력하면 두 개의 합을 돌려주는 함수
function sum(num1, num2) {
console.log;
(--console.log는 console창에 결과를 띄워줘라는 뜻--)
return num1 + num2;
}
console에서 입력하면
> sum(3,5)
> 8条件文
20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
if(age>20) {
alert('성인이에요')
} else if (age>10) {
alert('청소년이에요')
} else{
alert('10살 미만이에요')
}
}
>is_adult(25)
성인이에요!가 뜬다 複文
for(let i = 0; i <100, i++) {
console.log(i);
}
console에서 입력하면
console.log(1)
console.log(2)
console.log(3)
.
.
.
console.log(99)
後で授業を聞いたらすぐ復習してからアップロードします.
今はファンリストを作るだけで1週間目が終わります!
ファンリストを作成したらこちらにコードをアップします
Reference
この問題について([マルコのコーディング入門]ネットワーク開発学習ログ1週間), 我々は、より多くの情報をここで見つけました https://velog.io/@jessiii/마코의-코딩공부-공부일지-1주차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol