🛫 깃허브 링크

HTML | NEWS_MAIN_RIGHT
CSS | NEWS_MAIN_RIGHT

HTML | NEWS_MIAN_LEFT
CSS | NEWS_MAIN_LEFT

💻 학습 내용

뉴스 페이지를 카피캣 하였다.
main_right 와 main_left 두 부분을 나누어서 진행을 하였다.

이번에는 저번과 다르게 flex로 공간 구분하는 법을 class명으로 미리 만들어 두고 html 코드에 해당하는 클래스 명을 입력하는 방법을 사용하였다.
이렇게 사용하니 css코드가 훨씬 깔끔해지고 가독성이 좋아졌다.

레이아웃의 변형을 막기 위해서는 동일한 큰 틀의 레이아웃을 만들어 두고 미세하게 다른 부분은 추후에 수정하는 것이 좋다.

위의 이미지를 보면 동일하게 파란색 네모가 이루어져 있는데 저렇게 한 줄로 맞추기 위해서는 max-width말고 width를 사용해야 한다.

📝 마무리

계속해서 카피캣을 하면서 외워야 하는 공식들이 아직 미숙하지만 암기가 되어가고 있다.
말줄임표를 만드는 코드도 외웠다

	display: inline-block;
	overflow: hidden;
	width: 140px;
	white-space: nowrap;
	text-overflow: ellipsis;

before 가상선택자를 활용하여 | 를 만드는 법도 익숙해졌다.

 	content: '';
	display: inline-block;
	width: 1px;
	height: 18px;
	background-color: #d5d5d5;
	vertical-align: -1px;

점점 작성해보면서 코드와 친해지고 있는 것 같아서 뿌듯하다!
주말 동안은 밀린 수업들 복습하면서 개발일지를 채워나가겠다!!!!