영화 페이지 스케치 _ 5. 블록으로 영화소개 페이지 만들기

[이 글은 전문 웹 개발자를 위한 글이 아닙니다. 승환이와 같이 여행을 다닌다 생각하고 편하게 그림책을 보듯 

입문자들을 위한 글입니다.

이 글은 퍼즐을 풀듯이 재미, 흥미를 가지고 편하게 접근하는 글입니다.

내용은 글쓴이의 사실에 바탕을 둔 픽션입니다.

참고 자료 : Head First HTML and CSS - 개정판 HTML5

바로써먹는 HTML + JavaScript + Css + DHTML

NHN_Coding_Conventions_for_Markup_Languages

web-standard-guide

jQuery]

지난회까지 친구의 웹 페이지를 마무리 하고 잠시 사무실에 앉아 '영화나 볼까?' 생각하고 파일을 뒤지고 있던 중 

'음... 내가 본 영화 정리나 해볼까?' 라는 생각으로 

개략적인 디자인 스케치에 들어갔다. 

  

자 개요를 HTML로 변환해 볼까? 

'아 중간에 인용구가 있네 <q>요소와 <blockquote> 요소를 적절히 사용해야겠다.'

<q>이 영화는 실존 인물과 사건을 바탕으로 하지만 허구입니다</q>

<blockquote>대한민국 주권은 국민에게 있고<br>

모든 권력은 국민으로부터 나온다<br>

국가란 국민입니다.</blockquote>

잠시 블록 요소와 인라인 요소를 살펴볼까? 

음 블록 요소에는 : <h1>, <h2>, <p>, <blockqoute> .....등이 있겠군 

그럼 인라인 요소에는 : <q>, <a>, <em> 

블록 요소는 웹 페이지를 만드는 데 주요한 건축 자재로 사용되는 반면 

인라인 요소는 콘텐츠의 작은 부분을 표시 

TIP : 이것은 CSS와 HTML의 프레젠테이션을 제어할 때 성과가 생긴다 

       또한 디자인에 의해 어떤 HTML 콘텐츠도 가지고 있는 않은 요소를 빈요소라고 부른다 <br>, <img> 같은 빈 요소를 사용

       할 필요가 있을 때, 우리는 시작 태그만 사요하면 된다. 이는 HTML에서 마크업의 양을 줄일 수 있는 편리한 속기법이다.