.HTML 문서 작성시 주의사항

기본서식

• 대소문자를 가리지 않으나 되도록 소문자로 통일
• 시작태그와 종료태그
  • <h1></h1>
• 들여쓰기(indent) 필수
• 불필요한 띄어쓰기 no필요

텍스트 서식

• <em> : 강조해야 할 때
• <strong> : 중요한 텍스트
• <mark> : 하이라이트된 텍스트
• 모든 텍스트 스타일은 CSS를 이용하는 것이 원칙
• 볼드 텍스트 : CSS의 font-weight 속성 사용

.태그

기본

• <br> : 강제 줄 바꿈
• <p> : 단락
  • 단락의 전후에 빈줄이 추가됨
• <pre> : 잘안씀
  • 프로그래머가 입력한 그대로 화면에 표서
  • previously formatted text
• <h1> : h1 ~ h6, 헤딩(heading)
• <!-- --> : 주석

.목록표시

리스트

• 항목들을 나열하는데 사용
• li,di,dd 리스트 항목 표현
• 리스트 항목 안에도 텍스트, 이미지, 링크, 다른 리스트를 넣을 수 있다.

ul > li

• 순서가 없다
• ul 태그의 type 속성 : 전체 항목에 대한 type을 설정한다.
  • disc : ●
  • circle : ○
  • square : ■

<ul>
	<li>항목1</li>
	<li type = "circle">항목2</li>
	<li type = "disc">항목2</li>
	<li type = "square">항목2</li>
</ul>

ol > li

• 순서가 있는 목록을 만드는 형식이다.
• ol 태그의 type 속성 : 전체 항목에 대한 type을 설정한다.
  • 1 : 숫자 (1, 2, 3 ... 기본)
  • A : 알파벳 대문자
  • a : 알파벳 소문자
  • i : 로마숫자 ⅰⅱⅲ ...
  • I : 로마숫자 ⅠⅡⅢ...
  • start : ol 태그에 사용하며 시작값을 임의로 설정할 때 사용한다.
  • value : li태그에 사용하며 해당 항목부터 순서값이 변경할 때 사용한다.

<ol type="i" start="11">
	<li>항목1</li>
	<li type="a">항목2</li>
</ol>

di

• 항목들과 함께 항목들의 정의(설명)가 표시되는 리스트
• dt : definintion term 의 약자로 용어의 제목을 나타내는 태그이다. 줄바꿈 기능이 있다.
• dd : definintion description 의 약자로 용어에 대한 설명을 나타내는 태그이다. 줄바꿈 기능이 있다.

.하이퍼링크(링크)

a

<a href="목적지 주소"target="_blank">구글방문</a>

.href 속성

• 링크의 목적지

.target 속성

• 링크 클릭 시, 새로운 페이지가 어디에 열리는 지 지정
• _blank : 새로운 윈도우 새로운 페이지
• _self : 현재 윈도우 새페이지
• _parent : 부모 프레임 새로운 페이지
• _top : 현재 윈도우에 새로운 페이지를 적재하고 모든 프레임을 취소한다
• <hr> : 수평선 웹페이지

.id 속성

• html 요소의 고유 id 지정, 공백을 포함하면 안됨

.이미지

표현방법

• <img> : 이미지를 웹페이지에 삽입할 때 사용
• src : 이미지 파일 이름을 지정
• width : 가로
• height : 세로
• alt : 브라우저가 어떤 이유로 이미지를 화면에 표시하지 못했을 경우에 표시되는 대체 텍스트

종류

JPEG(JPG)

• 실사사진, 복잡하고 많은 색상으로 이루어진 이미지에 적합
• 1600만개의 색상
• 손실 압축 방식, 약간의 데이터는 영구히 사라진다

PNG

• 클립아트, 적은수의 색상
• 무손실 압축방식, 투명배경

GIF

• 로고 클립아트 형태의 이미지에 적합
• 256색상만을 지원
• 투명 배경과 애니메이션을 지원

.테이블 만들기

테이블 기본 사항

tr: table row

th: table header

td: table data

• <table> </table>
• <tr> </tr> : table row, 하나의 행 표현
• <td> </td> : table data, 하나의 데이터 표현
• <th> </th> : table header, 각 열의 제목(헤더)
• <tr>로 행을 만들고 그 안에 <td></td>를 사용

테이블 병합

행병합 (row span)

• rowspan = 2, 현재 셀위치에서 2개의 행을 병합

열병합 (column span)

• colspan =3, 현재 셀 위치에서 3개의 열을 병합

.iframe

• Inline Frame 의 약자
• 웹페이지 안에서 다른 웹페이지를 표시하고자 할 때 사용
• 링크의 타겟 프레임으로 사용될 수 있음
• 링크의 타겟 속성은 ifram에서 지정된 이름을 참조

.div & span

div

• divide의 약자
• 페이지를 논리적인 섹션으로 분리하는데 사용되는 태그
• 자체적으로 특별한 의미가 없으며 블록수준(block-level)의 요소로서
  모든 html요소를 묶는데 사용
• 블록 수준의 요소는 하나의 줄을 전부 차지함
• 주로 웹페이지의 레이아웃을 작성하는데 사용
• div 폭과 넓이 지정가능, span 못함
• div 필연적으로 줄 바꿈을 동반

span

• 자체적으로 특별한 의미가 없으며 인라인수준(inline-level)요소로서 텍스트를
  묶어 스타일을 적용할 때 사용함
• 인라인 수준의 요소는 자신이 필요한 크기만 차지하는 요소임
• 인라인 요소는 지정할 수 없음(width, height가 적용되지 않음)
• span 줄 바꿈 없고 문장 중간에 들어갈 수 있음
• table 태그 대신 div와 span 태그로 더욱 간결한 html을 구성할 수 있음
  
  
  

참고

• 아래 항목 많이 씀!!
• placeholder
• disabled
• readonly
• maxlength (전화번호, 우편번호)

.Block & Inline

Block-level

• 사용가능한 최대 가로 너비를 사용
• 크기 지정 가능(너비, 높이)
• margin, padding 속성이 상하좌우 여백을 온전하게 사용 가능
• 레이아웃을 위한 용도로 사용
• div,ul,ol,dl,dt, h1~h6,li,p,table 등

Inline-level

• 필요한 만큼의 너비만 사용
• 크기 지정 불가
• margin, padding 속성의 좌우여백만 사용 가능
• 텍스트를 다루는 용도로 사용
• a,br,b,code,strong,img,span 등