HTML
HTML이름설명(http://hpitos.tistory.com/8)
Hyper Text Markup Language.
한가지 중요한 점이 HTML 태그를 사용함에 있어서
CSS나 JavaScript에서 표현 가능한 동적 처리 표현은 사용을 지양하는 것이 좋다.
cf) 인터넷 크롤링을 하였을때
(인터넷 크롤링 : 웹 정보를 수집하는 봇들이 HTML내용을 긁어서 DB에 저장한다음 사용자가 검색한 키워드와 자신이 저장한 내용을 비교해 우선순위 높은 것을 나타내준다.)
예를들어 : <strong></strong> 이라는 태그안에 감싸져 있는 컨텐츠를 크롤러가 중요한 내용인줄 알고 판단할 수 있는 계기를 만들어 줄 수 있다. (<strong>하면 효과를 받는 컨텐츠가 굵게 표시된다.)
cf) <br> 태그는 글의 개행을 시키는 것에만 사용한다. (무조건 글안에만 사용할 것!!)
cf) <h*> 태그는 <strong>과 비슷한 개념 h1, h2, h3.... 진행하는데 h1이 가장 크다.
HTML 기본 태그를 알고가자
<CSS나 JavaScript에서 표현 가능한 동적 처리 표현은 사용을 지양!!>
| 시작표기 | 끝 표기 | 설명 |
| <Html> | </Html> | Html의 시작과 끝을 알린다. |
| <Head> | </Head> | Html문서의 머릿말이라고 할수 있다. |
| <Title> | </Title> | 브라우저의 상태바에 나타낼 이름을 정의한다. |
| <Body> | </Body> | 본문의 시작을 알린다. |
| <!- | -> | 주석처리를 알린다. 사이에 들어가는 내용들은 |
| 소스보기에서는 보이지만 실제 브라우저에서는 안보인다. | ||
| <P> | 줄바꿈과 동시에 한 줄이 두개의 단락으로 분리된다. | |
| <Br> | 줄바꿈을 하지만 그 단락은 하나로 묶여 있다. | |
| <Pre> | </Pre> | Html의 문서를 작성시의 문서로 보관한다. (고정의 역할) |
| <Font> | </Font> | 폰트에 속성을 부여할 시작을 알린다. |
| <Font Size=""> | </Font> | "" 속에 폰트의 크기를 입력한다. 1~7 까지 표현이 가능하며 기본값은 3 이다. |
| <Font Color=""> | </Font> | "" 속에 폰트의 색을 입력한다. 기본적으로 내장된 객체를 사용할 수 있으며(Red,Blue,White 등) RGB 컬러를 입력할수 있다. |
| (#ff0000,#cccccc,#ffffff 등) | ||
| <Hr> | <Hr Align="" Width="" Size=""> | 브라우저에 줄을 표시한다. Align은 정렬을,Width는 좌우크기를 Size는 줄의 굵기를 나타낸다. |
| <Hr> | <Hr Align="" Width="" Size=""> | 브라우저에 줄을 표시한다. Align은 정렬을,Width는 좌우크기를 Size는 줄의 굵기를 나타낸다. |
| <Center> | </Center> | 사이에 들어가는 모든 객체를 가운데로 정렬한다. |
| <Strong> | </Strong> | 글짜를 굵게 표현한다. |
| <B> | </B> | 글짜를 굵게 표현한다. |
| <Em> | </Em> | 글짜를 Italic 체로 표현한다. |
| <I> | </I> | 글짜를 Italic 체로 표현한다. |
| Background="" | 배경에 이미지 경로를 삽입할수 있다. | |
| Body,Table,Tr,Td 등 여러군데 삽입이 가능하다. | ||
| Bgcolor="" | 배경에 색상을 삽입할수 있다. | |
| Body,Table,Tr,Td 등 여러군데 삽입이 가능하다. | ||
| <Blink> | </Blink> | 글짜를 깜빡이게 해준다. |
| <U> | </U> | 글짜에 밑줄을 그어준다. |
| Underline의 약자로 보인다. | ||
| <A Href=""> | </A> | 객체에 하이퍼링크 속성을 부여한다. |
| 클릭시 정의된 주소로 페이지가 이동하며 | ||
| 그 기본값은 "_Self" 다. | ||
| Target="" | Target="_Parent" 한프레임 위로 주소를 이동한다. | |
| Target="_Blank" 새창으로 주소를 연다. | ||
| Target="_Self" 현재페이지에서 주소를 이동시킨다. | ||
| Target="_Top" 포함된문서에서 가장 상단의 프레임의 주소로 페이지를 이동시킨다. | ||
| <A name=""> | </A> | 현재 보고 있는 페이지에서 지정된 이름을 가진 갈고리 TAG소스로 이동한다. |
| <Table> | </Table> | 테이블의 시작과 끝을 알린다. |
| <Tr> | </Tr> | 줄의 시작과 끝을 알린다. |
| <Td> | </Td> | 칸의 시작과 끝을 알린다. |
| Colspan="" | 가로칸을 "" 속의 수만큼 합친다. | |
| Rowspan="" | 세로칸을 "" 속의 수만큼 합친다. | |
| <Td Align="" | 칸 속에 정렬방식을 지정한다. (좌우) | |
| Center,Left,Right | ||
| <Td Valign="" | 칸속에 정렬방식을 지정한다. (상하) | |
| Top,Middle,Bottom,Baseline | ||
| <Img src=""> | </Img> | 이미지태그의 시작과 끝을 알린다. |
| <Img src="" Align=""> | 이미지의 정렬방식을 지정한다. | |
| <Img src="" Width=""> | 이미지의 좌우 크기를 지정한다. | |
| <Img src="" Height=""> | 이미지의 높이 크기를 지정한다. | |
| <Img src="" Vspace="" Hspace=""> | 이미지의 여백을 지정한다. | |
| <Img src="" Border=""> | 이미지의 테두리선을 지정한다. | |
| <Imf src=""Alt=""> | 이미지가 해당 경로에 위치하지 않을경우 "" 속에 적힌 글짜로 대처되며, 화면을 설명하기 위해 사용되기도 한다. |
(표 참고:http://2verworks.tistory.com/8)
HTML 치트시트 사이트 : http://overapi.com/html
'WEB (Feat.FOO) > WEB 정리' 카테고리의 다른 글
| 2.(4) 정리 : 프로그래밍언어 번역방식 (0) | 2017.01.06 |
|---|---|
| 2.(3) CSS문법 : 선택자 사용해보기(맛보기) (0) | 2017.01.05 |
| 2.(2) 정리 : CSS, HTML에 CSS적용 방식 (0) | 2017.01.05 |
| 1. 정리: 백엔드와 프론트엔드 그리고 웹서버 (0) | 2017.01.03 |