2021.07.01 CSS 2番目、プロジェクト

41810 ワード
大邱AI学校 テキストリンク

きょうの講義

  • 仮想セレクタ講座

    • 行動に関連する仮想選択者

    <!-- html언어 -->
<a href="https://www.naver.com/">네이버</a>
<input type="text">

<!-- CSS언어 -->
a:link {
	color: yellow;
}

a:active {
	color: blue;
}

a:hover {
	color: pink;
}

input:focus {
	border: solid 10px red;
}

  • link:アクセスしたことのないリンクに設計を適用

  • Active:マウスでリンクをクリックしたときの色を変更する

  • サスペンション:マウスのサスペンション時に背景色、フォント色を変更する

  • focus:主にinputラベルと一緒に使用し、inputをクリックすると適用

    • ルールベースの設計

    <!-- html언어 -->
<ul>
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
	<li>메뉴4</li>
	<li>메뉴5</li>
	<li>메뉴6</li>
</ul>

<!-- CSS언어 -->
li:first-child {
	color: red;
}

li:last-child {
	color: blue;
}

li:nth-child(2) {
	color: gray;
}

li:nth-child(2n + 1) {
	color: gray;
}

  • first-child:最初のサブアイテムの状態を設定する

  • Last-child:最後のサブアイテムのステータスを設定する

  • nth-child():状態を変えたいやつ?()で順番に設定

  • nth-child(2 n):偶数サブアイテムのみを設定した状態

  • nth-child(2 n+1):奇数サブアイテムのみを設定した状態
    • <!-- html언어 -->
<ul>
	<li>로그인</li>
	<li>회원가입</li>
	<li>회사소개</li>
	<li>고객센터</li>
</ul>

<!-- CSS언어 -->
li:before {
	content: "***";
}

li:after {
	content: "---";
}

  • before:文字入力時に開くタグと文字の間の領域を設定する

  • contentプロパティ:プロパティ値に挿入されたテキストや画像などを画面に出力します.

  • after:文字入力時に閉じるラベルと文字の間の領域を設定する

    • -before、after選択者の代表的な例-

    プロジェクトのフォルダを設定します。

  • プロジェクトのフォルダを設定する理由は、今後のメンテナンスとファイル管理を容易にするためです.
    <!-- html언어 -->
<head>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<h1>Hello World</h1>
    
<!-- CSS언어 -->
h1 {
	color: red;
}



    上記の例では、htmlファイルの格納フォルダproject 1フォルダにcssフォルダ、imgフォルダを作成し、各フォルダに適したファイルを別々に格納します.
    <link rel="stylesheet" type="text/css" href="css/style.css">
    以前とは異なり、フォルダが分離されているため、ロード方法も変化し、上のソースコードでlinkラベルを使用してcssファイルを「css/style.css」にロードする場所には「css/style.css」とマークし、cssフォルダでstyleを使用します.cssファイルをインポートするという意味です.前/記号を「中」と理解するのは簡単です.
    <!-- html언어 -->
<div></div>

	<img src="img/icon.png">

<!-- CSS언어 -->
div {
	width: 300px;
	height: 300px;
	background-image: url(../img/icon.png);
}



    今回はhtmlとcssから画像ファイルをそれぞれロードする方法を試みた.
    html言語で画像ファイルをロードする場合は、
    Project 1フォルダを中心にロードする方法.
    以上はcssファイルのロード方法と夕食方法で、フォーマットは「img/icon.png」です.
    逆に、cssファイルから画像ファイルをロードする場合、画像はcssフォルダの外にあるため、親フォルダ(./img/icon.png)に移動する必要があるため、2つのポイントで親フォルダに移動しhtmlと同じように画像ファイルを作成およびロードできます.

    処理された成果物をサーバにコミットし、ドメイン・アドレスを検証します。


  • https://www.dothome.co.kr/my/service/web/basic/detail.php
    上のMydahomeを利用して無料のネットホスティングを作成します.

  • https://filezilla-project.org/
    次に、以下の操作でファイルドラッグをインストールします.ファイルドラッグはftpで、ファイルをローカルおよびサーバにアップロードします.
    • どちらの仕事も難しくないので、簡単にできるはずです.


    上の画像はファイルライブラリで、インストール後にコンピュータからサーバにファイルを移動します.この操作が完了したら、Mydahomeが作成したドメインアドレスにファイルをアップロードします.

    上の画像.
    自分のドメイン名アドレスに今日作成したファイルをアップロードしました.

    KakaoTalkイメージリストの作成

    <!-- html언어 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<ul class="friends-list">
		<li class="friends-list">
			
			<a href="#">
				
				<img src="https://via.placeholder.com/50"class="friend-thumbnail">

				<div class="friend-info">
					<h3 class="friend-name">김민호</h3>
					<span class="friend-intro">Minho Kim</span>
				</div>
			</a>
		</li>

		<li class="friends-list">
			
			<a href="#">
				
				<img src="https://via.placeholder.com/50"class="friend-thumbnail">

				<div class="friend-info">
					<h3 class="friend-name">박지원</h3>
					<span class="friend-intro">다정한 사람</span>
				</div>
			</a>
		</li>

		<li class="friends-list">
			
			<a href="#">
				
				<img src="https://via.placeholder.com/50"class="friend-thumbnail">

				<div class="friend-info">
					<h3 class="friend-name">한성은</h3>
					<span class="friend-intro">헤헷</span>
				</div>
			</a>
		</li>
	</ul>


