明日の学習キャンプの初日

7140 ワード
明日勉強するキャンプ JavaScript スパルタコードクラブ html CSS テキストリンク
今日から、私の船のカメラを始めました.9から9まで、4ヶ月間です.
ネットワーク開発総合クラスをベースに、制作に挑戦するコラボレーションプロジェクトを簡単に作成しましたが、努力してフォローし、必ず成功していくことを願っています.
メンバーに会えてみんないい人だと思ってくれてよかったしかし、私のコード経験が最も少なく、ついていけないのではないかと心配する人もいます.奮発して強さを求める.
まず1日目~1週間目に、以前ネット開発総合クラスで学んだ授業を復習する時間があります.

授業内容を整理する


ネットワークプログラミング基礎課1週目
:ファンリストの作成

フォントの適用


https://hangeul.naver.com/2021/fonts/nanum
https://fonts.google.com/?subset=korean
上記のフォントサイトにアクセスし、URLとCSS font-familyアドレスを取得すればよい
<head>
	<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" rel="stylesheet">
    <script>
    	// 원하는 CSS에 적용. * = 페이지 전체에 적용 
    	* {
        font-family: 'Nanum Brush Script', cursive;
        }
    </script>
</head>

きれいなCSSを使う


https://getbootstrap.com/
各種CSSテンプレートを提供するサイトからcdnアドレスを取得して頭に貼り付け、必要なテンプレートコードをコピーして本体に貼り付ける.

タイトル画像CSS


<script>
	.mytitle {
            width: 100%; // 좁은 너비에서도 잘리지않도록 퍼센트 설정
            max-width: 500px; // 반응형 CSS를 위해 최대 너비를 정함
            height: 400px;
            color: white;
            margin: auto; // 위, 우, 밑, 좌 순으로 여백 설정
            
			// 이미지 url 앞에 linear-gradient 로 텍스트가 잘보이도록 이미지를 어둡게 할 수 있다
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://fashionseoul.com/wp-content/uploads/2020/11/20201125_J.ESTINA_02.jpg");
            background-position: center;
            background-size: cover; // 이미지 CSS 3종 세트 : image, position, size
			
            // 이미지 내 요소 가운데 정렬을 위한 4종 세트
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
</script>

その他CSS

padding: 20px auto 0 0;
: margin과 동일하게 상,우,하,좌 순으로 안 쪽 여백을 지정

box-shadow : 3px 3px 5px 3px gray;
: 테두리를 감싼 그림자 효과
剣指Offer-9度1513-バイナリ中1の個数
MTKにETTテストコードを入れる