7월 1일 목

태그를 중간에 잘못 닫아두어서 연결이 되지 않았다. 역시나 휴면에러였다.

학습 소감
오늘 수업도 이해하는데는 크게 문제가 없었다. 중간 중간에 오류가 있어서 스트레스가 받는 구간이 2번 있기는 있었다. 한 번은 파일질라에서 FTP와 웹 서버를 연결 할 때와 css코드가 div태그 실수로 적용되지 않는 문제를 찾아내는 것에서 스트레스를 받았다. 프로그래머를 모르는 사람들이 볼 때는 타이핑을 엄청 치면서 작업하는 마치 영화속 해커 같은 모습을 생각한다고 한다. 나도 그중 하나였다. 하지만 코딩이라는 것은 오늘 겪었던 것 처럼 오류를 찾는 시간이 제법 많은 것 같다. 실제 강사님도 그런 경우가 많기 때문에 복붙 기능을 주로 사용하신다고 한다. 그래서 앞으로 코딩을 할 때 처음 부터 세심하게 주의를 기울여야 할 것 같다.

소스파일을 실행한 결과 첨부

네이버

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

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

</ul>

a: link { color: green; }

a:active {
color: blue;
}

a:hover {
color: pink;
}

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

Li:first-child {
color: red;
}

li:last-child {
color: blue;
}

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

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

li:after {
content: --- ;
}

---

<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>

	<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">Minho Lee</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;
color: #c8c8c8;
}

/ Custom /
.friends-lists .friends-list a .friend-info .friend-name {
font-size: 20px;
color: red;
}

---

<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 안녕하세요 반가워요
					동해물과백두산이마르고닳도록하느님이보우사하사
					우리나라만세 무궁화삼천리화려강산 하느님이보우하사
					우리나라만세</p>
			
							
				<div class="date-wrap">
					<span class="source">유니크</span>
					<span class="date">3개월 전</span>
				</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 안녕하세요 반가워요
					동해물과백두산이마르고닳도록하느님이보우사하사
					우리나라만세 무궁화삼천리화려강산 하느님이보우하사
					우리나라만세</p>
			
								
			
				<div class="date-wrap">
					<span class="source">miju</span>
					<span class="date">1개월 전</span>
				</div>
			</a>
	</li>
</ul>

.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:brfore {
content: '-';
}

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

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