Skip to content

Commit

Permalink
css practice: naver-living, kakao-friend-list
Browse files Browse the repository at this point in the history
  • Loading branch information
@YesolLee421
YesolLee421 committed Jul 8, 2021
1 parent 8ad060f commit a51d831
Show file tree
Hide file tree
Showing 8 changed files with 240 additions and 44 deletions.
3 changes: 3 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
resources/

egoing/
2 changes: 1 addition & 1 deletion EX/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ <h3>About</h3>
<video src="sample.mp4" controls autoplay muted
loop width="400px" height="300px"></video>


<!--
iframe
- html 파일 안에 새로운 페이지 생성
Expand Down
72 changes: 68 additions & 4 deletions kakao/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.friends-lists {
/* .friends-lists {
list-style: none;
}
Expand All @@ -7,7 +7,6 @@
text-decoration: none;
}
/* border-radius 50% = 원형 */
.friends-lists .friends-list a .friend-thumbnail {
border: solid 2px gray;
border-radius: 20px;
Expand All @@ -23,10 +22,75 @@
color: #c8c8c8;
}
/* Cascading 연습 */
/* Custom */
.friends-lists .friends-list a .friend-info .friend-name {
font-size: 30px;
color:blueviolet;
}
*/

html, body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}

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

header {
box-sizing: border-box;
width: 100%;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right:20px;
background-color: white;
}

.header-menu li {
display: inline-block;
vertical-align: middle;
}
.header-menu li a img {
border-radius: 50%;
}

.border-line {
border: dashed 1px #ededed;
width: 95%;
opacity: 0.5;
}
.profile {
height: 70px;
box-sizing: border-box;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
}
.profile:hover {
background-color: #ededed;
}
.profile a .friend-thumbnail {
border-radius: 20px;
margin-right: 10px;
}
.profile a .friend-thumbnail,
.profile a .friend-info {
display: inline-block;
vertical-align: middle;
}

.profile a .friend-info h3 {
margin: 0;
}



121 changes: 96 additions & 25 deletions kakao/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,38 +10,109 @@
</head>
<body>

<ul class="friends-lists">
<li class="friends-list">
<a href="#">
<img src="https://via.placeholder.com/50" alt="" class="friend-thumbnail">
<header>
<h1>친구</h1>
<ul class="header-menu">
<li>
<a href="#">
<img src="https://via.placeholder.com/25" alt="">
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/25" alt="">
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/25" alt="">
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/25" alt="">
</a>
</li>
</ul>
</header>

<div class="friend-info">
<h3 class="friend-name">김민호</h3>
<span class="friend-intro">Minho Kim</span>
</div>
</a>
</li>
<li class="friends-list">
<main role="main">
<div class="profile">
<a href="#">
<img src="https://via.placeholder.com/50" alt="" class="friend-thumbnail">
<img class="friend-thumbnail" src="https://via.placeholder.com/50" alt="">

<div class="friend-info">
<h3 class="friend-name">박지연</h3>
<span class="friend-intro">다정한 사람</span>
<h3 class="friend-name">지은</h3>
<span class="friend-intro">Inspiring day</span>
</div>
</a>
</li>
<li class="friends-list">
<a href="#">
<img src="https://via.placeholder.com/50" alt="" class="friend-thumbnail">
</div>

<div class="friend-info">
<h3 class="friend-name">한성은</h3>
<span class="friend-intro">헤헷</span>
</div>
</a>
</li>
</ul>
<hr class="border-line" noshade>

<ul class="friends-lists">
<li class="friend profile">
<a href="#">
<img class="friend-thumbnail" src="https://via.placeholder.com/50" alt="">

<div class="friend-info">
<h3 class="friend-name">김민호</h3>
<span class="friend-intro">Minho Kim</span>
</div>
</a>
</li>
<li class="profile">
<a href="#">
<img src="https://via.placeholder.com/50" alt="" class="friend-thumbnail">

<div class="friend-info">
<h3 class="friend-name">박지연</h3>
<span class="friend-intro">다정한 사람</span>
</div>
</a>
</li>
<li class="profile">
<a href="#">
<img src="https://via.placeholder.com/50" alt="" class="friend-thumbnail">

