[개발일지7일차] 레이아웃 여러 css요소

1. 학습내용

메뉴만들기

<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>

</body>

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: pink;
}

.menu li {
	/*display: inline-block;*/
    (메뉴버튼/카카오/네이버 사이에 공백생김)
	float: left;
    (공백없이 작성 가능)

	width: 100px;
	/*height: 50px;*/
	background-color: yellow;


	/*border: solid 1px red;*/
    (메뉴버튼//카카오//네이버 겹치는 부분이 발생해서 사이 boder만 두께 달라짐)
	border-top: solid 1px red;
	border-bottom: solid 1px red;
	border-left: solid 1px red;
    (상세하게 부분을 나눠서 테두리 작성)
	/*text-align: center;
	 line-height: 50px;
     (1.height값 존재할 때 동일한px작성)

	padding-top: 15px;
	padding-bottom: 15px;*/
    (2.위 아래 동일한 공백을 주면서 가운데 맞춤)
}

.menu li:last-child {
	border-right: solid 1px red;
    (마자막 li값 오른쪽에도 테두리 지정)
}

.menu li a {
	display: block;
	text-align: center;

	padding-top: 15px;
	padding-bottom: 15px;
}

.menu li a:hover {
(글씨가 아닌 공간에 커서를 둬도 링크이동 가능, css변경가능)
	color: blue;
}

카카오프로필 연결

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

.kakao-lists li a {
	display: block;
	padding-left: 25px;
    (이미지 앞에 공백)
}

.kakao-lists li img,
.kakao-lists li .kakao-info {
	vertical-align: middle;
    (!!img태그랑 info를 x축 중앙정렬)
}

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

네이버 리빙정보 연결

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

.living-lists .image-link,
.living-lists .info-link {
	display: inline-block;
}

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

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

네이버 뉴스 연결

<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>

.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;
    (flexbox.help 사이트 참고)
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}

2. 어려운 내용

<a href=""></a>

에서 주소값을 넣어도 페이지 이동이 안돼서 헤맸다.

3. 해결방법

index.html에서만 링크를 변경했었기 때문에 페이지 이동이 이뤄지지 않은 사실 발견.
kakao.html 과 naver.html 모두 공통된 메뉴 링크를 넣어주면서 문제 해결 완료.

4. 학습소감

초반에 가로 정렬을 못할 때 결과물과 비교하면 훨씬 그럴듯해졌다.
분명 다 배웠던 요소들인데 왜 하면 할수록 어렵게 느껴지는지 모르겟다.

Author And Source

이 문제에 관하여([개발일지7일차] 레이아웃 여러 css요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@youjeongchoi0730/개발일지7일차-레이아웃-여러-css요소

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)