CSS 가상 선택자 - 선택한 요소에 어떠한 행동과 규칙에 의해 디자인을 적용하는 방법
1) 학습한 내용
<a href=https://www.naver.com/">네이버

일정한 규칙을 바탕으로한 디자인 적용

• 메뉴1
• 메뉴2
• 메뉴3
• 메뉴4
• 메뉴5
• 메뉴6

before after 가상 선택자 디자인

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

프로젝트의 어떤 폴더를 설정하는 방법

Hello World

카카오톡 친구 리스트

• 

  김민호

  Mingo Kim
• 

  박지연

  다정한 사람

게시물 디자인 작업

(!DOCTYPE html>

리빙

30평대 아파트, 따뜻한 느낌의 침실

Nice to meey you

유닠 3개월 전

리빙

아이있는 주방 1년 간의 소소한 변화

Nice to meey you

1개월 전

.style.css
active : 마우스를 클릭햇을 때 클릭자체를 정리
hover : 마우스 커서를 위로 올렸을 때 색상 바뀜
a:link {
color: red;
}
a:active {
color: blue;
}
a:hover {
color: pink
}
input:focus {
border: solid 10px red;
}
일정한 규칙을 바탕으로한 디자인 적용
nth-child : 중간에 있는 영역중에서 아무거나 색상적용
nth-child(2n + 1) 홀수번호에 색적용
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
li:nth-child(2n + 1) {
color: gray;
}

before, after가상 선택자
li:before {
content: "***";
}
li:after {
content: "---";
프로젝트의 어떤 폴더를 적용하는 방법
h1 {
color: red;
}
div {
width: 300px;
height; 300px;
background-image: url(../img/icon.png);
}
카카오톡 친구리스트
.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: 50%;
}
.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;
color: #c8c8c8;

케스케이딩 적용
.friends-lists .friends-list a friend-info .friend-name {
font-size: 50px;
color: red;
}
게시물 디자인 작업
line-height 글자간 간격 지정
.Living-lists {
List-style: none;
}
.Living-lists .Living-item a {
color: #000000;
text-decoration: none;
}

.Living-lists .Living-item .Living-imfo .type {
color: #c08d310;
font-weight: 700;
font-size: 12px;
}
.Living-lists .Living-item .Living-imfo .title {
font-sizw: 13px;
color: #000000;
}

.Living-lists .Living-item .Living-imfo .paeagraph
font-size: 13px;
color: #404040;
line-height: 20px;
}
.Living-lists .Living-item .Living-imfo date-wtap .source, .Living-lists .Living-item .Living-imfo date-wtap .date {
font-size: 12px;
color: #505050;
}
.Living-lists .Living-item .Living-imfo date-wtap .date {
color: grey;
}
.Living-lists .Living-item .Living-imfo date-wtap .date:before {
content: '-';
}

.Living-lists .Living-item:hover {
background-clor: pink;
}

.Living-lists .Living-item a:hover .Living-imfo .title {
text-decoration: underline;

2) 학습내용 중 어려웠던 점
어려웟던 점이요? 어려운건 없었는데 이해가 조금 안되긴 했죠..
3) 해결방법
해결방법은 뭐.. 제가 열심히 해야죠, 복습에 복습을 하고 제 조그마한 뇌 저장용량으로 열심히 이해해보겠습니다.
4) 학습소감
하루 학교수업을 원격으로 들으며 강의를 들으니까 이게 사람이 할 짓인가? 라는 생각이 들었습니다.. 강의 들으면서 아 진짜 이거 뭐지? 뭔데 날 머리 터지게 하지? 라는 생각이 잔뜩 들었어요.