210701 개발일지

JANE Jeong·2021년 7월 1일

CSS html 가상선택자 대구AI스쿨 웹프로그래밍

대구 AI 스쿨

목록 보기

4/51

📌 학습한 내용

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 : 줄 간격