오늘 학습한 내용
✅ 가상선택자
✅ 프로젝트에 폴더를 설정하는 법
✅ 서버에 올려서 도메인 주소로 확인하는 법
✅ 카카오 친구 리스트에 디자인 입히기(실습)
✅ 네이버 리빙 게시판에 디자인 입히기(실습)
1. 가상 선택자
가상 선택자란 선택한 요소에 어떠한 행동과 규칙에 의해서 디자인을 적용하는 방식이다.
종류는 크게 두가지로 나누면 행동과 관련된 디자인의 가상 선택자와 일정한 규칙을 바탕으로한 디자인의 가상 선택자이다.
- 행동과 관련된 디자인의 가상 선택
👉 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;
} /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: blue;
}
li:nth-child(2n+1) {
color: gray;
}
li:nth-child(2n){
color: orange;
}👉 결과물
- after, before 가상 선택자
👉 html
<ul>
<li>로그인</li>
<li>회원가입</li>
<li>회사소개</li>
<li>고객센터</li>
</ul>👉 css
li:before {
content: "|";
}
li:after {
content: "---";
}👉 결과물
2. 프로젝트에 폴더를 설정하는 방법
이미지는 이미지 폴더안에, css는 css폴더 안에 따로 지정을 해야 나중에 유지보수를 할 때 편하고 무엇보다 작업을 할 때 가독성이 좋다.
- css에서 img를 불러올 때에는 css 파일에서 나가서 img 파일로 들어가야 하므로 코드를 칠때 ../를 치고 그다음 img 파일을 들어가기 위해 ../img/파일이름명을 친다.(ex. background-image: url(../img/icon.png);)
👉 파일 정리
👉 html
<!DOCTYPE hml>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Hello World!</h1>
<div></div>
<img src="img/icon.png">
</body>👉 css
h1 {
color: red;
}
div {
width: 300px;
height: 300px;
background-image: url(../img/icon.png);
}👉 결과물
3. 서버에 올려서 도메인 주소로 확인하기
- 닷홈 https://www.dothome.co.kr/
- 무료 호스팅 개설: starthome.dothome.co.kr
- filezilla 설치: https://filezilla-project.org/
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-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;
}
.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;
}👉 결과물
5. 네이버 리빙 게시판에 디자인 입히기(실습)
👉 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">유리병에 남은 끈적이 세척하는 법</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="living-thumbnail">
<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">3주일 전</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; // 글자간의 간격을 조정하는 css 속성
}
.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-item 영역에 마우스를 올리면 배경화면 색상이 핑크가 된다.
}
.living-lists .living-item a:hover .living-info .title {
text-decoration: underline; // living-item의 a영역에 마우스를 올리면 title 제목에 밑줄이 그어진다.
}
👉 결과물
오늘의 학습 후기(어려웠던 점, 개선할 점)
오늘은 3일동안 배웠던 html, css를 이용해서 저번에 html구조만으로 만들었던 카카오와 네이버 게시물 실습에 디자인을 입히는 연습을 했다. 그리고 닷홈의 무료 호스팅을 이용해서 도메인을 생성 한 후에 파일질라를 통해 파일을 직접 업로드 하여 도메인을 통해 확인하는 과정을 했다. 학습을 하면 할수록 배웠던 내용을 응용하고 넓혀가는 과정이 재미있고 다음 실습이 기대가 된다. 오늘 어려웠던 점은 크게 없었고 html, css의 재미를 맛😋보고 있다!
하루하루 성장하는 것을 목표로 합니다🌟