1) July,1 (1) 에서 진행했던 리스트 앞부분을 보면 이름 앞에 점이 있는데,
이것은 ul 태그 때문에 생기는 것. 제거해 보자.
.friends-lists {list-style: none;}
2) a 태그는 태생적으로 글자에 언더바가 들어가있고,
글자 색상이 파란색인 css 유전자가 들어있다. 파란색 바꾸려면 기본 속성을 바꿔야 한다.
언더바 제거 + 파란글자 제거 하기
(처음으로 #000000 헥사코드 넣어보았다)
.friends-lists .friends-lists a{
color: #000000;
text-decoration: none;}(짠)
3) 카카오 처럼 이미지 라운드 처리하기
.friends-lists .friends-lists a .friends-thumbnail{
border: solid 2px gray;
border-radius: 20px;}border=테두리, solid=실선, gray=테두리 색, border-radius=테두리 둥글게
적용하면!
데헷 s2
border-radius: 20px 로 해서 살짝 네모동그라미인데
정확한 원형으로 하고싶으면 border-radius: 50px 하도록 하자
4) 글자 크기와 색상 바꾸기
이렇게 이름과 소개 색상에 변경 가능하다.
카카오톡과 관련된 기본적인 설계 끝.
5) 캐스케이딩 적용
ex) 친구 이름을 빨간색으로 바꾸고 글자크기도 50px로 바꾸고 싶다.
: 코드를 변경해도 되지만, 기존코드 그대로 두고
.friends-lists .friends-lists a .friend-info .friend-name {
font-size: 20px;
color: #000000;}
.friends-lists .friends-lists a .friend-info .friend-intro {
font-size: 15px;
color: #c8c8c8;}
/* Custom */
.friends-lists .friends-lists a .friend-info .friend-name {
font-size: 50px color: red;}
이런식으로 원본코드를 유지한 상태에서 오늘 배웠던 캐스케이딩을 활용해 디자인을
덮어씌울 수도 있다.
여기서 팁!
디자인을 정상적으로 적용했을 시,
다른부분은 정상적으로 적용 됐는데 썸네일 디자인 적용이 안됐을 경우
개발자 도구로 확인 및 수정 가능
파일 경로, 파일명 잘못 입력했을 때 css 주로 효과적용 안될 수 있으니 주의
ex)
<link rel="stylesheet" type="text/css" href="css/style.css">캐스케이딩 코드 확인 및 설명
줄 그어져 있는 이유 ?
style.css:1가 (css의 15번째 줄에 있는 코드) font size: 20px, color: #0000000 검정색이였는데 style.css:26 (css의 26째 줄에 있는 코드)에 덮어씌워졌다고 크롬 브라우저에서 알려주는 것. 검사로 쉽게 알 수 있다!
5) 네이버 리빙도면 설계작업
코드를 입력<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<ul class="living-list">
<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 youNice 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 class="living-list">
<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 youNice 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-list {list-style: none;}
.living-list .living-item a {
color: #000000;
text-decoration: none;}
.living-list .living-item .living-info .type{
color: #c08d31;
font-weight: 700;
font-size: 12px;}
.living-list .living-item .living-info .title{
font-size: 13px;
color: #000000;}
.living-list .living-item .living-info .paragraph {
font-size: 13px;
color: #404040;
line-height: 10px;
}
.living-list .living-item .living-info .date-wrap .source,
.living-list .living-item .living-info .date-wrap .date
{ font-size: 12px; color: #505050; }
.living-list .living-item .living-info .date-wrap .date
{color: grey;}
.living-list .living-item .living-info .date-wrap .date:before
{ content: '-'; }
.living-list .living-item:hover {
background-color: pink;
}
.living-list .living-item a:hover .living-info .title {
text-decoration; underline;}6) 네이버 리빙도면 제작
.```
living-list {list-style: none;}
.living-list .living-item a {
color: #000000;
text-decoration: none;}
.living-list .living-item .living-info .type{
color: #c08d31;
font-weight: 700;
font-size: 12px;}
.living-list .living-item .living-info .title{
font-size: 13px;
color: #000000;}
.living-list .living-item .living-info .paragraph {
font-size: 13px;
color: #404040;
line-height: 10px;
}
.living-list .living-item .living-info .date-wrap .source,
.living-list .living-item .living-info .date-wrap .date
{ font-size: 12px; color: #505050; }
.living-list .living-item .living-info .date-wrap .date
{color: grey;}
.living-list .living-item .living-info .date-wrap .date:before
{ content: '-'; }
.living-list .living-item:hover {
background-color: pink;
}
.living-list .living-item a:hover .living-info .title {
text-decoration; underline;}
네이버에서 코드 검사를 직접해보고, 같은 글자와 색상을 처리했고
아래와 같이 마우스를 올리면 색깔 효과를 주는 작업까지 해보았다.
7월의 시작
글자가 왜 초록색인걸까. 오늘은 작업물이 많아서인지 유달리 길게 느껴진 하루였다.
여름처럼 싱그러운 초록 글자다. 가끔 오타가 생기면 효과가 나타나지 않다보니 어떤 글자인지 찾아내기 번거로울 때가 있는데 조금 성장했다면 대충 어디에서 생겼을지 바로 알아내는 것. 이제 조금은 덜 멈춰도 되고 조금씩 속도가 붙고 있다. 내일은 오늘보다 조금 더 나아져있길!
내일은 조금 더 단단한 마음으로 글을 작성해보겠다 :)
