HTML 2.기본요소

.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 등

좋은 웹페이지 즐겨찾기