[HTML] HTML의 기본태그 (2)
1. li, ul, ol태그
li요소는 리스트, 속성: value 목록 아이템의 순번을 지정( ol요소의 자식으로 사용된경우에 한함)
ul요소는 아이템의 순서가 중요하지 않은 목록을 나타내며 <ul></ul> = <li>의 부모격 태그로 공간을 나눌수있다.
<ol> </ol> = <li>의 부모격으로 자동으로 숫자를 앞에 나타내준다.
2.table 태그
표를 만들수 있는 태그이다. table이 가지는 속성들이 몇가지있지만 배운것들만 먼저 정리하겠다.
<td> </td> 태그- 테이블 데이터의 약자로 표의 값들 을나타내며 따로따로 지정 해야함
<tr> </tr> 태그 -표의 한행 그룹을 묶어주는 태그. 그위를 table로 감싼다
표안에서 맨위 제목 부분에 해당하는것은 <thead> </thead>
내용 부분은 <tbody></tbody> 또한 제목부분은 <td>가아니라 <th>로 묶는다.
<tfoot> </tfoot> 은 맨밑부분에 해당하는 표로서 합계같은것을 나타낼때 사용한다.
표병합하는 법
행 병합하는것 - <td rowspan=“2”>@@</td>
행으로 2칸 병합 이므로 그밑에 쓸모없는것은 지워도된다
열병합하는것 - <colspan=“3”>
열로서 3칸 병합
3. title태그
title요소는 HTML문서의 타이틀을 지정 이는 브라우저의 타이틀바에 표시된다.
head요소 안에서 반드시 한번만 지정해야 한다.
4. meta태그
어떤데이터를 설명하는 태그라고 쉽게 이해했다.
속성
- name : 문서의 메타데이터를 설정
- http-equiv : 전처리 구문 지시자
- content : name속성이나 http-equiv속성을 사용했을 때 함께 명시
- charset : 문자 인코딩 방식을 명시
만약 name이나 http-equiv중 하나를 사용했다면 반드시 content속성을 사용해야 한다. 사용하지않는다면 지워야한다.
Ex)
<meta name = “description” content = “기본개념 자료”> 이런식으로 어떤 자료의 요약 소개
<meta name = “keyword” content=“코딩, 자바, it공부등”>
<meta name = “author” (저자) content = “ 함종석”>
<meta http-equiv=“refresh” content= “30”>
위의 뜻은 웹페이지가 30초간격으로 리프레쉬 한다
한글이 안나오는 해결법 - Utf-8로 웹도 열게끔 해결해주면된다
<meta charset=“utf-8”>
5. head, body, html
head요소는 문서에 사용되는 메타데이터 집합을 나타낸다.
body요소는 문서의 본문을 나타내며 올바른 문서에서는 하나의 body요소만이 존재해야 한다.
이모든것을 묶어주는 최고위층 태그 <html></html>
<html> 태그위에 이문서는 html이다 라는것을 알려주기위해 <!doctype html>를 먼저써준다 ~
<html lang=“ “
lang을 하는이유는 구글, 네이버와 같은 검색엔진들에게 도움을 주기위해서이다.
언어를 무엇을 쓰는지를 알려준다.
<link rel="shortcut icon" href="https://www.naver.com/1" />
rel="shortcut icon" 이것은 페이지를 킬때 옆에작은 아이콘이다.
<meta property= “og image” content=“링크”> o g 이미지는 카카오톡에서 링크를 보낼때 사용되는 이미지
O g : ~~~~~~ 카카오에서사용댐
.