210701 개발일지

📌 학습한 내용

1. CSS 가상 선택자

: 선택한 요소에 행동과 규칙에 의해서 디자인을 적용하는 방식

<행동과 관련된 디자인을 적용하는 가상 선택자>

• link : 방문한 적이 없는 링크에 대한 디자인 적용
• active : 클릭했을 시의 디자인
• hover : 마우스를 올렸을 시의 디자인 (클릭 전)
• focus : <input>태그와 주로 쓰임. 포커스를 뒀을 때의 디자인

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

a:link { color: red; }
a:active { color: blue; }
a:hover { color: pink; }
input:focus { border: solid 10px red;}

<일정한 규칙을 바탕으로한 디자인을 적용하는 가상 선택자>

• first-child : 가장 먼저 나오는 자식에게 디자인 적용
• last-child : 가장 마지막에 나오는 자식에게 디자인 적용
• nth-child(n) : n번째의 자식에게 디자인 적용(홀수 = 2n + 1 / 짝수 = 2n)

<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:nt-child(2) {color: gray; }

<before & after>

• before - <열린태그>와 텍스트 사이에 내용 삽입
• after - <단힌태그>와 텍스트 사이

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

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

2. 프로젝트 폴더 구성

• <link> 이용해서 html과 css 연동 (index.html 파일을 기준으로)

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

• 기준점에서 부터 나가야 할 때, ..이용 -> ../폴더이름/파일이름
• 폴더 이름을 차례대로 넣어줌.

3. 서버에 업로드

STEP
1. dothome(https://www.dothome.co.kr/)에서 회원가입 후 호스팅 셋팅 (이때 FTP는 기본적으로 제한되어 있으므로 '접속혀용'으로 변경)
2. filezilla(https://filezilla.softonic.kr/) 무료 FTP(File Transfer Protocol) 소프트웨어 설치 후 다운로드
3. filezilla 실행 후 dothome에서 생성된 도메인 주소를 이용해 로컬에서 서버로 html 파일과 관련파일 업로드

4. CSS 실습

(1) 카카오톡 친구 리스트

<ul class="friends-lists">
   <li class="friends-list">
      <a href="#">
         <img src="https://via.placeholder.com/50" class="friend-thumnail">
        
         <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-thumnail">

		 <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-thumnail {
	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: 50px;
	color: red;*/ -> 결과창에 실행x, 캐스캐이딩 연습

(2) 네이버 리빙 탭

<ul class="living-lists">
		<li class="living-item">
			<a href="#">
				<img src="https://via.placeholder.com/170x114" class="lving-thumnail">
				<div class="living-info">

					<span class="type">리빙</span>
					<h3 class="title">유리병에 남은 끈적이 세척하는 법</h3>
					<p class="paragraph">오아시스 마켓에서 주문했던 한라봉 쨈이랑 생강차를 다 먹었어요. 다 먹고나니 생긴 유리병 2개. 하나는 큰 사이즈, 다른 하나는 작은 사이즈 인데요. </p>

					<div class="date-wrap">
						<span class="source">톡톡밍차</span>
						<span class="date">2개월 전</span>
					</div>
				</div>
			</a>
		</li>
		<li class="living-item">
			<a href="#">
				<img src="https://via.placeholder.com/170x114" class="lving-thumnail">
				<div class="living-info">

					<span class="type">리빙</span>
					<h3 class="title">파리 벼룩시장에서 사 온 소품들</h3>
					<p class="paragraph">파리 방브벼룩시장에서 사 온 빈티지 소품 #빈티지소품 #앤틱소품 #빈티지수집 #파리방브벼룩시장</p>

					<div class="date-wrap">
						<span class="source">주부하루</span>
						<span class="date">3주일 전 </span>
					</div>
				</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: 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;

}

• font-weight : 폰트 두께
• line-height : 줄 간격

📌 학습 중 어려웠던 점

1. 로컬에서 작업한 프로젝트를 서버로 올리는 실습

📌 해결방법

유튜브와 웹서치를 통한 코딩 기본과 개념을 더 확실히 잡아야겠다. 수업시간 중에는 강사님을 따라 쉽게 연결되었지만 아직까지 혼자 힘으로는 정확한 개념과 그 원리를 파악하기 어렵다.

📌 학습소감

html과 css은 어려운점 없이 잘 따라가고 있다. 하지만 FTP와 같은 일반적인 개념이 나오면 '이게 뭐였지?'하는 순간이 아직 종종 있어, 개인적으로 프로그래밍 책과 웹서치를 통해 기초를 다져야겠다.😂