210701

JunYeupKwon·2021년 7월 1일

개발일지 대구AI스쿨

대구ai스쿨

목록 보기

5/48

강의

1:43:00부터

1. CSS가상선택자

선택한 요소에 어떠한 행동과 규칙에 의해서 디자인이 적용 되는거

`:` 사용

1.:link``:active``:hover

링크를 처음사용할때 하는것 :link사용
```
a:link {
		color: red;}
```
마우스를 클릭하고 있을동안 색변경 :active
```
a:active {
		color: blue;}
```
마우스오버 했을때 색변경 :hover
```
a:hover {
		color: pink;}
```
2.:focus
클릭시 발동 :focus
```
input:focus{
		border: solid 10px red;}
```
3.:child
첫째:first-child ,첫번째꺼만 색변경
```
li:first-child{
		color: red;}
```
마지막꺼만변경은 :last-child
```
li:last-child{
		color: blue;}
```
지정위치변경은 :nth-child(#) #에는 숫자부여
```
li:nth-child(2){
		color: gray;}
```
홀수만 하고싶다:nth-child(2n+1)
짝수는 :nth-child(2n)
4. :before,:after
:before랑 :after는 글자를 중심으로말그대로 앞뒤에 붙음
```
li:before{
		content: "***";}
```
```
li:after{
		content: "---";}
```
- 저기에 문자값을 넣을수도있지만 결국엔 디자인(정보X)

2. 폴더경로 지정

1. `/`

항상 기준은 index파일기준
```
<link rel="stylesheet" type="text/css" href="css/style.css">
```
- css폴더안에 있는 css파일을 가져옴 / 폴더한개드갈때
css에서 이미지 가져오기
2. ../
```
div{
		width: 300px;
		height: 300px;
		background-image: url(../img/icon.png);}
```
- ../폴더한개를 나온단의미 여기서 기준은 css파일

3. 서버에 올려서 도메인확인

일단 무료로 사용할수있는곳

4. 카카오 실습

html

<!DOCTYPE html>
		<html>
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" type="text/css" href="css/style.css">
		</head>
		<body>
			<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>
			<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>
		</body>
		</html>

CSS

		.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;}

5. 네이버 실습

오늘읽을만한글 리빙부분

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">유리병에 남은 끈적이 세척하는 법</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 Nice to meet you</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="living-thumnail">
			<div class="living-info">
				<span class="type">리빙</span>
				<h3 class="title">파리 벼룩시장에서 사 온 소품들</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 Nice 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;}
		.living-lists .living-item .living-info .type {
		color: #c08d31;
		font-weight: 700;
		font-size: 12px;}
		.living-lists .living-item .living-info .title {
		color: #000000;
		font-size: 13px;
		font-weight: bold;}
		.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;}

2. 어려웠던거

화면이 너무작다.
가면갈수록 참고하고 봐야하는창이 많아져서 어지럽다

3. 해결법

머 잘정리해보자
흠..

4. 소감

소감이 머있어 어렵지 ㅠ
첨하는건데,,
그래도 처음에 할때보다는 먼가 결과물이 조금씩 그럴듯하게 나온다는게 신기하다

Git

JunYeupKwon

이전 포스트

210630

다음 포스트

210701

대구ai스쿨

강의

1. CSS가상선택자

`:` 사용

1.:link``:active``:hover

2.`:focus`

3.`:child`

4. `:before`,`:after`

2. 폴더경로 지정

1. `/`

2. `../`

3. 서버에 올려서 도메인확인

4. 카카오 실습

5. 네이버 실습

2. 어려웠던거

3. 해결법

4. 소감

Git

210630

210702

0개의 댓글

관련 채용 정보

210701

대구ai스쿨

강의

1. CSS가상선택자

: 사용

1.:link``:active``:hover

2.:focus

3.:child

4. :before,:after

2. 폴더경로 지정

1. /

2. ../

3. 서버에 올려서 도메인확인

4. 카카오 실습

5. 네이버 실습

2. 어려웠던거

3. 해결법

4. 소감

Git

210630

210702

0개의 댓글

관련 채용 정보

`:` 사용

2.`:focus`

3.`:child`

4. `:before`,`:after`

1. `/`

2. `../`