july, 1 (1)

16410 ワード

カカオ色 CSS FTP テキストリンク

cssの仮想セレクタ
1)動作に関する設計の仮想選択プログラムを挿入する
:選択した要素の動作とルールに基づいて設計を適用します.
cssで作成した

の効果を適用
link)すでにアクセスした場所でリンクを適用する際に使用する仮想選択プログラム

html>
<a herf="http://www.naver.com/">
	네이버
</a>

</body>
</html>

css>
a:link {color: red;}

a:active {color: blue;}

클릭상태 유지하면 파란색, 마우스 떼면 레드
-> active 라는 가상선택자 사용 


* 마우스 올릴때 폰트 색상 
-> hover 라는 가상선택자 사용
ex) a:hover {color: pink;}
* focus (보통 input 태그와 결합)

html)
<a herf="http://www.naver.com/">
	네이버
</a>

<input type="text">

</body>
</html>

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

2)ルールベースの設計を適用する仮想選択プログラム

html) 

<ul>
   <li>메뉴 1</li>
	   <li>메뉴 2</li>
	   <li>메뉴 3</li>
   <li>메뉴 4</li>
	   <li>메뉴 5</li>
		   <li>메뉴 6</li>
</ul>





</body>
</html>

css)

li:first-child{color: red;}    : 첫번째 list
li:last-child{color: blue;}   : 마지막 list
li:nth-child(2n + 1) {color: gray;} : 홀수 list
li:nth-child(2n) {color: gray;} : 짝수

before-after
:文字中心、前と後ろの間
強制的に挿入できます.
メイン

このオプションを使用
ex)


* html

 <ul>
  <li>로그인</li>
  <li>회원가입</li>
  <li>회사소개</li>
  <li>고객센터</li>

 </ul>


 </body>
</html>

*css

 li:before {content:"***";}

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

プロジェクトフォルダの設定方法
(フォルダ名:プロジェクトに設定)
ウェブページを作成するときは主にimag、html、cssで作成します.
フォルダに入れましたが、ホームページを作成しています.
ページが長ければ長いほどhtml、cssドキュメントの量も多くなります.
一般的に1ページのimgも2-30個を超えます.
多くのドキュメントが1つのフォルダに集中すると、読み取り可能性が低下します.
管理が難しくなる.一般的にホームページを作るとき.
フォルダ内のimg/css/を簡単に管理できます.
html)


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

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

<h1>Hello World</h1>

</body>
</html>

注意)

<link rel="stylesheet" type="text/css" 
href="">

新しいフォルダを作成するには、->フォルダ名を入力する必要があります.
ファイルをバインドする必要があります:href=「css/style.css」を入力します.
配線によって画像を挿入するには、次の手順に従います.
style.cssフォルダは、外部(.../入力)->imgフォルダのiconに基点と基点の形で表示する必要があります.png(/img/icon.png)を選択する必要があります.
background-imag:
url(../img/icon.png)}
処理された成果物をサーバにアップロードし、ドメインアドレスとして検証します.
実務中カフェ管理者が提供するサーバにファイルをアップロードするには、管理者に支払う必要があります.金を費やす.無料で利用できるサイト:dahome、dotohome.に参加
FTP:PC上で作業している成果物をサーバにアップロードする場合
トンネルキャラクタ.id/db番号を忘れないでください.
cm 5自動インストール非インストール/ドメイン受信!
ファイルzilla->FTPの1つ

クライアントをダウンロードしました

ホスト:(http://を除く!)入力フィールド
ユーザ名/pw:FTP ID/pw
ポート:21

アップロード後にドメインをリフレッシュするとワークスペースが生成されます
以前に作ったKakao Listでデザインしています)
再び入って~

これはhtmlコードで設計されています.
ここで友达のリストだけの実习をします!

ここでkakaoフォルダを指定して再作成~

TIP! html基本構造をより迅速に完成させるには

そしてね.

(時計)
cssフォルダをkakaoフォルダに入れ、charackに分割します(分割を忘れてしまうのではないかと心配しています)

htmlにバインド

連動確認はスタイルcssで厚くします

index.htmlを確認すると!!!!!!!

ええと、目が痛くて、非常に正常な連動であることが確認できます.
(目が痛いので、小さな写真、)
今、再度、ココアの友達リストが出てくるデザイン図を作成します.

<ul> : 각각의 친구리스트는 동급정보이기 때문에 <ul> tag 사용
<li>   </li>
</ul>
<a href="#"></a> : 친구리스트들은 클릭했을 때 특정 페이지로 넘어가야 하기 때문에 
a 태그를 안쪽에 넣어보았읍니다.. 

카톡 친구 목록은 이미지가 있고, 친구명과 친구소개 들어있는 곳이 오른쪽에 배치되어있음. 이미지영역을 넣어보기로->  img 태그를 이용해서 div 태그로 감싸고, 
친구 이름은 <h3>박지원</h3>, 친구 소개는 <span>Jiwon Park</span>