210804_[28]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_8_NAVER_ent-news_3__오른쪽영역_end

홍연수·2021년 8월 4일
0

https://naradesign.github.io/float-clearing.html

1.학습한 내용

(1) 페이지 실습
네이버 연예 뉴스의 오른쪽 영역에 대한 작업을 진행하고 페이지 작업을 마무리 하였다.

(2) 학습한 내용

button 작업시 붙이기


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을 외워서 적재적소에 써먹는 것이 좋을듯하다.

2. 실습

깃허브 소스코드:

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

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

특별히 어려운 부분은 없었으나, 어제와 엊그제 내용이 어려웠던 부분이 많았다.
오늘은 강의 시간이 적었으니 다시 연예 뉴스 파트 전반에 대해 feedback을 하는 시간을 가져야겠다.

4.소감

naver라고 하는 우리나라 대표 site의 각 페이지 구성이 어떤지를 느낄수 있고, 사실 개발자 도구를 통해서 직접 설계해서 follow하는 식으로 진행을 해보아야 할터인데, 주말에 틈틈히 해보려고 한다. 사실 키즈가오 첫 실습때 이 보다 어려운 페이지가 있을까라고 생각했는데, 포탈 사이트는 정보도 많고 레이아웃도 생각보다 복잡하여 잘 다져야겠다는 생각이 든다. 미디어쿼리와 애니메이션 부분은 현재 naver 실습으로 와서 못하고 있는데 이 부분도 복습을 해야할 것 같다. 반복 만이 살길이다.

profile
일단 하는 개발자

0개의 댓글