1. 태그는 소문자로 씁니다.
// 대문자랑 혼용 사용 금지
2. 여는 태그와 닫는 태그를 정확히 입력합니다.
// 닫는 태그가 없는 경우도 있다.
// ex) <img> <br>
3. 적당하게 들여쓰기 합니다.
4. 태그는 속성과 함께 사용됩니다.
// <태그 속성 = "속성 값" 속성 = "속성 값" ...>
// ex) <img> 태그에는 이미지 파일의 경로를 알려주는 src 속성
이미지의 크기를 알려주는 width, height 속성
이미지에 보조 설명을 붙여주는 alt 속성
... 등이 같이 붙는다.
5. 인코딩 방식은 utf-8로 합니다.
// <meta charset = "utf-8">
// why? utf-8이 모든 언어를 표시할 수 있는 문자세트이기 때문에
6. 웹 문서에서 특수 문자 및 특수 기호 사용하기
1. 한글모음 + 한자키
2. 만약 HTML에서 공백이나 괄호 같은 문자들을 소스 기호로 인식하지 않고 그대로 화면에 표시하려고 할 때에도 특수 기호를 이용하면 된다.
// & &
// (공백 한 칸)
// < <
// > >
// " "
// | }
// ( (
// ) )
// . ,
// - -
// ' ´
HTML 문서의 구조
<!doctype html>
// 문제 유형을 지정하는 태그
// "HTML 문서이고 어떤 유형을 사용했다"라는 것을 알려주는 태그이다.
<html>
// 웹문서의 시작
<html lang = "ko">
// 문서에서 사용할 언어를 지정
<head>
// 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들은 모두 <head>부분에 입력한다.
<meta charset="utf-8">
// 문자 인코딩을 지정
<title> 문서 제목 </title>
// 웹 브라우저의 제목 표시
</head>
<body>
// 실제 브라우저에 표시될 내용을 입력
// 대부분의 태그가 쓰일 곳
</body>
</html>
// 웹문서의 마지막
자주 쓰는 기본 태그 익히기
<hn> 태그 - 제목 표시하기
1. 제목 텍스트는 일반 텍스트보다 크기가 크고 진하게 표시된다.
2. <h1> 이 가장 크고 <h6>이 가장 작게 표시된다.
<p> 태그 - 텍스트 단락 만들기
1. 웹 문서에서 가장 많이 사용하는 태그들 중 하나
2. 반드시 닫는 태그를 사용하기
<br> 태그 - 줄 바꾸기
1. 웹 문서에서 가장 많이 사용하는 태그들 중 하나
2. 닫는 태그 없음
<b> 태그 - 텍스트를 진하게 표시하기
<i> 태그 - 텍스트를 이탤릭체로 표시하기
<img> 태그 - 이미지 추가하기
1. <img> 태그 안에 반드시 src 속성을 이용해서 삽입경로를 표시해야함
2. 닫는 태그 없음
<a> 태그 - 웹 문서나 외부 사이트 연결하기(하이퍼링크)
1. href 속성을 이용해 연결한 웹 문서 이름이나 웹 사이트 주소를 지정해야 함.
주석 - 설명글 추가하기
1. HTML 태그 주석: <!-- 주석내용 -->
2. CSS 주석 : /* 주석 내용 */
시맨틱 태그
// 이번 프로젝트의 Layout에서 가장 중요한 부분인 것 같다.
why?
1. 소스만으로도 문서내용을 알 수 있다.
2. 그래서 검색할 때 필요한 내용을 정확하게 찾을 수 있어 편리하다.
// 예를 들어 웹사이트의 실제 내용을 검사하고 싶을 때에는 <section> 과 <article> 부분만 // 찾아서 검사하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
<header>
<h1>입양하기</h1>
<nav>
</nav>
</header>
<section>
<article>
<h2>강아지 용품 준비하기</h2>
</article>
</section>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</body>
</html>
레이아웃을 위한 HTML5 시맨틱 태그들
//<body> 태그와 </body> 태그 사이에 들어갑니다.
<header> 태그 - 머리말(제목) 지정하기
1. 특정 부분의 머리말
2. 여러 태그에 동시에 사용 가능
// <form> 태그를 이용해 검색창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣는다.
<nav> 태그 - 문서를 연결하는 내비게이션 링크
1. <header> 나 <footer> 태그등에 포함시킬 수도 있고 독립해서 사용할 수도 있다.
//포함시키면 포함된 태그의 영향을 받음
<hn> 태그 - 제목 표시하기
1. 제목 텍스트는 일반 텍스트보다 크기가 크고 진하게 표시된다.
2. <h1> 이 가장 크고 <h6>이 가장 작게 표시된다.
<hgroup> 태그 - 제목과 부제목 묶어주기
1. 제목과 관련된 부제목들이 있다면 제목과 부제목이 서로 관련이 있음을 나타낼 수 있다.
2. 화면에 그 결과가 표시되지는 않지만, 문서의 구조를 편리하게 만든다.
<section> 태그 - 콘텐츠 영역 나타내기
1. <header> 태그, <footer> 태그와 비교해서 콘텐츠 영역을 구분 짓는 용도로 사용
2. 실제 내용은 <article> 태그를 사용
3. <section> 태그 안에 또 다른 <section> 태그를 넣을 수도 있다.
// 이 것으로 <section> 영역을 여럿으로 나눈다.
<article> 태그 - 실제 콘텐츠 내용 넣기
<aside> 태그 - 본문 이외의 내용 표시하기
<footer> 태그 - 제작 정보와 저작권 정보 표시하기
<address> 태그 - 사이트 제작자 정보, 연락처 정보 나타내기
1. <footer> 태그 안에 들어가는 태그
2. 실제 주소는 <p> 태그, 웹주소는 <address> 태그 사용
<div> 태그
1. 콘텐츠에 CSS를 적용할 때 <div> 태그를 사용한다.
댓글 없음:
댓글 쓰기