<div class="friend-info">
<h3 class="friend-name">한성은</h3>
<span class="friend-intro">헤헷</span>
</div>
</a>
</li>
<li class="profile">
<a href="#">
<img src="https://via.placeholder.com/50" alt="" class="friend-thumbnail">

<div class="friend-info">
<h3 class="friend-name">한성은</h3>
<span class="friend-intro">헤헷</span>
</div>
</a>
</li>
<li class="profile">
<a href="#">
<img src="https://via.placeholder.com/50" alt="" class="friend-thumbnail">

<div class="friend-info">
<h3 class="friend-name">한성은</h3>
<span class="friend-intro">헤헷</span>
</div>
</a>
</li>
</ul>
</main>

<footer>
<nav>
<ul>
<li></li>
</ul>
</nav>
</footer>



</body>
</html>
58 changes: 47 additions & 11 deletions naver/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,61 @@
.living-lists {
list-style: none;
html, body {
margin: 0;
padding: 0;
}

.living-lists .living-item a {
a {
color: #000000;
text-decoration: none;
}
ul {
list-style: none;

}

.living-item {
width: 750px;
padding-top: 5px;
padding-bottom: 5px;
}

.living-lists .living-item a .img-box {
width: 170px;
height: 114px;
overflow: hidden;
}

.living-lists .living-item a .img-box img {
width: 100%;
transition: transform 0.1s linear;
}

.living-lists .living-item:hover a .img-box img{
transform: scale(1.1);
}

.living-lists .living-item a .img-box,
.living-lists .living-item a .living-info {
display: inline-block;
vertical-align: middle;
}

.living-lists .living-item a .living-info {
max-width: 550px;
}

.living-lists .living-item .living-info .type {
color: #c08d31;
font-weight: 700;
font-size: 12px;
}

.living-lists .living-item .living-info .title,
.living-lists .living-item .living-info .paragraph {
margin: 0;
margin-bottom: 10px;
}

.living-lists .living-item .living-info .title {
font-size: 13px;
font-size: 15px;
color: #000000;
}

Expand All @@ -23,19 +64,14 @@
text-decoration: underline;
}

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

/* line-height = 글자간 위아래 간격 */
.living-lists .living-item .living-info .paragraph {
line-height: 20px;
font-size: 13px;
color: #404040;
}

.living-lists .living-item .living-info .date-wrap .source,
.living-lists .living-item .living-info .date-wrap .date {
.living-lists .living-item .living-info .date-wrap {
font-size: 12px;
color: #505050;
}
Expand Down
10 changes: 8 additions & 2 deletions naver/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@
<ul class="living-lists">
<li class="living-item">
<a href="#">
<img src="https://via.placeholder.com/170x114" alt="" class="living-thumbnail">
<div class="img-box">
<img src="../resources/bedroom1.jfif" alt="">
</div>

<div class="living-info">
<span class="type">리빙</span>
<h3 class="title">30평대 아파트, 따뜻한 느낌의 침실</h3>
Expand All @@ -26,7 +29,9 @@ <h3 class="title">30평대 아파트, 따뜻한 느낌의 침실</h3>
</li>
<li class="living-item">
<a href="#">
<img src="https://via.placeholder.com/170x114" alt="" class="living-thumbnail">
<div class="img-box">
<img src="../resources/bedroom2.jfif" alt="">
</div>
<div class="living-info">
<span class="type">리빙</span>
<h3 class="title">아이 있는 집 주방 1년 간의 소소한 변화</h3>
Expand All @@ -43,6 +48,7 @@ <h3 class="title">아이 있는 집 주방 1년 간의 소소한 변화</h3>
</li>

</ul>


</body>
</html>
9 changes: 9 additions & 0 deletions project_animation/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,3 +222,12 @@ animation-fill-mode: backwards(0% 기준으로 화면 보여줌)
margin-left: 200px;
}


.parent {
margin-top: 200px;
margin-left: 200px;
width: 300px;
height: 300px;
border: solid 10px black;
}

9 changes: 8 additions & 1 deletion project_animation/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,14 @@ <h2>Title</h2>
코드 소스: https://codepen.io/trending
-->
<!-- <div class="animate__animated animate__tada animate__repeat-3">Example</div> -->

<!-- <div class="parent">
<div class="animate__animated animate__hinge animate__repeat-3">Example</div>
</div> -->







Expand Down

0 comments on commit a51d831

Please sign in to comment.