참고 사이트
문서 작성시 주의사항
기본 서식
- 대소문자를 가리지 않으나 되도록 소문자로 통일
- 시작태그와 종료태그
- 들여쓰기(indent) 필수
<table></table>열고 닫기<table border="1">불필요한 띄어쓰기 no no
텍스트 서식
- b, i: 태그는 다른 모든 태그가 적절하지 않는 경우에만 사용
- em: 강조해야할 때
- strong: 중요한 텍스트
- mark: 하이라이트된 텍스트
- 모든 텍스트 스타일은 CSS를 이용하는 것이 원칙
- 볼드 텍스트를 만들려면 CSS의 font-weight 속성 사용
태그
기본
heading: h1~h6
br: 줄바꿈
p: 단락
- 단락의 전후에 빈줄이 추가됨
pre: 프로그래머가 입력한 그대로 화면에 표시
- previously formatted text
< !-- -- >: 주석
리스트
- 항목들을 나열하는데 사용
- li, di, dd: 리스트 항목 표현
- 리스트 항목 안에도 텍스트, 이미지, 링크, 다른 리스트를 넣을 수 있다
ul: 순서X
- type속성으로 리스트 표시모양 설정
- disc, circle, square
ol: 순서O
- type속성으로 리스트 번호 설정
dl: 정의
- 항목들과 함께 항목들의 정의(설명)가 표시되는 리스트
하이퍼링크(링크)
a
- 텍스트나 이미지에 링크를 걸고, 링크를 클릭하면 연결된 다른 문서로 이동
- 밑줄, 글자색 등 자동으로 스타일이 지정됨
구글 방문
<a href = "http://www.google.com" target="_blank"> 구글 방문 </a>href 속성
- 링크의 목적지
target 속성
- 링크 클릭 시, 새로운 페이지가 어디에 열리는지 지정
- ＿blank: 새로운 윈도우 새로운 페이지
- ＿self: 현재 윈도우 새페이지
- ＿parent: 부모 프레임 새로운 페이지
- ＿top: 현재윈도우에 새로운 페이지를 적재하고 모든 프레임을 취소한다
id 속성
- html 요소의 고유 id 지정, 공백을 포함하면 안됨.
이미지
표현 방법
- < img >: 이미지를 웹페이지에 삽입할 때
- src: 이미지 파일 이름을 지정
- width: 가로
- height: 세로
- alt: 브라우저가 어떤 이유로 이미지를 화면에 표시하지 못했을 경우에 표시되는 대체 텍스트
종류
JPEG(JPG)
- 실사사진, 복잡하고 많은 색상으로 이루어진 이미지에 적합
- 1600만개의 색상
- 손실 압축 방식, 약간의 데이터는 영구히 사라진다
PNG
- 클립아트, 적은수의 색상
- 무손실 압축방식, 투명배경
GIF
- 로고 클립아트 형태의 이미지에 적합
- 256 색상만을 지원
- 투명 배경과 애니메이션을 지원
테이블 만들기
테이블 기본 사항
- 표 형태의 데이터를 표시하는 데 사용됨
- 초기의 웹페이지에서는 전체 페이지의 레이아웃에 사용하였음
- 테이블은 일반 글자 또는 데이터를 표로 표현할 때만 사용하고 화면의 레이아웃은 스타일시트를 이용해서 표현하도록 해야함.
- 디자인적 요소는 무조건 CSS로. (border는 예외: "1" 혹은 "")
tr: table row
- 먼저 써서 행을 잡아주고 시작해야함
th: table header
td: table data
병합
row span (행병합)
- rowspan = 2, 현재 셀 위치에서 2개의 행을 병합하겠다
column span (열병합)
- colspan = 3, 현재 셀 위치에서 3개의 열을 병합
이 위까지 200914-1,2,3 세파일참조
iframe
- Inline Frame
- 웹 페이지 안에서 다른 웹 페이지를 표시하고자 할 때 사용
- 링크의 타켓 프레임으로 사용될 수 있음
- 링크의 타겟 속성은 ifram에서 지정된 이름을 참조
<a href="test.html" target="if_test">테스트</a>
...
<iframe src="test2.html" width="300" height="200" name="if_test" frameborder="0"></iframe>참고
- 200915-5.html
div & span
div
- divide의 약자
- 페이지를 논리적인 섹션으로 분리하는데 사용되는 태그
- 자제적으로 특별한 의미가 없으며 블록수준(block-level)의 요소로서 모든 html요소를 묶는데 사용함
- 블록 수준의 요소는 하나의 줄을 전부 차지함
- 주로 웹 페이지의 레이아웃을 작성하는데 사용함
span
- 자체적으로 특별한 의미가 없으며 인라인수준 (Inline-level)요소로서 텍스트를 묶어 스타일을 적용할 때 사용함
- 인라인 수준의 요소는 자신이 필요한 크기만 차지하는 요소임
- 인라인 요소는 크기를 지정할 수 없음(width, height가 적용되지 않음)
참고
- 200915-5.html
Block & Inline
Block-level
- 사용 가능한 최대 가로 너비를 사용
- 크기 지정 가능(너비, 높이)
- margin, padding 속서으이 상하좌우 여백을 온전하게 사용 가능
- 레이아웃을 위한 용도로 사용
- div, ul, ol, dl, dt, h1~h6, hr, li p, table 등
Inline-level
- 필요한 만큼의 너비만 사용
- 크기 지정 불가
- margin, padding 속성의 좌우 여백만 사용 가능
- 텍스트를 다루는 용도로 사용
- a, br, b, code, em, strong, img, span 등
갈 길이 멀다