💻 학습 내용

🛫GIT-HUB

HTML | naver_ent_news_haeder
CSS | naver_news_ent_header

HTML | naver_ent_news_main_left(1)
CSS | naver_ent_news_main_left(1)

CSS | ent_news 초기값

.ent_container {
	width: 980px;
	margin: 0 auto;
}


.ent_flex_start{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ent_flex_center{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.ent_flex_end {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

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

.end_border{
	border: solid 1px #000;
}

🖤 flex로 공간의 위치를 설정해주는데, class값으로 css에서 먼저 만들어 주고 나서 사용을 해주면 코드가 훨씬 더 깔끔해지며 가독성이 올라간다.

#ent_main .ent_container {
	overflow: hidden;
}

🖤 .ent_container의 밑에 있는 자식 공간들의 높이값을 인식할 수 있게 하기 위하여
overflow: hideen;을 입력해 주었다.

ent_news_header

ent_news_main_left(1)

🖤 한줄말줄임표 max-width 값을 설정해주어야 레이어의 변형이 일어나지 않는다.

📝 마무리

🖤 main_left 부분에서 레이어 두개를 겹쳐서 디자인을 꾸며나가는 부분을 또 배웠다. 레이어가 겹쳐지기 위해서는 position relativ와 posititon absoulte를 활용해야 하였다. 앞으로도 position의 활용도는 훨씬 더 높아질 것 같아서 기대가 된다.

🖤 letter-spacing : 글자간 좌우 간격 조정

몇주간의 기록이 쌓이다보니 내가 자주하는 실수가 무엇인지 알게 되었다.
나는 여전히 .과#을 헷갈려한다. 오늘도 실수하여 css가 적용이 되지 않았다.
하지만 이제는 그 실수와 오류를 바로바로 찾을 수 있게 되어 오류를 고치는데 걸리는 시간이 많이 줄어들었다.

앞으로도 개발일지를 꾸준히 쓰면서 내가 놓치는 부분이 무엇인지 기록하고 복기할 수 있도록 하겠다.