📌 학습한 내용
네이버 뉴스-TV연예 실습 3
전체 코드 : 💾
메인 오른쪽 영역
'banner & 많이 본 TV연예 뉴스'
'연예가 HOT 포토'
'연예가 인터뷰'
하단 영역 (개별)
📌 학습내용 중 어려웠던 점
- 하단 영역을 스스로 작업하던 도중, 'Naver' 로고를 삽입한 영역이 가운데 정렬이 되지 않았다.
📌 해결방법
아래와 같은 시행 착오를 겪으며 스스로 해결했다.
앞서 작업했던 'shop.html'의 footer 영역을 참고해 코드를 작성했다. html의 내용을 바꾸고, 최밑단 부분에는 <div>를 추가해 로고 이미지와 카피라이트 문구를 감싸주었다. 아래의 클래스 명을 사용해 전체적으로 중앙정렬 시켰다.
.ent-container {
width: 980px;
margin: 0 auto;
}1차 오류
: 전체적으로 브라우저 기준 중앙정렬 된 듯하나, 내부에서 왼쪽으로 쏠림, footer 전체 영역을 'ent-container'로 감싸고, end 영역은 'ent-flex-start'로 한줄 정렬시킴.
<footer id="ent-footer">
<div class="ent-container">
<div class="policy-wrap">
<span>이용약관</span>
<span>서비스 운영 원칙</span>
<span class="on">개인정보 처리방침</span>
<span>책임의 한계와 법적고지</span>
<span>TV연예 고객센터</span>
<span>TV연예 제휴제안</span>
</div>
<p>본 콘텐츠의 저작권은 제공처 또는 네이버에 있으며 이를 무단 이용하는 경우 저작권법 등에 따라 법적책임을 질 수 있습니다.</p>
<div class="end ent-flex-start">
<img src="https://index.impakter.com/wp-content/uploads/2021/02/NAVER-green.png">
<p>Copyright © <strong>NAVER Corp.</strong> All Rights Reserved.</p>
</div>
</div>
</footer>
2차 오류
: 위와 동일한 코드에서 end 영역에 'ent-flex-start'를 제거 -> 전체적으로 중앙정렬을 이루어 졌으나, 틀어지는 현상 발생
수정 완료
: flexbox.help(https://flexbox.help/)를 이용해 end 영역 자체에 아래의 css속성을 넣어줌
#ent-footer .end {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
📌 학습소감
최근에는 온전히 강의를 따라만 하는 것이 아니라, 스스로 가상 선택자를 이용해 효과를 넣어주기도 하고, 기업 로고를 개인적으로 삽입하는 등 간단한 작업을 추가적으로 해왔다. 오늘은 하단 영역(<footer>) 자체를 스스로의 힘으로 작성해 보았다. 어려운 작업은 없어서 이미지 상의 두 번째 줄 까지는 문제없이 적용했는데, 마지막 줄에서 조금 시간을 지체했다. 하지만 시행착오를 겪고 스스로 문제를 해결했을 때의 쾌감은 이루 말할 수 없었다. 이 순간의 감정을 앞으로도 잊지않고 정진해야겠다. 😝🧐
