1.학습한 내용

(1) 페이지 실습
네이버 뉴스 왼쪽 영역과 오른쪽 영역을 제작하고 추가로 footer영역에 대해 강의에는 없지만, 직접 실습해서 제작해 보았다.

△ 좌측 헤드라인 뉴스와 정치란 우측 가장 많이 본 뉴스

△ 계속 연속되는 영역과 우측 광고란

△ 우측 TODAY란

△ main 영역의 끝인 언론사 목록, 분야별 목록 그리고 footer 영역

(2) 학습한 내용
월말 평가

틀린문제 피드백

h1이라고 하는 주어를 보지 못하고 max-width: 700px;이라는 것에만 초점을 맞추어서 트린것 같다. h1 size는 조절이 가능하나 위에 code로는 조절 불가능하다. font-size로 조절 하여야 한다.

보자마자 후다닥 체크를 하고 넘어가버렸는데 매번 하면서 넘어가던 것이였는데 틀려 버렸다.

css code

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #000000;
}

img {
	vertical-align: middle;
}

button {
	border: none;
}

input, textarea {
	outline: none;
}


.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}

이런 초기화 과정을 거쳐야 브라우저 상관없이 향후 수정 작업이 필요하지 않아서 편하다. 내가 체크한 답은 style 태그로 HTML에 css를 넣어서 하는 것이 복잡해지는 것을 막기위해서 하는 방식이다.

정답은 파란색인데 항상 div tag안에 class나 id선택자를 넣어서 진행하던터라서 div.test{} 라는 양식으로는 써본적인 없어서 무의식중에 빨간색으로 한것 같다. 실제 code를 넣어도 파란색이 나온다. css에 tag를 직접 넣어서 실습한적이 없어 무심결에 넘어갔던터라 틀린듯 하다.

2. 실습

깃허브 소스코드:

naver 뉴스 -2 ( 나머지영역 ) 실습 HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/43

naver 뉴스 -2 ( 나머지영역 ) 실습 css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/44

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

<div class = "news-main-wrap news-custon">

과 같이 하나의 div tag안에 동일 스타일로 지정한 것(여기서는 class)는 css에서 붙여서 써야 한다.

.news-main-wrap.news-custom

.news-main-wrap. news-custom

띄워쓰면 다른 class로 적용이 되어 버린다.

이점을 간과하고 계속 오타가 있는 줄 알고 헤매게 되었다.
주말에 복습을 하면서 강의를 들으면서 놓쳤던 부분을 찾아보아야 겠다.

4.소감

벌써 교육과정의 50%가 끝이 났다.
엄밀히 웹 프로그래밍은 배운지 1달정도가 되었는데 그동안 배우면서 발전을 많이 했지만, 아직까지 많이 부족하다.
footer영역을 따로 만들어보았는데, 혼자서 만들어보니 계속 어디선가 꼬여서 결국에는 main page의 code를 참조하고 변형하면서 진행을 하였다.

다음달에도 이런식으로 변형을 하면서 feedback을 하여야 겠다.

사실 코딩이 재능이 있는 사람이면 웹 프로그래밍 정도는 그냥 1달만에 능숙하게 된다고 하지만, 부족함을 많이 느기게 되었다. (월말 평가를 통해서도..)