1장 - HTML 기본 다지기
1. 웹 문서에는 텍스트뿐만 아니라 이미지, 링크 등 여러 요소들이 있는데, 이런 것들을 모두 다루고 표시하기 위해 필요한 언어가 HTML이며, 이는 Hyper Text Markup Language의 약자이다.
2. HTML로 작성된 웹 문서를 사용자들이 보기 쉽게 보여주는 프로그램이 웹 브라우저입니다.
3. 내용과 디자인이 뒤섞여 제작되는 기존 HTML의 한계를 극복하기 위하여 HTML을 이용해서는 내용을 나열하고 CSS를 이용해서 웹 문서의 디자인을 구성한다는 아이디어가 바로 웹 표준입니다. 사용자의 동작에 반응하는 인터랙션이 필요하다면 이는 자바스크립트로 처리하도록 했습니다.
4. 웹 접근성이란 웹에 있는 콘텐츠를 어떤 장애에도 구애받지 않고 누구나 사용할 수 있도록 제작해야 한다는 것입니다.
5. HTML 소스를 입력할 때 텍스트를 입력할 수 있는 편집기로는 텍스트 편집기와 HTML 전용 편집기, 위지위그 편집기 등이 있습니다.
6. HTML로 웹 사이트를 만들고 그 내용을 다른 사람들이 볼 수 있도록 하려면 HTML로 만든 웹 문서를 모두 서버로 옮겨야 합니다.
7. 인터넷 회선을 통해 서버 컴퓨터에 접속하는 사용자 컴퓨터를 클라이언트라고 합니다.
2장 - HTML5와 시맨틱 태그
1. 사람들이 소스를 쉽게 이해할 수 있도록 '의미가 통하는'이라는 영어 단어를 사용한 말로 HTML5부터 도입된 태그를 시맨틱 태그라고 합니다.
2. 시맨틱 태그는 <body> 태그와 </body> 태그 사이에 넣습니다.
3. <header> 태그는 특정 부분읜 머리말에 해당합니다. 주로 사이트 맨 위쪽이나 왼쪽에 넣으며, 검색 창이나 사이트 메뉴를 삽입합니다. 본문 중의 제목을 표시할 수도 있습니다.
4. <nav> 태그는 문서 안에서 혹은 다른 문서로 연결하는 링크를 나타내며, 위치에 영향을 받지 않습니다. 문서 안에 여러 개를 사용할 수 있습니다.
5. <section> 태그는 문서에서 콘텐츠 영역을 나타내는 것으로, 문맥의 흐름 중에서 주제별로 콘텐츠를 묶을 때 사용합니다.
6. 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 씁니다.
7. <aside> 태그는 본문 내용 외에 주변에 표시되는 기타 내용들을 나타냅니다. 사이드 바는 주로 왼쪽이나 오른쪽에 배치하지만 아래쪽에 표시하기도 하며, 필수 요소가 아니기 때문에 필요할 경우에만 사용합니다.
8. <footer> 태그를 사용한 푸터에서는 저작권 정보나 제작자 정보를 표시할 수도 있고, <head> 태그나 <section> 태그를 사용해 별도의 콘텐츠를 삽입할 수도 있습니다.
9. 시맨틱 태그를 인식하지 못하는 브라우저를 위해 시맨틱 태그를 display:block 문을 이용해 블록 레벨 요소로 만들어야 합니다.
3장 - 텍스트와 하이퍼링크 관련 태그들
1. <p> 태그는 텍스트 단락을 만들기 때문에 이 태그를 적용한 텍스트 앞뒤에서 줄바꿈이 일어납니다.
2. 인용할 내용을 표시할 경우에는 <blockquote> 태그나 <q> 태그를 사용합니다. <blockquote> 태그는 텍스트 블록을 만들기 때문에 인용문 앞뒤로 줄바꿈이 일어나고, <q> 태그는 인라인으로 표시되기 때문에 따옴표와 함께 표시됩니다.
3. HTML 소스에 표시된 공백을 그대로 표시하려면 <pre> 태그를 사용합니다.
4. <time> 태그는 내용 중에서 날짜나 시간과 관련된 부분에 사용되는 시맨틱 태그입니다.
5. 텍스트를 진하게 하는 태그는 <strong>과 <b> 태그이고, 이탤릭체로 표시하는 태그는 <em>과 <i> 태그입니다.
6. <b> 태그는 강조의 의미 없이 굵게 표시합니다.
7. 목록을 만들 때는 <ul> 태그와 <ol> 태그를 사용하는데, 순서가 필요하지 않을 경우에는 <ul> 태그를 사용하고, 순서가 필요할 경우에는 <ol> 태그를 사용합니다. 그리고 <li> 태그를 사용해서 각 항목을 표시합니다.
8. <dl> 태그와 <dt> 태그, <dd> 태그를 사용하면 '제목'과 그에 대한 '설명'으로 이루어진 정의 목록을 만들 수 있습니다.
9. <table> 태그와 <tr>, <td>, <th> 태그를 사용하여 하나의 표를 만들 수 있습니다.
10. <col>이 태그나 <colgroup> 태그를 이용해 열을 묶을 수 있고, 열끼리 묶어서 원하는 스타일을 지정할 수 있습니다.
4장 - 멀티미디어를 다루는 태그들
1. 웹 문서에 이미지를 삽입할 때는 <img> 태그를 사용하며 src 속성에 정확한 파일 경로를 지정해야 합니다.
2. 이미지가 보이지 않을 경우에 대비하여 alt 속성을 이용하여 대체 텍스트를 추가합니다.
3. <figure> 태그와 <figcaption> 태그를 이용하면 이미지나 오디오, 비디오를 비롯해 표 등 여러 대상에 캡션을 붙일 수 있습니다.
4. 멀티미디어를 삽입하기 위해 HTML4에서는 <object> 태그를 기본으로 하고, 비표준인 <embed> 태그를 함께 사용했습니다.
5. HTML5의 <audio> 태그와 <video> 태그를 이용하면 별도의 플러그인 프로그램 없이 웹 브라우저에서 직접 오디오나 비디오를 재생할 수 있습니다.
6. VP8 코덱은 오픈 소스 코덱으로 webm이라는 파일 형식에서 사용합니다. 구글의 크롬 브라우저를 비롯하여 파이어폭스, 오페라 등에서 지원하며, 인터넷 익스플로러에서도 플러그인 형태로 지원합니다.
7. 아직까지는 주요 웹 브라우저들이 H.264 코덱과 테오라 코덱을 따로 지원하기 때문에 <video> 태그를 사용할 때 최소한 두 종류의 동영상을 함께 사용해야 합니다.
8. 둘 이상의 동영상을 함께 삽입한다면 <video> 태그에서는 동영상의 크기와 기타 속성을 지정해 주고, 코덱에 따라 달라지는 동영상 파일의 위치는 <source> 태그를 따로 사용해서 연결합니다.
9. <video> 태그의 contols 속성은 동영상 화면에 동영상을 제어할 수 있는 컨트롤 막대를 표시할지 여부를 지정합니다.
5장 - 폼과 관련된 태그들
1. 폼을 만드는 가장 기본적인 태그는 <form> 태그로 여는 태그와 닫는 태그 사이에 여러 폼 요소와 관련된 태그를 넣습니다.
2. 여러 폼 요소를 나열할 때는 <ul> 태그와 <li> 태그를 사용하여 목록처럼 일렬로 나열합니다. 이때 CSS를 이용해 불릿이 표시되지 않도록 지정하여 깔끔한 폼을 만들 수 있습니다.
3. <fieldset> 태그로 여러 요소를 그룹으로 묶을 수 있고, <legend> 태그로 구역에 제목을 붙입니다.
4. <label> 태그를 사용해 폼 요소에 캡션을 붙입니다.
5. 사용자가 입력하는 부분은 대부분 <input> 태그를 이용하는데, type 속성을 이용해 어떤 폼 요소를 넣을지 결정합니다.
6장 - 스타일시트 기초
1. HTML이 텍스트나 이미지, 표 같은 각 요소를 웹 문서에 넣는 것이라면, CSS는 텍스트의 색상과 크기, 이미지 크기나 위치, 표의 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당합니다.
2. CSS라는 용어는 Cascading Style Sheet의 약자입니다.
3. 여러 가지 스타일 규칙들이 있는데, HTML 마크업 소스와 구별하여 쉽게 관리할 수 있도록 스타일 규칙만 한 곳에 모아놓은 것을 스타일시트라고 합니다.
4. 스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야 하기 때문에 모든 스타일 정보는 <head>태그와 </head>태그 안에서 정의합니다.
5. 특정한 부분에 스타일을 적용할 때 클래스 선택자는 문서 안에서 여러 번 반복해서 적용할 수 있는 반면, id 선택자는 요소의 크기나 위치 등 레이아웃을 지정할 때 주로 사용하므로 문서 안에서 한 번만 적용합니다.
6. 하위 요소에 스타일을 적용할 때 하위 선택자에서는 자식 요소뿐만 아니라 자식의 자식 요소, 즉 손자 요소에까지 스타일이 적용되는 반면, 자식 선택자에서는 바로 밑의 하위 요소, 즉 자식 요소에만 스타일이 적용됩니다.
7. 같은 레벨에 있는 형제 요소들에 스타일을 적용할 때 인접 형제 선택자는 형제 요소 중에서 첫 번째 동생 요소에만 스타일이 적용되는 반면, 형제 선택자는 모든 형제 요소에 다 적용됩니다.
8. 위치를 기준으로 하는 선택자 중에서 첫 번째 자식 요소에 적용할 스타일을 정의할 때는 :first-child 선택자를 사용하고, 마지막 자식 요소에 적용할 스타일을 적용할 때는 :last-child 선택자를 사용합니다.
출처. Do it! HTML5+CSS3 웹 표준의 정석
'Programming' 카테고리의 다른 글
| HTML5+CSS3 - 웹 프로그래밍 준비 (0) | 2016.09.03 |
|---|---|
| HTML5+CSS3 - HTML 태그 정리 (0) | 2016.09.03 |
| HTML5+CSS3 - <head> 태그 (0) | 2016.09.03 |
| HTML5+CSS3 - lang 속성 (0) | 2016.09.03 |
| HTML5+CSS3 - html 문서 내의 특수기호 (0) | 2016.09.03 |