Search results

'0x01 Programming/0x013 HTML5&CSS3'에 해당하는 글들

  1. 2012.09.26  # 가상 클래스
  2. 2012.09.20  # 박스모델
  3. 2012.09.19  # CSS의 특수 선택자
  4. 2012.09.18  # HTML문서에 CSS를 적용하는 세가지 방법
  5. 2012.08.27  #콘텐츠의 흐름, 블록레벨 요소와 인라인 요소
  6. 2012.08.27  #HTML5의 새로운 요소(hgroup,article,section)
  7. 2012.08.25  #CSS3 배경지식 쌓기
  8. 2012.08.25  #HTML5 문서계층 구조

가상클래스



맏이만 선택해 주는 :first-child 가상클래스


가상클래스는 특정한 '사건'이 발생하면 사용할 수 있습니다. 그리고 특정한 '조건' 에도 사용할 수 있습니다.


:first-child 가상 클래스는 동일한 요소 중 가장 앞에 위치한 요소를 선택하도록 도와줍니다.


HTML 마크업

<ul>

<li>은혜갚은 까치</li>

<li>신데렐라</li>

<li>흥부놀부전</li>

<li>백설공주</li>

</ul>

CSS

li:first-child {font-weight:bold;color:red;font-size:25px;}


위의 예제는 4개의 동화 이름을 <ul>을 이용해서 목록으로 만든 것입니다. CSS를 보면 :first-child 가상 클래스를 이용해서


맨 앞에 있는 <li>만 텍스트의 크기와 색상을 바꾸도록 해두었습니다. :first-child는 이처럼 지정한 태그 중 가장 선두에 


위치하는 녀석을 선택할 수 있게 해줍니다. 결과 화면은 다음 그림과 같습니다.





라디오 버튼과 체크박스가 체크되어 있는지 점검하는 :checked 가상클래스


해당 클래스는 CSS3에 새로 추가된 가상 클래스입니다. 라디오 버튼이나 체크박스는 사용자가 직접 체크하고 체크를 해제할 


수 있는 UI 입니다. 이것들이 체크 되었을떄는 'checked'속성을 가집니다. 이 가상 클래스는 'checked' 속성을 가져와서 


동작합니다. 


HTML 마크업

<label><input type="checkbox" /><span>하하하</span></label>

CSS

input:checked+span {font-weight:bold; color:#ff0000;}


체크박스가 체크된 상태일 경우 <span>으로 감싸져 있는 텍스트를 굵게 하고 빨간색으로 만듭니다. 형제선택자 '+' 와 


':checked' 가상 클래스 선택자를 결합하여 사용하였습니다.


':checked' 가상 클래스가 작동하면 <span> 에 있는 글자의 스타일을 바꾸도록 되어 있습니다.


 참고로 이 선택자는 IE 8 이하 버전에서는 작동하지 않습니다.





자유롭게 반복하거나 선택하여 요소를 스타일링하는 :nth-child 가상클래스


:nth-child 가상 클래스는 CSS3에서 새로 소개된 가상 클래스입니다. 


해당 클래스를 사용하면 테이블에서 격줄로 건너뛰면서 색상을 칠해주는 등 사용자에게 시각적인 효과를 부여할 수 있습니다.


HTML 마크업

<ul>

<li>은혜갚은 까치</li>

<li>신데렐라</li>

<li>흥부놀부전</li>

<li>백설공주</li>

</ul>

CSS

li:nth-child(odd) {font-weight:bold;color:red;font-size:25px;}



<:nth-child 가상 클래스에서 받을 수 있는 인자의 종류>


odd 

홀수번 요소만 순서대로 선택함 

even

짝수번 요소만 순서대로 선택함 

숫자 

 임의의 숫자값을 넣어서 자유자재로 선택


Example) tr:nth-child(2n + 1) , tr:nth-child(4)


─ tag  CSS3, html5, 가상클래스

박스모델




박스모델 개념 잡기


HTML문서는 여러 개의 태그로 이루어져 있습니다. 


HTML문서에서 사용되는 모든 요소는 각각 하나의 박스라고 생각하면 이해하기 쉽습니다. 


<div>도 박스고, <span>도 박스입니다. <p>도 박스고 <img>도 박스입니다. 


각 요소들이 저마다 하나의 박스인 셈입니다. 



<CSS의 HTML 태그의 박스모델 구조도>


박스모델을 가장 쉽게 이해하는 방법은 콘텐츠 부분과 보더 부분, 즉 요소의 경계선 부분을 보는 것입니다.


