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: "---";}
카카오톡 친구리스트 만들기
참고 : 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;}
네이버 오늘 읽을만한 글
<!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) 학습한 내용 중 어려웠던 점 또는 해결못한 것들
학습중 강사님과의 화면과 달라 고생을 좀 했다. 여기는 파이썬처럼 오류코드를 보여주는게 없어서 하나하나 일일이 다 대치하고 수정해야만 했다. 그리고 파일질라를 깔았는데 자꾸 서버에 연결이 안된다.
3) 해결방법 작성
사이트 참조와 강사님 질문을 통해 해결해 나갈것.
4) 학습 소감
7월 시작부터 신기한것들 많아 알게된거 같다. 내일은 또 어떤걸 배울지 기대된다 열심히 해야지 : )
