학습한 내용
index.html
<a href="https://www.naver.com/">
네이버
</a>
<input type="text">
<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>
- 메뉴 1
- 메뉴 2
- 메뉴 3
- 메뉴 4
- 메뉴 5
- 메뉴 6
- 로그인
- 회원가입
- 회사소개
- 고객센터
<a href="https://www.naver.com/">
네이버
</a>
<input type="text">
<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>
project.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>
<div></div>
<img src="img/icon.png">
</body>
</html>style.css
h1 {
color: red;
}
div {
width: 300px;
height: 300px;
background-image: url(../img/icon.png);
}kakao
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-thumbnail">
<div class="friends-info">
<h3 class="friends-name">김민호</h3>
<span class="friends-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="friends-info">
<h3 class="friends-name">박지연</h3>
<span class="friends-intro">다정한 사람</span>
</div>
</a>
</li>
<li class="friends-list">
<a href="#">
<img src="https://via.placeholder.com/50" class="friend-thumbnail">
<div class="friends-info">
<h3 class="friends-name">한성은</h3>
<span class="friends-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 .friend-thumbnail {
border: solid 2px gray;
border-radius: 20px;
}
.friends-lists .friends-list .friends-info .friends-name {
font-size: 20px;
color: #000000;
}
.friends-lists .friends-list .friends-info .friends-name {
font-size: 15px;
color: #c8c8c8;
}
/* Custom */
.friends-lists .friends-list .friends-info .friends-name {
font-size: 50px;
color: red;
}학습내용 중 어려웠던 점
코드가 많아지다보니 그것들을 관리하고 한번에 알아보기가 어려웠다.
해결방법
크롬브라우저에서 검사를 통해 사아트들을 직접보면서 익숙해질 필요가 있다.
학습소감
css를 더해 평상시 자주 접하는 카카오톡이나 네이버 등의 사이트들을 비슷하게 내 손으로 만들어 보는 것이 신기했다.
