텍스트 표시
- 텍스트는 특별한 태그 없이도 < body >< /body >안에서 표시가능하지만
- 단락을 생성하지 않으면 모든 텍스트가 연결되어 하나의 긴 줄로 표시 됨
- < br > : 강제 줄바꿈 태그
- < p > : 단락 태그. 하나하나의 짧은 이야기토막. 단락 전후에 빈줄 추가됨
- < pre > : 프로그래머가 입력한 그대로 화면에 표시하는 태그
- < h1 ~ h6 > : heading. 웹페이지의 머릿기사
- < !-- 주석 --> : 코드를 설명하는 글
텍스트 서식
- < b > : 볼드체
- < i > : 이탤릭체
- < strong > : 강하게 표시
- < em > : 강조
- < mark > : 하이라이트(배경색상) 표시하여 강조
- < code > : 텍스트가 코드임을 표시
- < sup > : 위첨자
- < sub > : 아래첨자
- b, i 태그는 다른 모든 태그가 적절하지 않은 경우에만 사용
- 모든 텍스트 스타일은 CSS를 이용하는 것이 원칙
- bold 텍스트의 경우 CSS의 font-weight 속성 사용
특수문자
- html은 여러개의 공백이 이웃해 있더라도 하나의 공백으로 간주
- 여러개의 공백은 ** & n b s p ;** 여러개 사용
목록 표시
- ul : 번호없는 리스트 (unordered list)
- ol : 번호있는 리스트 (ordered list)
- dl : 정의 리스트 (definition list)
- li, dt, dd : 리스트 항목 표현
- 리스트 항목 안에도 텍스트, 이미지, 링크, 다른 리스트 넣을 수 있음
ul
- 순서가 없는 리스트
- type 속성으로 리스트 표시 모양을 설정할 수 있음
ol
- 순서가 있는 리스트
- type 속성으로 리스트 번호 설정할 수 있음
type="A" => A B C D ...
type="1" => 1 2 3 4 ...
type="i" => ⅰⅱⅲ ..
type="I" => ⅠⅡⅢ ...
dl
- 정의 리스트
- 항목들과 함게 항목들의 정의(설명)가 표시되는 리스트
하이퍼링크 : a 태그
- 텍스트나 이미지에 링크를 걸고, 링크를 클릭하면 다른 문서로 이동
- 밑줄, 글자색 등 자동으로 스타일이 지정됨
- 마우스를 올리면 손모양 커서로 변경됨
- href 속성 : 링크의 목적지
- target 속성 : 링크 클릭시, 새로운 페이지가 어디에 열리는지 지정
수평선 : hr 태그
- 수평선을 웹사이트에 삽입할 때 사용
hr태그
id
- html 요소의 고유 ID 지정. 공백 포함X
- 하이퍼링크를 걸어 특정 ID값을 가진 위치로 이동할 수 있음
- CSS에서 특정 ID를 가진 요소에 스타일 지정할 수 있음
이미지 : img 태그
- 이미지를 웹페이지에 삽입할 때 사용
- src : 이미지 경로
- width : 이미지 가로 크기
- height : 이미지 세로 크기
- alt : 이미지를 화면에 표시하지 못했을 경우 표시되는 대체 텍스트
이미지 종류
- JPEG
- 실사 사진과 같이 복잡하고 많은 색상으로 이루어진 이미지에 적합
- 1600만개의 색상 사용
- 손실 압축 방식 사용. 압축과정에서 약간의 데이터는 영구히 사라짐
- PNG
- 클립아트와 같이 적은 수의 색상을 가진 이미지에 적합
- 무손실 압축 방식, 투명배경 지원
- GIF
- 로고나 클립아트 형태의 이미지에 적합
- 256색상만을 지원
- 투명 배경과 애니메이션 지원
iframe 태그
- Inline Frame의 약자
- 웹페이지 안에서 다른 웹페이지를 표시하고자 할 때 사용
- 링크의 타겟 프레임으로 사용가능
- 링크의 target 속성은 iframe 에서 지정된 이름 참조
div 와 span
- html 요소는 div와 span을 이용해 묶을 수 있음
div
- divide의 약자
- 페이지를 논리적인 섹션으로 분리하는 데 사용되는 태그
- 자체적으로 특별한 의미 없음
- 블록 수준 (Block-level)의 요소로서 모든 html 요소를 묶는데 사용함
- 블록 수준의 요소는 하나의 줄을 전부 차지함
- 주로 웹 페이지의 레이아웃을 작성하는데 사용함
span
- 자체적으로 특별한 의미 없음
- 인라인 수준(Inline-level) 요소로서 텍스트를 묶어 스타일을 적용할 때 사용함
- 인라인 수준의 요소는 자신이 필요한 크기만 차지하는 요소
- 크기 지정할 수 없음 ( width, height 적용되지 않음)
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 등
