https://naradesign.github.io/float-clearing.html
(1) 페이지 실습
네이버 연예 뉴스의 오른쪽 영역에 대한 작업을 진행하고 페이지 작업을 마무리 하였다.
(2) 학습한 내용
HTML code
<div class="bottom ent-flex-between">
<div class="btn-wrap ent-flex-start">
<button class="btn btn-prev"></button>
<button class="btn btn-next"></button>
</div>
CSS code
.ent-flex-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}
HTML의 code에서 div class에서 ent-flex-start를 지정하면 button이 떨어져있는 것을 붙일 수 있다.
계속 해오던 부분이다.
사실 이 부분은 ul tag로 나타낼수 있는 부분이나 초기화 과정에서 list-style: none;으로 설정하였기에 직접 디자인을 진행 하였다.
CSS code
#ent-section-13 ul a:before {
display: inline-block;
content: '';
width: 2px;
height: 2px;
vertical-align: top;
background-color: silver;
margin: 5px 5px 0 0;
}
사실 이 부분은 어느정도 form을 외워서 적재적소에 써먹는 것이 좋을듯하다.
깃허브 소스코드:
naver 연예 뉴스 -3 ( 오른쪽 영역 ) 실습 HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/49
naver 연예 뉴스 -3 ( 오른쪽 영역 ) 실습 css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/50
특별히 어려운 부분은 없었으나, 어제와 엊그제 내용이 어려웠던 부분이 많았다.
오늘은 강의 시간이 적었으니 다시 연예 뉴스 파트 전반에 대해 feedback을 하는 시간을 가져야겠다.
naver라고 하는 우리나라 대표 site의 각 페이지 구성이 어떤지를 느낄수 있고, 사실 개발자 도구를 통해서 직접 설계해서 follow하는 식으로 진행을 해보아야 할터인데, 주말에 틈틈히 해보려고 한다. 사실 키즈가오 첫 실습때 이 보다 어려운 페이지가 있을까라고 생각했는데, 포탈 사이트는 정보도 많고 레이아웃도 생각보다 복잡하여 잘 다져야겠다는 생각이 든다. 미디어쿼리와 애니메이션 부분은 현재 naver 실습으로 와서 못하고 있는데 이 부분도 복습을 해야할 것 같다. 반복 만이 살길이다.