1.학습한 내용

(1) 페이지 실습
네이버 연예 뉴스의 상단작업과 왼쪽 영역에 대한 작업을 진행하였다.

(2) 학습한 내용
상단 영역 기초 작업

이전에 학습하였던 뉴스의 상단과는 다르게 연예 영역은 따로 container를 지정해줄 필요가 없다. (wide하게 x축으로 뻗어 있음)

HTML code

	<header id="ent-header">
		<div class="ent-flex-between">


			<div class="ent-header-left">
				<ul class="ent-flex-start ">
					<li><a href="#">TV연예</a></li>
					<li><a href="news.html">뉴스</a></li>
				</ul>
			</div>
			
			<div class="ent-header-center">
				<ul class="ent-flex-center">
					<li class="on"><a href="#">TV연예홈</a></li>
					<li><a href="#">TV</a></li>
					<li><a href="#">포토</a></li>
					<li><a href="#">랭킹</a></li>
					<li><a href="#">영화</a></li>
					<li><a href="#">최신뉴스</a></li>
				</ul>
			</div>
			<div class="ent-header-right ent-flex-end">
				<a href="#" class="btn-login">로그인</a>
				<button type="button" class="btn-menu"></button>
				<button type="button" class="btn-search"></button>
			</div>

		</div>
	</header>

상단 header영역에서는 크게 ent-header-left ent-header-center ent-header-right 3가지 영역으로 나누어서 진행하고

<div class="ent-flex-between">

로 미리 css code가 적용 될수 있게 하였다.

.ent-flex-between {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

나머지 css code 같은 경우에도 flexbox site를 이용해서 넣어주었다.

상단 header 추가된 부분 지정 작업

TV 연예 영역란에서 강좌에서와는 다르게 TOKYO 2020 이라는 올림픽 부분이 있었다. 이 부분의 색상을 회색으로 주기 위해서 다음과 같은 가상 클라스를 추가하여 작업하였다.

css code

#ent-header .ent-header-left ul li:nth-last-child(2) a {
	color: #9f9f9f;
    #ent-header .ent-header-left ul li:last-child a {
	color: #9f9f9f;
}

}

nth-last-child(n) 은 예전에도 학습을 하였지만, 부모 안에 있는 요소중에서 끝에서 n번째 자식 요소를 선택하는 클래스 선택자이다.
그래서 끝부분과 끝에서 2번째 영역을 회색으로 만들어 주었다.

margin 병합 현상 comment
형제 관계에서 공통된 공백이 있는 경우 큰값이 작은값을 병합시키고 margin-bottom, margin-top에서만 일어난다.

min-width max-width의 용례

HTML code

<li>
							<a href="#">
								<img src="https://via.placeholder.com/148x148">
								<span>에이치엔드 에이치엔드에이치엔드 에이치엔드에이치엔드 에이치엔드에이치엔드 에이치엔드</span>
								<h3>[금새록] 오얼의 새록</h3>
							</a>
						</li>

css code

#ent-main .ent-left #ent-section-3 li span {
	position: absolute;
	display: block;
	max-width: 100%;
	background-color: #f40080;

	padding: 0 5px;

	left: 0;
	top: 0;

	font-size: 11px;
	font-weight: 700;
	color: #ffffff;

	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

원하는 지점에서 말줄임 표시를 하고 size를 조절하기 위해서 min-width 와 max-width를 사용하면 된다. 100% max-width를 사용하면 li영역을 넘어가지 않고 text-overflow와 nowarp을 더해주면 그림과 같이 소속사 이름이 길어도 깔끔하게 처리할 수 있다.

2. 실습

깃허브 소스코드:

naver 연예 뉴스 -1 ( 상단영역 + 왼쪽 메인 ) 실습 HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/45

naver 연예 뉴스 -1 ( 상단영역 + 왼쪽 메인 ) 실습 css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/46

3. 어려웠던 내용 & 해결방법

크게 어려운 부분은 없었다.

4.소감

무더위에 지치지만 8월에는 더더욱 불태워야 겠다는 생각이 든다.