📌학습 내용
💡 CSS 세팅
html, body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
color: #000000;
text-decoration: none;
}📖 실습 (1)
⭐예제
📍 기본 작업
📎HTML
<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>📎CSS
.menu li {
width: 100px;
height: 50px;
background-color: yellow;
border: solid 1px red;
}
📍 x축 정렬로 변경
.menu li {
display: inline-block;
}
.menu li {
float: left;
}📍 배경색으로 영역 시각화
li의 부모인 ul에 높이값을 잡아주기 위해 overflow: hidden; 적용
.menu ul {
overflow: hidden;
background-color: pink;
}
📍 텍스트 위치 잡아주기
• x축 중심으로 이동
text-align: center;• y축 중심으로 이동: 공간에 높이값이 있는 경우
— line-height를 공간의 height 높이값과 일치시켜 적용한다
— 폰트에 따라 값을 조정해줘야 할 때가 있다
width: 100px;
height: 50px;
line-height: 50px;• y축 중심으로 이동: 공간에 높이값이 없는 경우
— padding으로 위아래 여백에 같은 값을 줌
padding-top: 15px;
padding-bottom: 15px;
📍 텍스트가 담긴 공간 전체에 a 태그 걸기
.menu li a {
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
📍 테두리의 굵기를 균일하게 정리
.menu li a {
border-top: solid 1px red;
border-bottom: solid 1px red;
border-left: solid 1px red;
}
.menu li:last-child {
border-right: solid 1px red;
}
⭐결과
📖 실습 (2)
⭐예제
강사님 曰
이 실습에서는 vertical-align 기능 활용을 잘 익힐 것
📍 기본 작업
📎HTML
<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>
</ul>📎CSS
.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: 18px;
}
.kakao-lists li .kakao-info span {
font-size: 14px;
color: #c8c8c8;
}📍 여백까지 a 태그 걸기
.kakao-lists li a {
display: block;
}
📍 ul 태그가 가진 기본 margin과 padding 없애기
ul {
list-style: none;
margin: 0;
padding: 0;
}
📍 사진 앞 공백 만들어주기
.kakao-lists li a {
padding-left: 25px;
}
📍 줄 띄워주기
.kakao-lists li {
margin-bottom: 20px;
}🔎 padding값을 적용하는 방법도 가능
⭐결과
📖 실습 (3)
⭐예제
📍 기본 작업
📎HTML
<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>퇴사 후, 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 Nice to meet you Nice to meet you Nice to meet you Nice to meet you </p>
<div class="date-wrap">
<span class="source">집꾸미기</span>
<span class="date">2주 전</span>
</div>
</div>
</a>
</li>
</ul>
📍 영역을 정해 글씨 넣어줌
.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
<div class="title-wrap">
<h3>임대차법 3개월, 서울 전세 줄고 월세 늘었다</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>
📍 위아래 줄 넣어주기
.title-wrap {
border-top: solid 2px #000000;
border-bottom: solid 1px #c8c8c8;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 20px;
}
📍 flex 적용
.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/
📌어려운 점
overflow: hidden;이 여전히 살짝 좀 이해하기 어렵다. 알 것 같으면서도 적용된 모습을 보면 다시 좀 생소한 것 같고 😅
📌해결 방법
구글링을 통해서 다른 사람들이 overflow에 대해 설명해둔 걸 찾아보고 있음.
📌느낀 점
스스로 찾은 참고할 만한 사이트들이나 강사님, 멘토님께서 추천해주신 사이트들이 차곡차곡 쌓이고 있는데 링크를 걸어놓기만 하고 잘 안 들어가보게 되는 것 같다. 아무래도 학습 내용 사이에 섞여 있으니 찾는 데에 시간이 걸려서 그런 것 같음.
📌Remind!!!
참고 링크만 모아둔 페이지를 따로 하나 만들어놓는 게 좋을 것 같다.
