210701開発ログ

34988 ワード
テキストリンク
1)学習内容

バーチャルセレクタ

  • 仮想セレクタ
    • 行動に関する設計を採用
    <a href="https://www.naver.com/">네이버</a>

a:link{color: red;}
a:active{color:  blue;}
a:hover{color: pink;} | 마우스 올리면 색상변경

<input type="text">
input:focus {border: solid 10px red;}
  • 仮想セレクタ
    • ルールベースの設計
    <ul>
	<li>메뉴 1</li>
	<li>메뉴 2</li>
	<li>메뉴 3</li>
	<li>메뉴 4</li>
	<li>메뉴 5</li>
	<li>메뉴 6</li>
</ul>

li:first-child {color:  red;}

li:last-child {color: blue;}

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

  • before、afterの仮想セレクタの使用
    字を中心に前後の間に内容物を挿入する
    • <ul>
	<li>로그인</li>
	<li>회원가입</li>
	<li>회사소개</li>
	<li>고객센터</li>
</ul>

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

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

    KakaoTalkの友達リストを作成する


    注意:https://developers.kakao.com/docs/latest/ko/kakaotalk-social/common
    <!DOCTYPE html>
<html>
<head>	
<meta charset="utf-8">	
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

</body>
</html>

body {background-color: yellow;}
    <ul class="friends-lists">
<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>
</ul>

<ul class="friends-lists">
<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>

<ul class="friends-lists">
<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>

.friends-lists {list-style: none;}

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

.friends-lists .friends-list a .friend-thumbnail {border: solid 2px gray;border-radius: 20px;}

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

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

    NAVERの今日の読むべき文章

    <!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 </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 </p>
					
<div class="date-wrap">
<span class="source">miju</span>
<span class="date">1개월 전</span>
</div>

</div>
</a>

</li>

</ul>

</body>
</html>

.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; olor: #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: grey;}

.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;}

    2)学習内容の難点または未解決の問題
    勉強中と講師の画面が違って、少し苦労しました.ここではPythonのようにエラーコードが表示されず、一つ一つ置き換えたり修正したりするしかありません.そしてファイルをダウンロードしましたが、いつもサーバーに接続できません.

    3)ソリューションの作成
    http://help.nanuminet.com/bbs/board.php?bo_table=manual&wr_id=187&sca=%EC%9D%B4%EB%AF%B8%EC%A7%80%ED%98%B8%EC%8A%A4%ED%8C%85
    サイトの参考と講師の質問で問題を解決します.
    4)勉強の心得
    7月からは不思議なことがたくさんあります私は明日また何を学ぶことができることを期待して、努力しなければなりません:)
    EasyUIは、バックグラウンド・データベースのデータを動的に表示します.
    1102 TIL img/Semantic Tag