1.학습 내용

가상선택자

가상선택자란? 선택한 요소에 어떤 행동과 규칙에 의해서 디자인을 적용시키는 방식.

가상선택자를 지정하기전 id,class,type 선택자를 이용하여 html문서에 접근해야한다.

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

1. link (방문한적이 없는 링크에 대해서 디자인적용)

2. active

3. hover

4. focus (input태그와 자주 결합)

네이버 글자는 빨간색(link), 링크를 클릭한상태로 누르고있으면 파란색(active), 마우스를 올리고있으면 핑크색(hover), 그리고 input태그 클릭시 주변활성화(focus)에 10px 빨간줄

html
<a href="https://www.naver.com">네이버</a>
<input type="text">

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

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

1. first-child 여러 자식 중 첫번째 자식에게 적용

2. last-child 여러 자식 중 마지막 자식에게 적용

3. nth-child() ()안에 들어가는 숫자의 자식에게 적용

3-응용. nth-child(2n+1): 홀수의 자식에게 적용

nth-child(2n): 짝수의 자식에게 적용

그외

1. before 글자와 태그사이 공간

2. after 글자와 받침태그사이 공간(content 속성과 결합해) 글자 입력가능

여기서 주의할점 : 여기서 글자는 디자인만 들어가는 것이지 정보가 아님

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

css
li:first-child {
	color: red;
}
li:last-child {
	color: blue;
}
li:nth-child(2n) {
	color: gray;
}
li:before {
	content:"***";
}
li:after {
	content: "---";
}

project 관련

실제 홈페이지를 만들때는 css파일 여러개 html 파일 20개이상, 수십개의 이미지 파일을 사용하는 경우도 있다. 그럴경우 하나의 폴더안에 있으면 관리도 어렵도 가독성도 떨어진다. 그래서 실무에선 css,js,img라 폴더를 나누어서 관리한다.

폴더로 이동시킬경우 링크시킬때 주의점(작성하고있는 문서기준으로 생각)

1. html에서 css폴더에있는 style.css를 링크시킬때 /로 폴더를 구분

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

2. css에서 img를 불러올때 (.. : 뒤로가기)

background-image: url(../img/icon.png);

홈페이지를 작업한다음 실무에서는 호스팅업체에서 제공하는 서버에 올리지만 연습단계에서는 무료로 사용하는 걸 실습해보았다.

ftp? pc결과물을 서버에 올릴때 터널역활

파일질라 : local - server 사이의 ftp 터널 중 하나

카카오톡 친구창 실습

모든영역에 class를 넣을필요는 없으나 오늘 배운걸 써먹기위해 넣음

일단 동등하니까 ul-li 시작 - a태그로 사진넣고 사진옆에 영역 하나를 만들기(중복되는 내용 제외)

class 경로를 적을때 짧게 적어도되지만 연습삼아 다적음

1. css쪽에서 일단 ul태그때문에 생기는 점을 제거(list-style : none)

2. 파란색 언더바(a 태그는 태생적으로 언더바색깔이 파란색) 삭제 (text-decoration)

3. 이미지 사이드 둥글게 원형으로 만들고싶으면 radius 50%해주면됨

4. 기존 코드를 유지시키면서 수정하고 싶으면 캐스캐이딩을 이용해 수정

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

css
.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: 50px;
	color: red;
}    

꿀팁

자기가 만든 사이트 - 오른쪽 검사를 통해 오류부분 추측가능

네이버- 리빙 만들어보기

특이한점은 유닛 3개월전을 div로 감쌋다는 점 그외는 예전 실습과비슷

lineheight는 글자간의 간격을 지정할때 쓰는 css 속성

네이버에서 검사를 해볼 때 fontsize가 없는 경우가 있다 이경우는 body 쪽을 보면 적혀있고 그 body에서 fontsize를 그대로 상속받았다고 할 수 있다.

새롭게 쓰인 것은 a태그에 마우스를 올렸을때 밑줄이 나타남

.living-lists .living-item a:hover .living-info .title {text-decoration: underline; 이 코드를 해석하자면 living item 밑에 a태그에 마우스를 놓았을 때 title 클래스에 밑줄이 가게해라

밑에는 응용으로 li 태그에 마우스를 놓았을때 전체배경화면을 핑크로 해라

html
<ul class="living-lists">
	<li class="living-item">
		<a href="#">
			<img src="https://via.placeholder.com/170X114" class="living-thumnail">
				<div class="living-info">
				<span class="type">리빙</span>
					<h3 class="title">30평대 아파트, 따뜻한 느낌의 침실</h3>
					<p class="paragraph">Nice to meet youNice to meet youNice to meet youNice to meet you</p>
					<div class="date-wrap">
						<span class="source">유닛</span>
						<span class="date">3개월 전</span>
					</div>


				</div>
		</a>
	</li>
</ul>

css
.living-lists {
	list-style: none;
}
.living-lists .living-item a {
	color: #000000;
	text-decoration: none;	
}
.type {
	color : #c08d31;
	font-weight: 700;
	font-size: 12px;
}
.title {
	font-size: 13px;
	color: #000000;
}
.paragraph {
	font-size: 13px;
	color: #404040;
	line-height: 20px;
}
.source,.date {
	font-size: 12px;
	color: #505050;
}
.date {
	color: grey;
}
.date:before {
	content: '-';
}

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

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

2. 학습 중 어려웠던 점

일단 링크가 자꾸 안되어서 멘탈이 부서졌던 것 같다. 인터넷에서 새로고침도 해보고 캐시도 제거해보고 근데 결국은 사람의 문제였던 것으로 밝혀졌다.

3. 해결방법

구글 검색을 통해 여러가지 방법을 해보았지만 해결되지않았고 처음부터 코드를 전부다 뜯어서 천천히 확인하여 문제를 해결하였다.

4. 학습소감

매일매일 새롭게 배우는게 재밌고 활용도가 높다고 느꼈다. 그리고 개발노트를 숙제확인장처럼 사용하고 내가 공부할 파일은 따로 만들고 메모장에 적어둔 노트를 저장하고 이런식으로 사용했는데 오늘 방식을 조금 바꿔보았다.
이 개발자노트를 보고 오늘 배운 내용 모두를 복습할 수 있도록 가독성과 방식을 바꾸어보았고 주말을 통해 공부해보고 이 방식을 계속 적용할지 생각해볼것이다.