july, 1 (1)

Jiwon Park·2021년 7월 1일

css의 가상선택자

1) 행동과 관련된 디자인을 삽입하는 가상 선택자
: 선택한 요소의 행동과 규칙에 의해서 디자인을 적용하는 방식

이미 css에서 만들어놓은 효과 적용
link) 이미 방문한 적이 있는 곳에서 링크 적용할때 쓰는 가상선택자

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

</body>
</html>

css>
a:link {color: red;}

a:active {color: blue;}

클릭상태 유지하면 파란색, 마우스 떼면 레드
-> active 라는 가상선택자 사용 


* 마우스 올릴때 폰트 색상 
-> hover 라는 가상선택자 사용
ex) a:hover {color: pink;}
* focus (보통 input 태그와 결합)

html)
<a herf="http://www.naver.com/">
	네이버
</a>

<input type="text">

</body>
</html>

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

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

html) 

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





</body>
</html>

css)

li:first-child{color: red;}    : 첫번째 list
li:last-child{color: blue;}   : 마지막 list
li:nth-child(2n + 1) {color: gray;} : 홀수 list
li:nth-child(2n) {color: gray;} : 짝수

before-after

: 글자를 중심으로 앞쪽과 뒷쪽 사이에 내용물을
강제적으로 삽입시킬 수 있다.

주로

이렇게 넣을 때 사용

ex)


* html

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

 </ul>


 </body>
</html>

*css

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

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

프로젝트 폴더 설정 방법

(폴더명: project로 설정했음)

홈페이지 만들때 주로 imag, html, css 로 주로 만드는데
지금은 한 폴더 안에 넣지만 홈페이지 하나 만드는데
페이지가 늘어날 수록 html, css 문서 양도 많아진다.
보통 페이지 하나에 img도 2-30개는 넘어가는데
그 많은 문서들이 한 폴더에 모여있으면 가독성이 떨어지고
관리가 어려워진다. 보통 홈페이지 만들때는
폴더 안 img / css / 따로 나눠서 관리하는 게 수월.

html)


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

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

<h1>Hello World</h1>

</body>
</html>

주의)

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

폴더 새로 만들었으므로 경유해야함-> 폴더명을 입력해서
파일을 연동 시켜야함 : href="css/style.css" 기입

경로설정해서 이미지 넣기 :
style.css 폴더 가 기준점, 기준점으로 해서 밖으로 나와야 함(../ 입력) -> img 폴더에 있는 icon.png를 선택해야 함(/img/icon.png)
background-imag:
url(../img/icon.png)}

작업한 결과물을 서버로 올려서 도메인주소로 확인하는 방법

실무에서는 카페24. 등 호스팅업체에 결제해서 호스팅업체에서 제공하는 서버에 파일을 업로드 해야함. 금전적 비용이 듦. 무료로 사용할 수 있는 사이트 : 닷홈, dothome.co.kr 가입

FTP: pc 에서 작업해놓은 결과물을 서버에 올릴때
터널역할. id / db 번호 잊어먹지마..
cm5 자동설치는 설치 안함 으로 / 도메인 받았당!

파일질라 filezilla -> FTP 중 하나

Client용 다운 했당

호스트: (http:// 제외한!)도메인 입력
사용자명/pw : FTP ID / pw
포트 : 21

업로드 후 도메인 새로고침 하면 작업물 나옴

이전에 했던 카카오 리스트에 디자인 입히는 작업)

다시 어렇게 들어가서~

html 코드로 설계도면 진행했었던 요고
여기서 친구 리스트만 나오는 실습 할거햩!

요롷게 카카오 폴더 지정해서 다시 만들고~

TIP! html 기본구조 더 빨리 완성 시키는 법

하고 엔터 치면

(챠락)

kakao 폴더 안에 css 폴더 넣고, 분할 챠락 (분할 하는 법은 내가 잊어버릴까봐 올림)

그다음 html에 연동하긧

연동 확인은 style.css에 요롷게 해주고

index.html 확인 해보면!!!!!!!!!!

으악 눈이 아픈게 아주 정상적으로 연동이 잘됐음을 확인 할 수 있음.
(눈아프니까 작은 사진,,)

이제 다시, 카카오 친구 리스트 나타나는 설계도면 작업 할 것

<ul> : 각각의 친구리스트는 동급정보이기 때문에 <ul> tag 사용
<li>   </li>
</ul>
<a href="#"></a> : 친구리스트들은 클릭했을 때 특정 페이지로 넘어가야 하기 때문에 
a 태그를 안쪽에 넣어보았읍니다.. 

카톡 친구 목록은 이미지가 있고, 친구명과 친구소개 들어있는 곳이 오른쪽에 배치되어있음. 이미지영역을 넣어보기로->  img 태그를 이용해서 div 태그로 감싸고, 
친구 이름은 <h3>박지원</h3>, 친구 소개는 <span>Jiwon Park</span>