</body>
</html>

<!-- CSS언어 -->
.friends-list {
	list-style: none;
}

.friends-list .friends-list a {
	color: #000000;
	text-decoration: none;
}

.friends-list .friends-list a .friend-thumbnail {
	border: solid 2px gray;
	border-radius: 20px;
}
/*border-radius 값을 원형으로 하고 싶으면 속성값 을 50% 한다*/

.friends-list .friends-list a .friend-info .friend-name {
	font-size: 20px;
	color: #000000;
}

.friends-list .friends-list a .friend-info .friend-intro {
	font-size: 15px;
	color: #c8c8c8;
}

/* Custom */
.friends-list .friends-list a .friend-info .friend-name {
	font-size: 50px;
	color: red;
}
  • ビット目の例は、クラスタグを積極的に使用する例である.
    classラベルを使用すると、より柔軟に作業できます.

    • Naverlivingカテゴリの作成

    <!-- html언어 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<ul class="living-lists">
		<li class="living-item">
			<a href="">
				<img src="https://via.placeholder.com/170x114
				" class="living-thumbnail">
				<div class="living-info">
					<span class="type">리빙</span>
					<h3 class="title">30평대 아파트, 따뜻한 느낌의 침실</h3>
					<p class="paragraph">Nice to meet you Nice to meet you Nice to meet you
					Nice to meet you Nice to meet you Nice to meet you
					Nice to meet you Nice to meet you Nice to meet you</p>

					<div class="date-wrap">
						<span class="source">유닠</span>
						<span class="date">3개월 전</span>
					</div>
				</div>

			</a>
		</li>

		<li class="living-item">
			<a href="">
				<img src="https://via.placeholder.com/170x114" class="living-thumbnail">
				<div class="living-info">
					<span class="type">리빙</span>
					<h3 class="title">아이있는 집 주방 1년 간의 소소한 변화</h3>
					<p class="paragraph">Nice to meet you Nice to meet you Nice to meet you
					Nice to meet you Nice to meet you Nice to meet you
					Nice to meet you Nice to meet you Nice to meet you</p>

					<div class="date-wrap">
						<span class="source">miju</span>
						<span class="date">1개월 전</span>
					</div>
				</div>

			</a>
		</li>
	</ul>



</body>
</html>

<!-- CSS언어 -->
.living-lists {
	list-style: none;
}

.living-lists .living-item a {
	color: #000000;
	text-decoration: none;
}


.living-lists .living-item .living-info .type {
	color: #c08d31;
	font-weight: 700;
	font-size: 12px;
}

.living-lists .living-item .living-info .title {
	font-size: 13px;
	color: #000000;
}

.living-lists .living-item .living-info .paragraph {
	font-size: 13px;
	color: #404040;
	line-height: 20px;
}

.living-lists .living-item .living-info .date-wrap .source,
.living-lists .living-item .living-info .date-wrap .date {
	font-size: 12px;
	color: #505050;
}

.living-lists .living-item .living-info .date-wrap .date {
	color: gray ;
}

.living-lists .living-item .living-info .date-wrap .date:before {
	content: '-';
}

.living-lists .living-item:hover {
	background-color: pink;
}


.living-lists .living-item a:hover .living-info .title {
	text-decoration: underline ;
}

  • line-height:アルファベット間の上下の間隔を指定するcssプロパティ.

  • 仮想選択者の後ろに別の選択者を記入することができます.

    • 作業時の蜂蜜tip


  • 他の作業は設計に適していますが、サムネイル部分だけが設計に適していない場合は、開発者ツールをよく利用してエラーがないか確認できます.



  • 上の写真ではfriend-thumbnailがわざと間違えました

  • すべての領域の設計が適用されない場合、正常に記入すると、ファイルバインド(linkラベル)付近でエラーが発生する可能性があります.

  • ソースコードを保持し、カスタムコードを使用するときに表示

    • 元のコード値の外観(上図)


    カスタムコードを作成したら、cssのコンテキスト関係に基づいて作成します.
    コードが適用されました(上図)

  • 開発者ツールを熟知する必要がある

  • cssコードを練習する場合は、既存のサイトを使用します.
    開発者ツールを使用してコードの追加と練習もできます

    • 授業後の感想


    今日はフォルダごとにファイルを保存する方法と使い方を重点的に学びました.
    現在、カリキュラムの内容を学習しているので、ラベルやプロパティについて
    適切な場所でどのように使うかが一番難しいです.
    週末を利用して今週のまとめと復習コースを行います
    link map
    HIVEインデックス作成