개발일지 210706

7일차 요약

지금까지 배운 html 도면작성 / CSS문법을 사용한 실습. 복습의 기회

학습 내용

실습 내용 / 결과물 출력 첨부

기본 레이아웃 실습

1. 메뉴 버튼 만들기

목표(출력된 결과)

html
	<nav class="menu">
		<ul>
			<li>
				<a href="index.html">menu</a>
			</li>
			<li>
				<a href="kakao.html">kakao</a>
			</li>
			<li>
				<a href="naver.html">naver</a>
			</li>
		</ul>
	</nav>
프로젝트 폴더 아래 3개의 html문서를 만들었다. 각각 li태그 아래 a태그에 링크되어 있다.

CSS(1)
html, body {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
a {
	color: #000000;
	text-decoration: none;
초기화 작업

각 태그의 디폴트 margin과 padding을 0으로

ul 태그의 list style을 제거 (li들 앞의 점)

a 태그의 디폴트 색상을 검은색으로, 밑줄 제거

CSS(2)
.menu li{
	/*display: inline-block;*/
	float: left;
	width: 100px;
	height: 50px;
	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;
}
.menu li a {
	display: block;
	text-align: center;
	padding-top: 15px;
	padding-top: 15px;
}
.menu li a:hover {
	color: blue;
}
(1) 영역 정렬하기

li태그들을 display: inline-block;으로 속성 변경해주는 방법이 있으나 block 속성 특유의 여백이 생기므로 float: left;를 사용함

이에 따라 li는 3차원 속성을 갖게 되므로 ul태그의 높이 값이 자식 속성에 영향을 못 받게 된다. ul태그에 overflow: hidden;을 적용해서 해결

(2) 글자 정렬하기

영역의 높이값이 있을 경우 높이값과 동일한 line-height 사용으로 정렬가능

없을 경우 text-align과 padding top/bottom에 동일한 값을 적용해서 정렬 가능

하지만 위 두가지 경우 하이퍼링크가 a태그로 감싸진 글자를 직접 클릭할 경우에만 작동하게 된다. 따라서 a태그에 block 속서을 준 후 정렬시켰다. (.menu li a 이하의 내용)

(3) 영역의 테두리 정리

li태그에 1px 짜리 border를 적용한 경우 가로로 정렬된 list사이 테두리가 모두 노출되어 2px짜리 테두리가 된다.

따라서 상,하,좌 에 1px짜리 테두리를 적용하고 li에대한 가상선택자를 만들어 우측에 마찬가지로 1px짜리 테두리를 만들어 해결함

카카오 친구 목록

레이아웃 목표

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>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/50">
				<div class="kakao-info">
					<h3>박지연</h3>
					<span>다정한 사람</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/50">
				<div class="kakao-info">
					<h3>한예지</h3>
					<span></span>
				</div>
			</a>
		</li>
	</ul>
CSS(1)
.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;
}
이미지 태그와 h3,span 태그를 감싸고 있는 div 태그를 x축 정렬하기 위해
1. div 태그에 display: inline-block; 적용
2. img와 div 태그에 모두 vertical-align: middle; 적용

CSS(2)
.kakao-lists li a {
display: block;
}
img(친구사진) div(친구이름/소개 영역)외에도 같은 x축 여백에 전부 링크를 적용하기 위해 a태그의 display를 block로 설정

CSS(3)

.kakao-lists li {
margin-bottom: 20px;
}
.kakao-lists li a {
display: block;
padding-left: 25px;
}
.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 {
font-size: 18px;
margin: 0;
}
.kakao-lists li .kakao-info span {
font-size: 14px;
color: #c8c8c8;
}

전체 내용. 이미지 테두리 둥글게 다듬기, 여백, 글자크기 조절 등.

결과출력

네이버

네이버 - 리빙

목표 레이아웃

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>아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 </p>
					</div>
					<div class="date-warp">
						<span class="source">집꾸미기</span>
						<span class="date">2주일 </span>
					</div>
				</div>
			</a>
		</li>
	</ul>

a태그로 img태그 와 span,h3,p태그를 감싸고있는 div태그를 각각 감싸주었다.

CSS

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

영역 정렬
1. ul태그 전체의 영역을 750px로 고정
2. 글자들이 들어갈 div 영역을 512px로 고정
3. a태그들에 각각
display: inline-block;
vertical-align: middle;
을 적용해 x축 정렬
4. 기타 자잘한 마진정렬

결과출력

이 결과에는

.living-info h3,
.living-info p {
	margin: 0;
	padding: 0;
}
.living-info p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
    max-height: 40px;
    line-height: 20px;
	text-overflow: ellipsis;
}

만큼의 CSS가 추가되었음.

h3와 p의 마진 패딩 값을 0으로 조절해 조금 더 조절된 레이아웃을 만들었음
p태그에 대한 css는 추가학습에 서술함

네이버 - 뉴스의 제목과 버튼정보

html

<div class="title-wrap">
		<h3>임대차법 9개월, 서울 전세 줄고 월세 늘었다</h3>
		<div class="btw-wrap">
			<div class="btn-left-wrap">
				<button type="button">좋아요</button>
				<button type="button">댓글</button>
			</div>
			<div class="btw-right-wrap">
				<button type="button">요약</button>
				<button type="button">크기</button>
				<button type="button">팩스</button>
				<button type="button">공유</button>
			</div>
		</div>
	</div>

2개의 div 태그로 버튼들의 그룹을 나누었음

CSS

.title-wrap {
	border-top: solid 2px #000000;
	border-bottom: solid 2px #000000;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 20px;
	padding-left: 15px;
}
.title-wrap h3 {
	margin-bottom: 20px;
}
.btw-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}

전체 영역에 해당하는 div태그에 border과 padding 적용해주기
h3아래에 margin 적용
display: flex;를 통해 자식 태그들 각각의 영역을 좌우로 나누어 주었음
flexbox.help 사이트를 활용해 코드 작성함

결과출력

추가 학습

미해결 - 솔루션

메뉴버튼 아래, 즉, ul태그 margin: 0; 아래에 margin-bottom: 15px; 값을 줌. 메뉴와 내용이 딱 붙어있어서 수정.
네이버 리빙 부분의 p태그 안쪽 내용이 영역을 초과할 경우 레이아웃이 망가짐.
div태그를 한 단계 더 만들어 영역을 설정하고 overflow를 설정해보았으나 영역설정이 번거롭고 글자가 잘림.
따라서 아래를 참조해 수정함.

결과

질문거리

webkit는 일종의 모듈 같은 것일까..?

복습

학습 소감

아직 자바스크립트도 배우지 않았지만 웹 개발은 생각보다 복잡하다. 웹 표준과 웹 접근성을 지켰을 때 생기는 이점을 지키기 위해서라는 생각이 드는데, 개발 전반이 노코딩으로 향한다는 앞으로는 어떻게 될지 궁금하다.

Author And Source

이 문제에 관하여(개발일지 210706), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@xddf/개발일지-210706

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