오늘의 강의내용

가상 선택자에 대한강의

행동과 관련된 가상선택자

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

<!-- CSS언어 -->
a:link {
	color: yellow;
}

a:active {
	color: blue;
}

a:hover {
	color: pink;
}

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

link : 방문한적이 없는 링크에 대하여 디자인을 적용
active : 마우스로 링크를 클릭 하였을대 색상 변경
hover : 마우스를 올릴때 배경색상, 폰트 색상 변경
focus : 주로 input태그 와 같이 사용 되며, input클릭시 적용

일정한 규칙을 바탕으로 한 디자인

<!-- html언어 -->
<ul>
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
	<li>메뉴4</li>
	<li>메뉴5</li>
	<li>메뉴6</li>
</ul>

<!-- CSS언어 -->
li:first-child {
	color: red;
}

li:last-child {
	color: blue;
}

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

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

first-child : 첫번째 자식의 상태를 설정
last-child : 마지막 자식의 상태를 설정
nth-child() : 상태를 변화시키고 싶은 자식?을 ()안에 순서를 기입하여 설정
nth-child(2n) : 짝수의 자식만 상태를 설정
nth-child(2n + 1) : 홀수의 자식만 상태를 설정

<!-- html언어 -->
<ul>
	<li>로그인</li>
	<li>회원가입</li>
	<li>회사소개</li>
	<li>고객센터</li>
</ul>

<!-- CSS언어 -->
li:before {
	content: "***";
}

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

before : 글자를 입력 하였을때 열린태그와 글자사이 의 영역을 설정
content속성: 속성값에 삽입된 텍스트나 이미지 등을 화면에 출력
after : 글자를 입력 하였을때 닫힌태그와 글자사이 의 영역을 설정

-before, after 선택자 대표적 예시-

프로젝트의 폴더를 설정하는 방법

프로젝트의 폴더를 설정하는 이유는 나중에 유지보수 할때 용이하기 위함 과 파일을 더 쉽게 관리할수 있기 때문

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

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

	<h1>Hello World</h1>
    
<!-- CSS언어 -->
h1 {
	color: red;
}

위에 예제를 보면 html파일의 저장 폴더인 project_1 폴더 안에 css폴더, img폴더 를 만들어 각 폴더에 맞는 파일을 분리하여 저장 하였다.

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

이전 까지 와는 달리 폴더를 분리 하였기에, 불러오는 방식도 달라졌는데 위 소스코드에 link 태그로 css파일을 불러오는 위치 표기를 "css/style.css" 로 하여 css폴더 안에 style.css 파일을 가져오겠다는 뜻이다. 앞에 /기호가 '안에' 라는 뜻으로 이해하면 쉽다.

<!-- html언어 -->
<div></div>

	<img src="img/icon.png">

<!-- CSS언어 -->
div {
	width: 300px;
	height: 300px;
	background-image: url(../img/icon.png);
}

이번엔 이미지 파일을 각각 html에서 불러오는법, css에서 불러오는 법을 해보았다.

html언어에서 이미지 파일을 불러올때 에는 html파일이 있는
project_1폴더 를 중심으로 불러오는 방식이다.
위에 css파일을 불러오는 방법과 만찬가지로 "img/icon.png"형식이 된다.

반면 css파일에서 이미지 파일을 불러올때에는 css 폴더 밖에 이미지가 있기에 상위 폴더로 올라가야 하므로 (../img/icon.png) 이와같이 두개의점 으로 상위폴더로 올라간 다음 html방식과 같은 방법으로 작성후 불러올수있다.

작업한 결과물을 서버에 올린후 도메인주소 확인하기

https://www.dothome.co.kr/my/service/web/basic/detail.php
위에 마이 닷홈을 이용하여 무료 웹호스팅을 만든다.
https://filezilla-project.org/
그리고 다음 작업으로 파일 질라 을 설치하는데, 파일 질라는 ftp로서 로컬과 서버로 파일을 업로드 할때 쓰인다.

두작업 모두 그리 어렵지 않으니 쉽게 할수 있을것이다.

위 이미지는 파일질라 설치후 내컴퓨터 안에 있는 파일들을 서버로 옮긴 모습니다. 이작업 완료후 마이 닷홈에서 만든 도메인 주소로 파일을 올리는 작업이 완료 된다.

위 이미지가
나만의 도메인 주소에 오늘 작업한 파일을 업로드 한 모습이다.

카카오톡 이미지 리스트 만들기

<!-- html언어 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<ul class="friends-list">
		<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">헤헷</span>
				</div>
			</a>
		</li>
	</ul>


</body>
</html>

<!-- CSS언어 -->
.friends-list {
	list-style: none;
}

.friends-list .friends-list a {
	color: #000000;
	text-decoration: none;
}

.friends-list .friends-list a .friend-thumbnail {
	border: solid 2px gray;
	border-radius: 20px;
}
/*border-radius 값을 원형으로 하고 싶으면 속성값 을 50% 한다*/

.friends-list .friends-list a .friend-info .friend-name {
	font-size: 20px;
	color: #000000;
}

.friends-list .friends-list a .friend-info .friend-intro {
	font-size: 15px;
	color: #c8c8c8;
}

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

위에 예제는 class태그를 적극 활용한 예제이다.
class태그로 훨씬 유연하게 작업을 할수있었다.

네이버 리빙 카테고리 만들기

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

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

	<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 Nice to meet you Nice to meet you
					Nice to meet you Nice to meet you Nice to meet you
					Nice to meet you Nice to meet you Nice to meet you</p>

					<div class="date-wrap">
						<span class="source">유닠</span>
						<span class="date">3개월 전</span>
					</div>
				</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 Nice to meet you Nice to meet you
					Nice to meet you Nice to meet you Nice to meet you
					Nice to meet you Nice to meet you Nice to meet you</p>

					<div class="date-wrap">
						<span class="source">miju</span>
						<span class="date">1개월 전</span>
					</div>
				</div>

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



</body>
</html>

<!-- CSS언어 -->
.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:before {
	content: '-';
}

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


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

line-height : 글자 간 위아래 간격을 지정하는 css속성
가상 선택자 뒤에다가 또다른 선택자를 기입을 해주어도 된다.

작업시 honey tip

다른작업은 디자인이 적용이 되었는데 썸네일 부분만 디자인 적용이 안되어 있을때 개발자도구를 잘이용하여 오타가 난 부분이 없나 확인하기 용이하다.
위 이미지에 friend-thumbnail 에 고의로 오타를 내었다
모든 영역의 디자인이 적용 안되어 있을때, 정상적으로 기입이 되었을때 파일연동 (link태그) 부근에 오류가 있을 가능성이 있다.
원본코드를 남겨두고 custom코드를 이용시 나타내는 모습