실제로 패딩과 마진은 여백이 생기는 것 외에는 눈에 띄지 않지만 콘텐츠와 보더는 눈에 보이는 부분이고 


색을 주거나 꾸밀 수도 있습니다. 콘텐츠와 보더 사이에 여백을 주고 싶다면 패딩을 주면 됩니다.





CSS로 웹페이지의 디자인을 만들어 가는 작업의 대부분은 이 박스모델을 어떻게 다루느냐에 따라 달렸습니다.


패딩과 마진을 조정하면서 페이지의 전체적인 레이아웃과 세부적인 레이아웃을 잡아 나갑니다.


<p>안녕하세요. p태그를 이용해서 박스모델 하나를 만들었습니다.</p>

<p> 태그의 박스모델 생성


 {border : 1px solid #000; ; width : 300px; ; padding : 10px;}

<p> 태그에 검정색 테두리 , 너비를 300px , 양쪽에 10px씩 패딩 적용


자 그럼 둥근 모서리를 갖도록 고쳐볼까요?



 {border : 1px solid #000; ; width : 300px; ; padding : 10px; , border-radius : 20px;}

사방에 20px의 값을 준 border-radius 속성이 적용된 모습


─ tag  CSS3, html5, 박스모델

특수선택자


CSS에서는 태그 이름과 클래스 이름, 아이디 이름을 이용한 선택자 외에도 특수한 선택자들을 제공합니다. 


이 특수한 선택자들의 문제는 일부 브라우저에서만 작동되는 경우가 많다는 것입니다. 


반면 CSS의 특수한 선택자들을 자유자재로 이용한다면 jQuery와 같은 프레임워크를 활용하는 데 매우 큰 도움이 될 것입니다. 


또한 앞으로 브라우저들이 특수한 선택자들을 더 많이 지원할 전망이기 때문에 희망적이라고 할 수 있습니다.





전역선택자


전역선택자는 별 선택자라고도 부릅니다. CSS2에서 추가된 선택자입니다. 흔히들 다음과 같이 사용하고 있을 것입니다.


* {margin : 0; padding : 0;}

* 선택자를 이용해서 페이지 내에 있는 모든 요소의 마진과 패딩을 0으로 초기화


이 CSS의 코드는 보통 CSS문서의 최상단에 넣어서 사용할 것입니다. 문서에 있는 모든 요소의 마진과 패딩을 '0'으로 초기화합니다. CSS의 전역 선택자인 '*'은 운영체제의 '*'과 비슷한 역할을 합니다. 


다른 예제 들도 알아보겠습니다.


div * {color : red;}

div 안에 있는 자식요소들 속에 포함된 텍스트를 빨간색으로 칠함


요소 * 방식으로 스타일을 사용하면 해당 요소 아래에 있는 요소들에 스타일 적용이 된다.


* div {color : red;}

모든 div 안에 있는 텍스트를 빨간색으로 칠함


div * strong { color : red;}

div 안에 있는 자식요소들 중 모든 strong에 포함된 텍스트를 빨간색으로 칠함


전역선택자는 이처럼 전역 선택자가 지정한 요소 아래에 있는 모든 요소의 속성을 일괄적으로 바꿀 때 유용합니다. CSS의 기본적인 상속을 무시하고 강제 적용합니다.




인접한 형제 선택자


형제 선택자를 잘 활용하면 조금 더 정밀하게 스타일을 적용할 수 있습니다. 인접한 형제 선택자는 '+' 기호로 사용합니다.


h1 + p {color : red;}

<h1> 태그와 가장 가까이 있는 <p> 태그 내에 텍스트를 빨간색으로 칠함.





속성 선택자


HTML 태그에는 다양한 속성들이 함께 사용됩니다.


예를 들면 img 태그에는 alt 라는 확장 태그가 있습니다. alt 속성은 이미지를 식별 할 수 있는 텍스트를 넣을 수 있습니다.


<img src="google.gif" alt="구글">

<img>태그에 구글의 로고 이미지를 불러오고 '구글'이라는 텍스트를 alt속성에 부여


img[width|="500"] {border : 10px #ff0000 solid;}

<img> 태그로 가져온 이미지의 너비가 500px인 경우 10px두께의 빨간 테두리를 침

<img src="google.gif" width="500" alt="구글">






CSS는 HTML문서를 스타일링해 줄 디자인 정보를 가지고 있습니다.


HTML 문서에 CSS를 이용해서 디자인을 적용하는 방법에는 크게 3가지가 있습니다. 





태그에 직접 스타일을 주는 방법



<a href="http://www.monoeyes.com" style = "font-weight: bold; color:red;">쏭군 블로그</a>

<태그에 직접 스타일 적용하기>


이 방법은 딱 하나의 태그를 위해 사용하는 방법입니다. 


위의 코드에서는 해당되는 <a> 태그 하나에만 굵고 빨간 효과가 적용됩니다. 


다른 태그들에게는 아무런 영향도 미치지 않습니다.


이 방법은 아주 부득이한 사정이 없는 이상 사용을 피하는 것이 좋습니다. 


사이트의 규모가 크고, 페이지의 수량이 많은데 일일이 이런 방식으로 스타일이 붙어 있다면,


 사이트를 수정하거나 유지보수하는 데 많은 애로 사항이 있을 것입니다. 


그러나 어쩔 수 없이 써야 한다면 그 경우에는 예외입니다.





<style> 요소를 활용하여 HTML 내에서 사용하는 방법


<html>

<head>

<meta charset="UTF-8">

<title>CSS 연습</title>

<style type="text/css">

a {"font-weight: bold; color:red;"}

</style>

</head>

<body>

<a href="http://www.monoeyes.com" >쏭군 블로그</a>

</body>

</html>

<HTML 문서 내에 <style>태그를 사용하여 CSS적용하기>


이 방법은 HTML 파일의 <head> 또는 <body>에 <style> 태그를 선언함으로써 사용이 가능합니다. 


이 방법은 스타일이 삽입된 HTML파일, 즉 페이지 하나에 전부 영향을 미칩니다.


단, 해당 HTML파일 이 외에 다른 HTML파일에는 아무런 영향도 미치지 않습니다.





외부의 CSS파일을 링크하는 방법


a {"font-weight: bold; color:red;"}

<style.css>

<html>

<head>

<meta charset="UTF-8">

<title>CSS 연습</title>

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

</head>

<body>

<a href="http://www.monoeyes.com" >쏭군 블로그</a>

</body>

</html>


이 방법은 가장 널리 사용되는 방법입니다. 아예 웹사이트의 모든 디자인 정보를 CSS파일에 몰아넣고, 


HTML에서는 이 CSS파일을 링크하여 사용하는 방법입니다. 


이 방법은 CSS파일 하나로 여러 개의 웹페이지 디자인을 관리할 수 있다는 장점이 있습니다. 


또한, 미디어 타입을 지정하여 각 기기별로 최적화된 화면을 제공할 수 있습니다.





방법별 스타일을 적용하는 우선 순위


이 세가지 방법 중 스타일을 중복 적용하는 태그가 있다면 어떤 방식이 가장 우선적으로 적용될까요? 


그 순서는 다음과 같습니다.


  • 1순위 : 태그에 직접 스타일을 지정해 주는 방법
  • 2순위 : <style>요소를 이용해서 한 페이지에 스타일을 지정해 주는 방법
  • 3순위 : 외부의 CSS파일을 링크하여 스타일을 지정해 주는 방법



─ tag  CSS3, html5

HTML5도 엄연히 하나의 문서입니다. 당연히 이 문서 안에는 글도 들어갈 수 있고 그림도 들어갈 수 있습니다. 


글과 그림은  일반 워드프로세서의 문서처럼 나열되면서 흐르게 됩니다. 그러나 일반 워드프로세서와 다른 점이 있습니다.


그것은 바로 HTML문서에는 블록레벨(block level)요소와 인라인(inline)요소라고 하는 두 개의 큰 흐름의 줄기가 있다는 겁니다.





블록레벨 요소


<div>나  <p>,<h1>과 같은 요소들은 블록레벨 요소입니다. 블록레벨 요소의 특징은 줄 바꿈 태그인 <br>과 같은 요소를 


쓰지 않아도 스스로 줄 바꿈이 된다는데 있습니다. 이 요소들은 기본적으로 문서 내에서 가로로 흐르지 않고 세로로 흐릅니다.


그리고 주변에 일정량의 공간을 만듭니다. 또한 너비를 지정해 주지 않으면 풀사이가 되어 가로로 가득 찹니다. CSS를 


적용하지 않고 이 요소들을 브라우저에서 확인해 보면 세로로 쭉 나열되는 것을 볼 수 있습니다. 블록레벨 요소는 


가로, 세로 일정량의 여백을 가지고 있는데 이것은 브라우저마다 조금씩 다릅니다.


<h1>블록레벨 요소</h1>

<p>블록 레벨 요소는 BR태그 없이도 기본적으로 세로로 요소가 정렬됩니다.</p>

<div>너비는 풀사이즈, 그리고 위아래에 약간의 여백도 자동으로 붙고요...</div>

<블록레벨 요소의 예>




인라인 요소


<img>, <span>, <strong>과 같은 요소들은 인라인 요소입니다. 


이 요소들의 특징은 줄 바꿈 태그를 사용하지 않거나 블록레벨 태그 안에 단독으로 포함하지 않는 한 가로로 쭉 나열된다는 데 있습


니다. 그리고 이 요소들의 주변에는 공간이 생기지 않습니다.


문법적으로는 인라인 요소 안에 블록레벨 요소가 들어가면 안됩니다. 블록레벨 요소 안에 인ㄹ아ㅣㄴ 요소가 포함되록 마크업해야


문법을 바르게 준수 할 수 있게 됩니다.


<span>인라인 요소 : </span>

<strong>가로</strong>쭉 나열됩니다. 물론 너비는 딱 자기가 가진 만큼만 가지고요.

<블록레벨 요소의 예>


블록레벨 태그 안에는 인라인 레벨 태그가 들어갈 수 있습니다. 아니 들어가야만 하는 경우가 많습니다.


그러나 문법적으로 인라인 레벨 태그는 블록레벨 태그를 담을 수 없습니다. 

<블록레벨 태그와 인라인 레벨 태그를 쉽게 이해할 수 있는 구조도>


인라인 레벨 태그는 기본적으로 옆으로 흐릅니다. 블록레벨 태그는 아래로 흐릅니다.


너비 또한 화면 전체를 차지합니다. 


자 그러면 도대체 언제 어떤 태그를 사용해야 할까요?


특정단어를 강조하고 싶을때는 <b>태그보다 <strong>태그를 사용하는 것이 좋습니다. 외관상으로는 두 태그 모두


텍스트를 굵게 보이게 하여 강조해 주지만, <b>태그는 단지 굵게 만들어 줄 뿐 강조하는 아무 의미가 없는 태그입니다.


반면에 <strong>태그는 외형적으로도 텍스트를 굵게 해주고 실제로 의미있는 텍스트라고 강조해 주는 역할도 합니다.


웹사이트의 메뉴나 목록형태의 콘텐츠를 만들 때는 <ul>과 <li>태그를 조합합니다.


만약에 사이트의 이용약관과 같이 목록 앞에 일정한 숫자를 순차적으로 붙이고 싶을 때는 <ol>, <li> 를 이용하면


관리하기도 쉬운 훨씬 의미 있는 마크업이 됩니다.


<span>이나 <mark>와 같은 태그는 특정한 부분에 별다른 의미를 부여하지 않아도 시각적으로 무언가 효과를


주고 싶을 때 사용합니다. <span>으로 감싸고 CSS로 접근을 하여 스타일링을 하면 되겠습니다.


이 밖에도 주로 레이아웃을 짜거나 박스를 만들 때는 <div>를 많이 사용했는데, HTML5에서는 이것이 조금 더 세분화 되었습니다.


부분별로 <header>, <footer>, <section>과 같은 태그를 사용하면 됩니다.




<앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3> 에서 발췌





헤드라인을 여러 개로 묶을 필요성이 있을 때 사용하는 hgroup 요소


만일 페이지에 산발적으로 여러 개의 헤드라인을 묶어 줘야 할 필요가 있을 경우 HTML5에서는 다음과 같이 hgroup 요소를 이용할 


수 있습니다.


<header>

<hgroup>

<h1>쏭군 블로그</h1>

<h2>열심히 살아가는 88만원 세대의 이야기</h2>

</hgroup>

</header>

<article>

<hgroup>

<h1>최근 올라온 글</h1>

<h2>최근에 올라온 글을 시간 순으로 표현합니다.</h2>

</hgroup>

<section>

<hgroup>

<h1>봉사활동</h1>

<h2>나도 그들도 짠했던 이야기</h2>

</hgroup>

</section>

<section>

<hgroup>

<h1>자전거 구입</h1>

<h2>싼 녀석을 구하기 위한 사투 스토리</h2>

</hgroup>

</section>

</article>

<aside>

<hgroup>

<h1>위젯 사이드바</h1>

<h2>개인적으로 좋아하는 위젯들 모임</h2>

</hgroup>

</aside>

<hgroup>태그의 사용 예


앞서 과거에 사용되던 방식을 사용하는 것도 괜찮습니다. 


그러나 HTML5에 추가된 <hgroup> 요소 덕분에 이 예제 코드와 같은 방식으로도 헤드라인 태그를 사용할 수 있게 되었습니다. 


H1이나 H2와 같은 높이 단계에 있는 헤드라인 요소들도 이제는 문서의 최상단의 전유물이 아니라,


 각 섹션이나 아티클 등 어디에서나 꾸릴 수 있게 된 것입니다.  이렇게 하면 각 콘텐츠가 훨씬 독립적으로 보입니다. 


문서의 의미만 잘 구현된다면 헤드라인을 어떻게 사용하여도 큰 문제는 없습니다. 다만, 앞서 설명한 방식대로 콘텐츠를 쪼개 


각 콘텐츠에 높은 레벨의 헤드라인을 부여하여 의미를 담을 수 있다는 정도를 알아둔다면 나중에 요긴하게 활용할 때가 있을 겁니다.





독립된 개별 콘텐츠를 담는 article, section 요소


섹션 요소에는 서로 다른 의미를 가진 콘텐츠를 담을 수 있습니다. 예를 들면 블로그에서 각 포스트를 요약해 둔 메인페이지가 


꾸며진 경우를 볼수있는데, 그 요약된 포스트들의 묶음을 <section>태그로담고 각개별 포스트는 <article>태그로 묶으면 됩니다.


빨간색 박스로 되어 있는 부분은 <section>태그로 감싸고, 파란색 부분은 <article>태그로 담아내면 될 것입니다. 


<section>

<article>

<h1></h1>

</article>

<article>

<h1></h1>

</article>

<article>

<h1></h1>

</article>

<section>


<article> 요소에는 완전히 떼어내 다른 사이트에 붙여도 그 의미를 사용자가 알 수 있는 콘텐츠를 담으면 됩니다.



<앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3> 에서 발췌









─ tag  article, CSS3, hgroup, html5, section

만약 팀 내에 웹페이지를 디자인하여 PSD를 만드는 디자인 팀과 이 PSD를 웹페이지로 만들어 내는 UI개발팀이 따로 있다면


아래와 같은 갈등이 있기 마련입니다. 


멋진 효과를 내기 위해 투명 PNG핵, 나아가 과도한 마크업과 불필요한 CSS 코드, 더 심각한 경우에는 온갖 스크립트와 CSS 핵까지 동원 해야하는 경우가 있습니다.




CSS2.1에서 CSS3로의 변화


단편적인 예를 들기는 했지만 CSS3를 마음껏 사용할 수 있는 브라우저가 널리 이용된다면 이 문제는 해결될 것입니다.


현재는 익스플로러 9 이 CSS3를 본격적으로 지원할 예정이고, 웹킷 기반의 크롬이나 사파리에서는 CSS3 속성을 


상당 부분 지원합니다. 그리고 오페라나 파이어폭스 역시 중요한 CSS3 속성을 많은 부분 지원하고 있는 상황입니다.


CSS3의 많은 속성을 활용하여 기존에는 이미지로 처리해야 했던 많은 부분을 이미지 없이 CSS 코딩만으로 표현할 수 있게 


되었습니다. 또 반투명 효과, 그라데이션이 적용된 그림자나 안티앨리어싱이 적용된 라운딩 박스와 같이 특정한 스타일의


처리를 위해서 여러 개의 HTML 마크업 요소를 덕지덕지 바르고 거기에 지저분한 스타일시트를 추가해야 했던 것을 


단 한줄의 CSS코드만으로 해결할 수도 있게 되었습니다. 이건 CSS작업자들에게 혁명과도 같은 일입니다.


이제 작업을 더 빨리 끝내고 휴식시간을 갖고나 디자인을 더 정교하게 다듬는 작업에 시간을 써도 될 것입니다.


또, 효과말고도 CSS를 이용하면 플레시에서나 구현이 가능하던 다양한 애니메이션을 구현할 수도 있습니다. 


이부분이 CSS3의 또 다른 큰 특징입니다. 





CSS의 역할 - 콘텐츠와 디자인의 분리


많은 디자이너나 UI개발자들에게는 국내에서 1990년대부터 2000년대 중반까지는 웹페이지를 만들 떄 


콘텐츠와 디자인을 분리한다는 개념조차 없었습니다. 


2000년대 초중반부터 발 빠른 분들이 이 개념을 도입하여 전파하기 시작하였지만 크게 확산 된 것은 불과 몇 년 되지 않습니다.


HTML5      +     CSS

웹페이지의 콘텐츠 정보를 보유                           웹페이지의 디자인 정보를 보유


<HTML에서는 문서의 콘텐츠 정보를 , CSS에서는 문서의 디자인 정보를 담아 이 둘을 합치면 디자인이 가미된 웹페이지가 완성됩니다.>


기존에는 테이블로 레이아웃을 나누고, 시멘틱한 웹페이지의 의미도 모른채 중요한 텍스트 문구나 데이터를 이미지로 만들어 


덕지덕지 붙여 가며 웹사이트를 만들었습니다. 중요한 텍스트가 gif나 jpg파일로 되어 있다면 과연 기계는 이 이미지에 있는 텍스트의 


의미를 어떻게 알아낼수 있을까요? 이미지에 alt 태그라도 붙여준다면 다행이지만 이런 방법은 웹사이트를 완전히 엉망으로 만드는 


지름길이었습니다. 얼마간 웹표준을 준수하여 웹사이트를 만들자는 물결이 유행처럼 일었지만 현재는 이런 방식으로 사이트를 만드


는 일이 별로 없습니다.


그렇다면 왜 HTML 마크업과 CSS를 분리해야 할까요? 


우선 HTML페이지에 담겨 있는 콘텐츠가 의미 있는 콘텐츠가 되기 때문입니다. 


읽을 수 없는 콘텐츠가 아니라 어떤 기기에서라도 읽을 수 있는 살아있는 콘텐츠가 됩니다. 또, 디자인 유지보수 작업이 생겼을 


때 유지보수가 쉬워집니다. 단 한 줄의 CSS코드만 바꾸어도 무한대의 웹페이지 디자인을 한 번에 바꿀 수 있습니다.




<앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3> 에서 발췌




HTML문서 계층 구조는 구조를 중시하는 트리구조와 아웃라인과 컨텐츠 구성을 중시하는 두가지로 나누어 볼수 있습니다.




구조를 중시하는 트리구조


<body>

<div>

<ul>

<li></li>

</ul>

<img>

</div>

<nav>

</nav>

</body>


위의 코드와 같은 구조를 가진 문서가 있다고 가정합시다. 쉽게 설명하기 위해 다른 코드는 생략하였습니다.


박씨 집안의 시조가 박혁거세이듯이 <head> 부분을 제외하고 이 문서에 있는 모든 태그들의 시조는 <body>입니다.


<body> 요소는 문서의 모든 요소들을 담고 있습니다. 말을 만들자면 시조태그인 셈입니다. 


<div><body> 요소의 자식태그입니다. 반대로 <div>에게 <body>태그는 부모태그입니다.  


한 계층 차이가 나기 때문입니다. 그러면 이 예시에서 <div><li>의 관계는 어떻게 될까요? 


<div>에게 <li>요소는 손자태그입니다. 반대로 <li>에게 <div>요소는 할아버지 뻘이 됩니다.





 아웃라인과 콘텐츠 구성을 중시하는 구조


이미 HTML 페이지를 마크업해 온 사람들은 익숙하겠지만, 방금 설명한 것은 가장 기본적인 트리 형태의 구조입니다. 


물론 HTML5에서도 이런 단순 트리 형태의 구조를 사용할 수 있지만 추가된 개념이 있습니다.


기존에는 문서하나에 H1  헤더 하나가 붙고, 각 하위 콘텐츠 별로 H2 태그가 붙는 탑다운 방식으로 문서 하나를 완성했습니다.


그러나 HTML5 문서는 각 섹션이 별도의 H1 태그를 가져도 무방합니다. 박스별 콘텐츠들은 독립된 하나의 문서가 될 수 있습니다.


여러 문서가 합해져 하나의 HTML파일이 된다고 생각하면 이해하기가 쉬울까요?


또한, 기존에는 <div> 이용해서 레이아웃을 구성했습니다. 헤더에 해당하는 부분은 <div class="header"></div>,


푸터에 해당하는 부분은 <div class= "footer"></div>, 이런식으로 많이 사용했습니다.


HTML5에서는 이런 부분들을 조금 더 세분화하여 <header> 태그가 추가되었고, <footer> 태그가 추가 되었습니다. 


이밖에도 많은 구성요소들이 추가되어 아웃라인을 살린 마크업 페이지를 만들 수 있게 되었습니다.


HTML5에서는 구조보다는 컨텐츠의 '구성'더 중요해졌습니다. 



<앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS3> 에서 발췌





openclose