2021.07.06 CSS 실습

📒 li, a 태그에 display block과 float을 사용하여, 네이버 특정영역에서 사용되는 메뉴 버튼 제작

html 기초 작업

html, body {
	margin: 0;
	padding: 0; }

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

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

📌 overflow: hidden;

<ul>
  <li>
   </li>
</ul>

ul=부모태그, li=자식태그 
li태그가 3차원 이기때문에 ul 높이값에 영향을 줄 수 없기때문에 ✍ overflow: hidden; 사용하여 부모높이값이 화면 표기 가능, 
float의 부모로 overflow hidden을 사용하면 부모의 높이값을 인식할수있다

✔ css

.menu ul {
	✍overflow: hidden;
	background-color: pink; }

📌 공간에대한 크기, 테두리생성

.menu li {
	display: inline-block;

👉 x축정렬이면서 공간의 크기를 유지할수있지만 공백생김

	   dispaly: inline-block 대신
	 💡float: left를 사용함으로써 x축정렬이고, 
           공백없애기 가능
	   왼쪽에서부터 li 태그를 정렬시키겠다.
	
	float: left;

	width: 100px;
	height: 50px;
	background-color: yellow;
	border: solid 1px red;

📌 세밀한 boarder값 조정하기



    
	 ✔ 박스의 특정 부분 border값 세팅하기
	border-top: solid 1px red;
	border-bottom: solid 1px red;
	border-left: solid 1px red;

📌 가상선택자를 만들어 마지막 border 값 적용시키기

.menu li:last-child {
	border-right: solid 1px red; }

📌 text정렬바꾸기

 
	li태그 안 a 태그 자체가 x축으로 가운데 가도록 되어있다.
    
	👉 text-align: center;

📌 y축으로 중앙정렬하는방법

1.버튼에 높이값이 존재했을때 글자 간 위아래 간격에 영향을 미치는 속성 사용


	line-height: 50px;
    크기는 보통 height높이 따라 하면 가능하지만, 서체스타일에따라 조절필요

2.버튼에 높이값이 없는 경우


	padding-top: 15px;
	padding-bottom: 15px; }
	글자를 기준으로 위쪽과 아래쪽에 공백을 생성하면 된다.

📌 버튼에 마우스를올리면 마우스모양이 바뀌는 속성


.menu li {
	display: block;
	text-align: center;
	사이에 공백을 넣어줌으로써 중앙으로 정열
	padding-top: 15px;
	padding-bottom: 15px; }

📌마우스를 올렸을때 색체인지 기능


.menu li a:hover {
	color: blue; }

📌 페이지이동기능

href에 속성값으로 파일명을 전달할수도 있다(클릭했을때 해당메뉴로 이동가능) 단 멀티페이지 기능 적용할 html문서 href에 다 넣어줘야함

✍html
<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>
</body>

✍ css

📌 각 li태그 마다 공백 주기

.kakao-lists li {
	margin-bottom: 20px;}

.kakao-lists li a {
	display: block;
	padding-left: 25px;}
	a태그와 img사이에 padding left 로 25px의 여백이 생긴다.

📌 vertical-align: middle;을 사용해서 x축으로 중앙위치배열 만들기


.kakao-lists li img,
.kakao-lists li .kakao-info {
	vertical-align: middle;
}

📌 이미지 부분 공백주기(margin으로)


.kakao-lists li img {
	margin-right: 10px;
	border-radius: 20px; }

.kakao-lists li .kakao-info {
	display: inline-block; }

📌 초기화코드입력
👉 kakao info에 margin값을 0을 주겠다


x축기준으로 vertical-align: middle; 에 의해  정가운데 정렬

.kakao-lists li .kakao-info h3 {
	margin: 0; }

.kakao-lists li .kakao-info span {
	font-size: 14px;
	color: #c8c8c8; }

💡 img태그는 dispaly-block의 특징을 가지고있고 kakao info는 display-inline으로 변경해줌으로써
vertical-align: middle; 를 사용해서 x축중앙정렬로 맞출수 있었다.




 

✍ 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>퇴사 후, 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 Nice to meet you </p>
				</div>

				<div class="date-wrap">
					<span class="source">집꾸미기</span>
					<span class="date">2주일 전</span>
				</div>
			</a>
		</li>
	</ul>

📒 2개의 a태그를 x축으로 정열시키는 작업, ul태그전체영역을 공간의 크기를 지정, li태그전체 영역의 크기*/

📌 li태그전체영역을 공간의 크기를 지정

✍ css

.living-lists {
	width: 750px;
	background-color: orange; }


.living-lists .imge-link,
.living-lists .info-link {
	display: inline-block;
	vertical-align: middle;}

.living-lists .imge-link {
	margin-right: 21px;}

.living-lists .info-link {
	width: 512px;}



✍ html
<div class="title-wrap">
		<h3>임대차법 9개월, 서울 전세 줄고 월세 늘었다</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>


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/
onclick vs addEventListener('click')
210918 TIL 미니프로젝트 회고

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage