July, 6 #layout 실습

Jiwon Park·2021년 7월 6일
0

오늘도 어김없이 파일 및 폴더 연동, 확인으로 시작



연결 확인!

메뉴버튼 만들기

기본)

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
<ul>
	<li>
		<a href="#">메뉴 버튼</a>
	</li>
	<li>
		<a href="#">카카오</a>
    </li>
    <li>
		<a href="#">다음</a>
    </li>
  </ul>
</nav>



</body>
</html>



이상태에서 기본적으로 해야하는 작업

초기화) 

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

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

x축으로 정렬되는 메뉴버튼 제작)

ex) 네이버 메뉴
: 공간 크기가 지정되어있고 border가 들어가 있음

1)

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<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>
html, body {
	margin: 0;
	padding: 0;
}

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


.menu li {                <<<<<<<<<<<<추가 했음 <<<<<<<<<<<<<<<<
	width: 100px;
	height: 50px;
	background-color : pink;
	border: solid 1px navy;
}

2) 다음 상태에서 x축으로 변동

  • inline 사용
.menu li {
	display: inline-block;  <<<<<<<추가 <<<<<<<<<
	
	width: 100px;
	height: 50px;
	background-color : pink;
	border: solid 1px navy;
}

display: inline-block; 으로 x축 정렬을 해보았다.

inline은 기본적으로 x축 사이 공백존재

3) x축 공백 없이 만들고자 할 때

  • float 사용
.menu li {
	/*display: inline-block; */ <<<<<<< 주석처리 후 <<<<<<<<<<<<<
	float: left;   <<<<<<<<<< float 왼쪽정렬 <<<<<<<<<<

	width: 100px;
	height: 50px;
	background-color : pink;
	border: solid 1px navy;
}

  • 배경색 넣기

ex) 적용 안되는 예시 (자식이 3차원일 경우에는 부모의 높이값에 영향을 줄 수 없다. )

.menu ul {
	background-color: green;
}

적용 되었을 때 :

.menu ul {
	overflow: hidden;         <<<<<<<<<< 추가해줬음 <<<<<<<<<<<<
	background-color: green;

}


.menu li {
	/*display: inline-block; */
	float: left;

	width: 100px;
	height: 50px;
	background-color : pink;
	border: solid 1px navy;
}

검사)

li 태그가 부모인 ul 태그의 높이값에 영향을 줄 수 있기 때문
지금과 같이 자식의 높이값이 화면에 표기.
height 50으로 줬으나, 52로 검사에 뜨는 이유는 border값의 위아래 표기가 ul태그의 높이값
* float의 부모로 overflow와 hidden을 사용하게 되면, 부모의 높이값을 인식 할 수 있다.

  • text의 정렬 바꾸기

x축 가운데 정렬 

.menu li {
	/*display: inline-block; */
	float: left;

	width: 100px;
	height: 50px;
	background-color : pink;
	border: solid 1px navy;

	text-align: center;  <<<<<<<추가하면 x축 가운데 정렬 <<<<<<<<<
}

y축 가운데 정렬

1) 버튼의 높이값이 존재했을 때, 글자 간 위아래 간격에 영향미치는 line-height 사용
하여 동일한 값 입력 

.menu li {
	/*display: inline-block; */
	float: left;

	width: 100px;
	height: 50px;           <<<<<<<<< 높이값과 <<<<<<<
	background-color : pink;
	border: solid 1px navy;

	text-align: center;
	line-height: 50px;      <<<<<<<<<< 동일한 값 입력 <<<<<<<<
}

2) 버튼의 높이값이 없을 경우 

<nav class="menu">
<ul>
	<li>
		<a href="#">메뉴 버튼</a>
	</li>

	<li>
		<a href="#">카카오</a>
    </li>
    <li>
		<a href="#">다음</a>
    </li>
  </ul>
</nav>

li태그와 a태그 사이의 위 아래 쪽 공백을 똑같이 생성 해줌으로서 가운데 정렬 가능

  • padding 
.menu li {
	/*display: inline-block; */
	float: left;

	width: 100px;
	/*height: 50px;*/
	background-color : pink;
	border: solid 1px navy;

	text-align: center;
	/*line-height: 50px;*/

	padding-top: 15px;       <<<<<<< 이렇게
	padding-bottom: 15px;    <<<<<< 동일한 공백 생성
}

글자 뿐 아니라 메뉴버튼 전체에 클릭 인식되게 하는 방법 (메뉴버튼 클릭범위 넓히기)

= a 태그 범위 넓히기

.menu li a {
	display: block;
	text-align: center;
    
    padding-top: 15px;
    padding-bottom: 15px; 
}

border값 적용 영역 변경

.menu li {
	/*display: inline-block; */
	float: left;

	width: 100px;
	/*height: 50px;*/
	background-color : pink;
	/*border: solid 1px navy;*/
	border-top: solid 1px red;   <<<<< 위쪽 영역에서만 border값 적용 <<<<


border-bottom: solid 1px red;
border-left: solid 1px red;
추가한 모습 :

right 추가 시엔 html 가장 마지막에 있는 li 태그 가상선택자로 다음과 같이 입력 

.menu li : last-child {
	border-right: solid 1px red;
}코드를 입력하세요

카카오 친구 페이지 layout

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<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="http://via.placeholder.com/50">
			
			<div class="kako-info">
				
				<h3>박지원</h3>
				<span>Jiwon Park</span>
			</div>
		</a>
	</li>
</ul>







</body>
</html>



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

ul {
	list-style: none;
	margin:  0;
	padding: 0;
}
a {
	color: #000000;
	text-decoration: none;
}


.menu ul {
	overflow: hidden;
	background-color: green;

}


.menu li {
	/*display: inline-block; */
	float: left;

	width: 100px;
	/*height: 50px;*/
	background-color : pink;
	/*border: solid 1px navy;*/
	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;
}

.menu li a {
	display: block;
	text-align: center;
    
    padding-top: 15px;
    padding-bottom: 15px; 
}

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







.kakao-lists li a {
	display: block;
}


.kako-lists li img,               <<<<<<  기본적으로 display inline-block 의 성격
.kakao-lists li .kakao-info {      <<<<< display: inline-block; 으로 아래서 변경
	vertical-align: middle;     <<<<<<<<<<<<<< 요기서 포인트!!!!!<<<<<<
}                                                   ㄴ 중앙정렬!!!!



.kako-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;
}

li 태그들만 복붙해서 

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<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="http://via.placeholder.com/50">
			
			<div class="kakao-info">

				<h3>박지원</h3>
				<span>Jiwon Park</span>
			</div>
		</a>
	</li>


	<li>
		<a href="#">
		<img src="http://via.placeholder.com/50">
			
			<div class="kakao-info">

				<h3>박지원</h3>
				<span>Jiwon Park</span>
			</div>
		</a>
	</li>


	<li>
		<a href="#">
		<img src="http://via.placeholder.com/50">
			
			<div class="kakao-info">

				<h3>박지원</h3>
				<span>Jiwon Park</span>
			</div>
		</a>
	</li>

	
</ul>


</body>
</html>


※ padding 혹은 margin bottom 값 적용해서 아랫쪽 공백 생성

ex)

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

네이버 리빙도면 제작

다시 메뉴버튼으로 가서, naver 새 파일 생성 및 아래와같이
3개의 파일 모두에 다음 >> 네이버 수정 후 "naver.html" 추가 입력

세개 파일 모두 저장 후 새로고침 해서 변경 확인

네이버 리빙도면 예시 및 코드검사


이미지태그 따로 감쌌고 오른쪽 글자나오는 부분도 a태그로 따로 감싼 것을 확인.
똑같이 2번 사용하기루우 -

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<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="#">
			<img src="http://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 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>


</body>
</html>

  • a 태그 두개를 x축 정렬 시켜야 하는데, 지금 x축 정렬이 아님 x축 정렬하기
    = 각각의 a 태그 좌우배치

첫번째 a 태그에는 image-link class 추가

두번째 a 태그에는 info-link class 추가

각각의 a 태그에 display inline

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

.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;
}

  • ul태그 전체부분을 공간 지정 하기 (750x510 : 750이라는 width값 설정)
css)

.living-lists li{
	width: 750px;
    background-color: skyblue;  <<< 배경색상 설정으로 육안으로 적용된 사항 확인
}

point ) 웹사이트 레이아웃을 자유롭게 정렬 시킬 수 있는지

네이버 뉴스페이지 상단영역의 설계도면과 layout

상단 영역의 타이틀과 버튼정보
ex)

<div class="title-wrap">
	<h3>임대차법 9개월, 서울 전세 줄고 월세 었다.</h3>	

	<div class="btn-wrap">
		<div class="btn-left-wrap">
			<button type="buttom">좋아요</button>
			<button type="buttom">댓글</button>
		</div>

		<div class="btn-right-wrap">
			<button type="buttom">요약</button>
			<button type="buttom">크기</button>
			<button type="buttom">팩스</button>
			<button type="buttom">공유</button>
		</div>
	</div>
</div>

title wrap 영역 완성!

css로 title 영역 배치작업

.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 영역에서 가장 중요)

flex 사용하면 쉽고 빠르게 가능. 아래 flexbow의 help 페이지에서 클릭만으로 간편하게
레이어 작업 가능!!!!!!!!

www.flexbox.help

아래에서 복붙

.title-wrap .btn-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;

}

양쪽 좌우배치 끝.

조금 더 디테일하게 작업하고 싶을 경우

구글검색 : css 레이아웃을 배웁시다

텍스트와 설명, 예시 코드 등을 복습 가능

july, 6

버튼 만들면서 클릭 시 저장한 index html 파일이 뜨지 않아서 직접 클릭해봤더니.

카카오 버튼 안에 새로운 메뉴가 생성되어버렸음. 코드 다시 확인 하고 다시 입력 해봤으나 똑같아서 어쩔 수 없이 그대로 진행 하게 된 점 아쉽다. 네이버 클릭 시 버튼 클릭으로 페이지가 바뀌는 것이 아니고, 카카오를누르면 이렇게 떠서, 저기서 네이버를 눌러야


위와같은 네이버.html이 떴다는..............머선일이구...........결국 다시 처음부터 뚞딱뚝딱 해서 해결. 오타를 주의하자 가끔 코드가 길어졌는데 kakao를 kako 이런식으로 스펠링 빼먹어서 적용이 안되면 간담이 서늘해지는 경험을 한다. ㅎㅎ

profile
Jiwon Park
이전 포스트

July, 5 #layout (2)

다음 포스트

July, 7 #애니메이션

0개의 댓글