과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인권23네이버뉴스4_210521(4/5)
주제 : html / css

네이버 뉴스 페이지 카피

이전에 강의에 이어서 네이버 뉴스 페이지 TV연예 페이지를 카피했다. 어느 정도 진도가 지나면서 큰 작업들은 이전 과정의 반복이지만 곳곳에 디테일한 부분들이 있어 디자인 작업의 소소한 부분을 익히고 있다.

<li>
	<a href="#">
    	<div class="image-wrap">
			<img src="https://via.placeholder.com/148x85">
			<i class="icon-play"></i>
		</div>
		<h4>동해물과 백두산이 마르고 닳도록</h4>
	</a>
	<a href="#"></a>
		<span class="source">KBS</span>
		<span class="program">미스 몬테크리스</span>
	</a>
</li>

#ent_main .ent-left #ent_section_6 ul .source:after {
	display: inline-block;
	content: '';
	width: 2px;
	height: 2px;
	background-color: #d3d3d3;

	vertical-align: top;

	margin: 9px 2px 0 4px;
}

#ent_main .ent-left #ent_section_6 ul .program:after {
	display: inline-block;
	content: '';
	width: 5px;
	height: 5px;
	background-color: red;

	vertical-align: top;

	margin: 7px 2px 0 4px;
}

il 태그의 하단 span태그에 after속성을 사용하여 디자인적 요소를 표현하였다. 큰 의미의 다자인은 아니라고 생각하지만 속성의 사용방법을 익힌다는 점에서 이해하고 있다.

오늘 강의 중에서 a태그 속에 a태그를 사용할 수 없다는 내용이 있었다. 강사님의 설명은 문법적으로 맞이 않다는 것이였는데 자세히는 몰라도 아마 다른 태그와 다르게 a태그의 기능이 중복적으로 사용되어도 의미가 없기 때문에 굳이 중복하여 사용할 필요도 없다고 생각한다.

이와 같은 이유인지는 몰라도 처음 a태그를 중복하여 사용하였을 때 안쪽 a태그에 입력된 텍스트가 마치 em태그의 기본 속성과 같은 효과를 출력했던것 같다. 이후 설계도면 작업에서 a태그를 독립적으로 사용하였을 때, 텍스트의 효과가 사라졌다.

수직으로 정렬되는 리스트에 순서를 나타낸는 숫자를 함께 표시해주는 디자인이다. span태그로 순위를 표시하여 직접입력한 숫자이다. 다른 방법도 생각해보면 숫자를 담은 이미지로도 표현이 가능할 듯하다.

Review

강사님께서는 같은 결과를 출력되더라도 설계와 디자인에는 개발자 저마다의 여러 방법이 있다고 하셨다. 중요한 부분이라고 생각한다. 어떤 숫자를 나타내더라도 태그의 텍스트로 할지, 이미지로 할지 아니면 아직 내가 배우지 못한 전혀 다른 방법으로 할지 그건 개발하는 사람의 의도와 방향성에서 정해진다고 생각한다. 다만 그 방법이 좋은 방법인지 혹은 그렇지 않은지는 이후 문제 이겠지만 말이다.

어떤 분야에서든 여러 방법을 익히고 있다는 것은 중요한 부분이라고 생각한다. 내가 알고 있는 방법이 언제나 정답이 아니듯이 필요에 따라 활용할 수 있는 지식이 결국 전문성에도 영향을 주리라 생각한다. 알고 사용하지 않는 것과 몰라서 사용하지 못하는 것의 차이는 오래 볼 수록 더 티가나는 법이다.