1) 학습내용
가상선택자, li, a, display block, float 사용
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
body {
background-color: yellow;
}
html, body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: #000000;
text-decoration: none;
}
.menu ul {
overflow: hidden; ---> 자식의 높이 값이 표현이됨
background-color: pink;
}
.menu li {
display: inline-block; ---> 영역들 사이에 틈이 있음
float: left; ---> 왼쪽에서 부터 li 태그 정렬
width: 100px;
height: 20px; ---> 버튼의 높이값 있을 때
background-color: yellow;
border: solid 1px red;
border-top: solid 1px red; ---> 위쪽 영역에만 보더 생성
border-bottom: solid 1px red; ---> 아래쪽 열에도 생성
border-left: solid 1px red; ---> 왼쪽 열에만 생성
text-align: center;
line-height: 50px; ---> 일반적으로 정렬
padding-top: 15px; ---> 글자 기준으로 아래 위 공백
padding-bottom: 15px;
}
.menu li:last-child {
border-right: solid 1px red; ---> 아래쪽 보더생성
}
클릭을 넓힌다 a 태그의 범위를 넓힌다
.menu li a {
display: block;
text-align: center; ---> a 태그의 전체에서 정렬
padding-top: 15px;
padding-bottom: 15px; ---> y축 중앙정렬
}
.menu li a:hover { ---> 가상선택자
color: blue; ---> 색상이 변경되는 효과
}
카카오 레이아웃 작업
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="kaka-lists">
<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
body {
background-color: yellow;
}
html, body {
margin: 0;
padding: 0;
}
ul { ---> 기본적으로 마진과 패딩 값을 가지고 있음
list-style: none;
margin: 0; ---> 여백 0
padding: 0; ---> 여백 0
}
a {
color: #000000;
text-decoration: none;
}
.menu ul {
overflow: hidden; ---> 자식의 높이 값이 표현이됨
background-color: pink;
}
.menu li {
float: left; ---> 왼쪽에서 부터 li 태그 정렬
width: 100px;
background-color: yellow;
border: solid 1px red;
border-top: solid 1px red; ---> 위쪽 영역에만 보더 생성
border-bottom: solid 1px red; ---> 아래쪽 열에도 생성
border-left: solid 1px red; ---> 왼쪽 열에만 생성
padding-top: 15px; ---> 글자 기준으로 아래 위 공백
padding-bottom: 15px;
}
.menu li:last-child {
border-right: solid 1px red; ---> 아래쪽 보더생성
}
.kakao-lists li { ---> li 태그로 공백생성
margin-bottom: 20px; ---> 공백생성
}
.kakao-listst 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 {
font-size: 18px;
margin: 0;
}
.kakao-lists li .kakao-info span {
font-size: 14px;
color: #c8c8c8;
}- vertical-align: middle;중앙정렬
css
<ul class="living-lists">
<li>
<a href="#">
<img src="https://via.placeholder.com/170x114">
</a>
<a href="#">
<div class="living-info">
<span>리빙</span>
<h3>퇴사 후, 36년 된 노후주택을 고쳐 짓고 싶어요</h3>
<p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you </p>
<div class="data-wrap">
<span class="source">집꾸미기</span>
<span class="date">2주일 전</span>
</div>
</div>
</a>
</li>
</ul>2) 어려운점
-
기존의 레이아웃 정리방법 활용한 스타일 적용이 쉽지 않음
-
쉽게 보이는 정렬도 뜯어보면 복잡했음
-
홀로 활용을 하려고 하면 역시 막히는 부분이 많음
3) 해결방법
-
복습 또 복습
-
몇 가지 오류는 자세히 살펴보면 오타가 많았음
-
각종 태그들이 뒤섞이니 헷갈리는 부분을 따로 복습해보기로 함
4) 학습소감
-
홀로 활용을 하려고 하면 생각보다 오류가 많이 발생함
-
구조별로 뜯어보면 스타일 적용 부분이 쉬워보이지만 생각처럼 쉽지않음
-
홀로 다 소화를 못하는 건 아닐까 하는 생각이 듦
Please be wonderful but don't be so serious, enjoy this journey with the good people!