Dev Log #7 - 7월 6일
오늘 학습한 내용
✅ (실습) 네이버 메뉴버튼 만들기
✅ (실습) 카카오톡 친구 리스트 만들기
✅ (실습) 네이버 리빙 섹션 만들기
✅ (실습) 네이버 뉴스페이지 상단 만들기
1. 실습_네이버 메뉴버튼 만들기
👉 html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="menu">
<ul>
<li>
<a href="#">메뉴 버튼</a>
</li>
<li>
<a href="#">카카오</a>
</li>
<li>
<a href="#">다음</a>
</li>
</ul>
</nav>
</body>
</html>👉 css
/* 초기화 작업 */
html, body {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
a {
color: #000000;
text-decoration: none;
}
/* 메뉴 */
.menu ul {
overflow: hidden;
background-color: pink;
}
.menu li {
float: left;
width: 100px;
/*height: 50px;*/
background-color: yellow;
border-top: solid 1px red;
border-bottom: solid 1px red;
border-left: solid 1px red;
/*border: solid 1px red;*/
/*text-align: center;*/
/*line-height: 50px;*/
/*padding-top: 15px;*/
/*padding-bottom: 15px;*/
}
.menu li:last-child {
border-right: solid 1px red;
}
.menu li a {
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
.menu li a:hover {
color: blue;
}
👉 결과물
- 글자를 y축으로 중앙 정렬하는 법은 크게 두가지이다.
- 버튼의 높이값이 존재했을 때 글자간 위아래 간격에 영향을 미치는 line-height 속성을 사용해서 동일한 값을 넣어주면 된다. 단, 어떠한 폰트 서체에 사용하는 지에 따라서 미묘하게 달라질 수 있다.
- 버튼의 높이값이 없으면 글자를 기준으로 위쪽 공간과 아래쪽 공간을 똑같이 만들어 준다. padding-top, padding-bottom 속성을 사용해서 중앙 정렬한다.
-
메뉴버튼은 불안정하다. 메뉴버튼에 올렸을 때 하이퍼 링크 영역(클릭 영역)에 안들어오고 텍스트에 올렸을 때 하이퍼 링크 영역(클릭 영역)에 들어온다.
-
클릭의 영역을 넓히고자 한다면 a태그의 범위를 넓히겠다는 것과 같다. 이때는 a태그 display속성을 block처리 한 다음 중앙 정렬 배치를 시켜준다.
-
li간격사이의 선 겹침현상은 border-top, border-bottom, border-left와 마지막 li에 가상 선택자로 last-child를 적용하여 겹침현상을 해결한다.
2. 실습_카카오톡 친구 리스트 만들기
👉 html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="menu">
<ul>
<li>
<a href="index.html">메뉴 버튼</a>
</li>
<li>
<a href="kakao.html">카카오</a>
</li>
<li>
<a href="#">다음</a>
</li>
</ul>
</nav>
<ul class="kakao-lists">
<li>
<a href="">
<img src ="
https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
<li>
<a href="">
<img src ="
https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
<li>
<a href="">
<img src ="
https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
<li>
<a href="">
<img src ="
https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
<li>
<a href="">
<img src ="
https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
</ul>
</body>
</html>👉 css
/* 카카오 */
.kakao-lists li {
margin-bottom: 20px;
}
.kakao-lists li a {
display: block;
padding-left: 25px;
}
.kakao-lists li img,
.kakao-lists li .kakao-info {
vertical-align: middle;
}
.kakao-lists li img {
border-radius: 20px;
margin-right: 10px;
}
.kakao-lists li .kakao-info {
display: inline-block;
}
.kakao-lists li .kakao-info h3 {
margin: 0;
font-size: 19px;
}
.kakao-lists li .kakao-info span {
font-size: 14px;
color: #999999;
}
👉 결과물
-
멀티페이지를 만들 때 유용하게 사용하는 법이다. a태그의 href속성값으로페이지의 링크 주소 뿐만아니라 html 문서파일을 속성값으로 전달 할 수 있다.
-
기본적으로 img태그는 inline-block 속성값을 가지고 있고 kakao-info는 display: inline-block으로 변경을 해주었다. 그렇기 때문에 vertical-align을 사용해서 x축 중앙정렬로 맞출 수 있었다.
3. 실습_네이버 리빙 섹션 만들기
👉 html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="menu">
<ul>
<li>
<a href="index.html">메뉴 버튼</a>
</li>
<li>
<a href="kakao.html">카카오</a>
</li>
<li>
<a href="naver.html">네이버</a>
</li>
</ul>
</nav>
<ul class="living-lists">
<li>
<a href="#" class="image-link">
<img src="https://via.placeholder.com/170x114">
</a>
<a href="#" class="info-link">
<div class="living-info">
<span>리빙</span>
<h3>세 아이와 사는 집, 현무암 돌담을 두른 제주 전원주택</h3>
<p>jtbc ‘효리네 민박’에서 한겨울 차가 올라가지 못하던 가파른 곳, 제주 애월읍 소길리. 세 자녀를 둔 40대 초반 건축주 부부가 새 집을 짓기 위해 마련한 땅이 있는 위치다.</p>
<div class="date-wrap">
<span class="source">나무신문</span>
<span class="date">어제</span>
</div>
</div>
</a>
</li>
</ul>
</body>
</html>👉 css
/* 네이버 */
.living-lists {
width: 750px;
background-color: orange;
}
.living-lists .image-link,
.living-lists .info-link {
display: inline-block;
vertical-align: middle;
}
.living-lists .image-link {
margin-right: 21px;
}
.living-lists .info-link {
width: 512px;
}
👉 결과물
4. 실습_네이버 뉴스페이지 상단 만들기
👉 html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="menu">
<ul>
<li>
<a href="index.html">메뉴 버튼</a>
</li>
<li>
<a href="kakao.html">카카오</a>
</li>
<li>
<a href="naver.html">네이버</a>
</li>
</ul>
</nav>
<ul class="living-lists">
<li>
<a href="#" class="image-link">
<img src="https://via.placeholder.com/170x114">
</a>
<a href="#" class="info-link">
<div class="living-info">
<span>리빙</span>
<h3>세 아이와 사는 집, 현무암 돌담을 두른 제주 전원주택</h3>
<p>jtbc ‘효리네 민박’에서 한겨울 차가 올라가지 못하던 가파른 곳, 제주 애월읍 소길리. 세 자녀를 둔 40대 초반 건축주 부부가 새 집을 짓기 위해 마련한 땅이 있는 위치다.</p>
<div class="date-wrap">
<span class="source">나무신문</span>
<span class="date">어제</span>
</div>
</div>
</a>
</li>
</ul>
<div class="title-wrap">
<h3>내년 최저임금 '24% 인상 vs 동결'…노사 신경전 고조</h3>
<div class="btn-wrap">
<div class="btn-left-wrap">
<button type="button">좋아요</button>
<button type="button">댓글</button>
</div>
<div class="btn-right-wrap">
<button type="button">요약</button>
<button type="button">크키</button>
<button type="button">팩스</button>
<button type="button">공유</button>
</div>
</div>
</div>
</body>
</html>👉 css
/* 네이버 뉴스 상단 */
.title-wrap {
border-top: solid 2px #000000;
border-bottom: solid 1px #000000;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 20px;
}
.title-wrap h3 {
margin-bottom: 20px;
}
.title-wrap .btn-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
}
👉 결과물
- CSS 레이아웃을 배웁시다. https://ko.learnlayout.com/
- flex 참고 https://flexbox.help/
오늘의 학습 후기(어려웠던 점, 개선할 점)
오늘은 이전에 배웠던 css 레이아웃 배치를 가지고 실습해보는 시간을 가졌다. 확실히 css 레이아웃을 배워서 구조나 틀을 익히기가 편했던 것 같다. 점점 모양을 갖추는 실습 결과물을 보면서 많은 것들을 배웠음을 확인할 수 있었다. 오늘도 역시 충분한 복습을 거쳐서 그런지 어려운 점은 없었다. 오늘 수업 중 가장 기억에 남고 중요하다고 생각한 부분은 카카오 친구 리스트 실습에서 kakao-info에 display: inline-block으로 변경을 한 후 vertical-align을 사용해서 img태그와 x축 중앙정렬로 맞춘 점이다. 오늘로 css 레이아웃 학습부분은 마무리가 되었다. 처음에 css를 이해하느라 고생했던 것들이 오늘 실습을 통해서 빛을 발휘한 느낌이다🔥 내일 새로운 내용 학습이 기대가 된다😊
Author And Source
이 문제에 관하여(Dev Log #7 - 7월 6일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@juhuii/Dev-Log-7-7월-6일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
