HTML 태그,사용법

HTML 기본

content : text, html<tag>만 기재 가능
<></> : 태그 열고 닫기가 1set
<font(태그) size(속성)=""(속성값)>
html 공백 디폴트 : 1칸
외태그인 경우 <태그 />

---

HTML 태그

1. <title> : 인터넷 상단탭 타이틀
   

<>

2. <h3> : h 헤드라인, 숫자 : 글씨 크기

   • 볼드체로 표기, 헤드라인 쓸 때 사용
   • 폰트 크기 1~7까지 가능

3. <font> : 폰트 변경 태그
   1) size="숫자" : 폰트 크기 (1~7까지 가능)
   2) color = 폰트 색상 (ex: red, #F6CED8)
   3) face = 폰트 이름 (cf: 폰트가 없는 경우 해당 폰트로 안보임)
   4) style : 폰트 스타일 관련 설정 (폰트 사이즈 크게 하고 싶을 때 사용)
   - 1) font-size : 폰트 크기
   - 2) color : 폰트 색상

4. 폰트 스타일
   1) <u> : 밑줄
   2) <i> : 기울기
   3) <b> : 굵게

5. <hr> : 밑줄
   1) width="숫자px": 가로 길이(픽셀,%로 설정 가능)
   2) size="숫자": 두께
   3) color="색" : 색상
   4) align="위치" : 정렬 (디폴트:center / left, right, top, bottom)

6. <p> : 속성 설정 (tag 필요 X)
   1) align="위치"

7. &+lt &+gt : 꺽쇠 (<>)

8. <br/> : 줄바꿈

9. &+nbsp; : 공백 1칸

10. <ul> : 글머리 기호가 붙은 목록 생성
    ** <li> : ul 하위에 리스트 생성 필수
    1) type="모양" : 글머리 기호 모양(네모(검),동그라미(검),동그라미(빈칸))

11.<img> : 이미지 삽입
1) alt : 이미지가 없을 때 대체할 단어
2) src : 파일 경로("./폴더/파일이름.확장자) //확장자도 대소문자 구분
cf) src는 소스로 사진 파일의 경로를 따라 다이렉트로 찾아감
3) align
4) weight, height : 가로,세로 길이 지정 가능

12. <a> : 하이퍼링크
    1) href="주소" : 클릭시 이동할 링크
    2) target : 링크 여는 방법
    -target="_blank" : 새탭에서 페이지 열기
    3) <img> : 이미지를 누르면 사이트로 연결되게 설정 가능
    4) 링크명 : 입력한 링크명에 밑줄친 채로 나타남
    cf) 하이퍼링크 밑줄 없애는 방법
    - style="text-decoration: none;"

13. <span> : 문자열만 스타일 변경 가능
    1) style : 폰트색 등 지정 가능
    

14. <style> : 부분적으로 스타일 적용할 때 사용
    1) type : 스타일 타입(텍스트 등)
    2) font-size : 폰트 크기
    3) font-family : 폰트명
    4) font-weight : 폰트 두께

15. <input> : 입력값을 받을 수 있음(ex: 아이디/비번 입력 칸 등)
    1) type : 입력될 타입
    - text : 텍스트(입력한 대로 텍스트 표시)
    - password : 텍스트가 *로 표시(ex: 비번 등에 사용)
    - radio : 여러개의 항목 중 1개만 선택가능(중복 X)
    - button : 버튼 (value값을 주면 버튼안에 값이 나타남)
    - file : 파일 불러오기 (웹에선 파일 불러오는 버튼 생성)
    - checkbox : 체크박스
    등이 있음
    2) size : 입력될 폰트 크키
    3) checked : checked로 설정하면 웹에서 체크된 상태로 표시
    cf) name이 같으면 하나의 family
    - ex) type이 radio일 때 family면 1개의 그 중 1개 선택 가능
    
    

16. <select> : 선택 가능한 목록 생성
    - 하위 메뉴 <option>값</option>
    - select 태그 뒤에 multiple 지정 : 스크롤바 기능이 있는 목록 생성

    

17. <textarea> : 큰 텍스트 칸 생성(사이즈 늘리기 가능)
    1) rows : 줄(행)
    2) cols : 열
    

---

<TABLE> 생성

<table>

<tr><td></td></tr>

** 테이블 안에 행<tr>, 열<td> 로 구성 (1행 안에 1개 이상의 열로 구성)

** 폰트 사이즈는 td에서 직접 지정 가능(테이블에서 불가 X)

** 테이블 넓이 조절(숫자,숫자px) / 행,열 넓이 조절(숫자)

1. border : 테이블 선 두께 (0부터 시작 : 선 X)

2. cellpadding : 테이블과 글씨 사이 간격

3. cellspacing : 테이블 선 간격(굵기) //이중선으로 구성

4. width, height : 가로, 높이 지정가능(px로 설정)

5. align : 가로 정렬

6. valign : 세로 정렬(top,middle,bottom)

7. colspan : 열 합침

8. rowspan : 행 합침

9. bgcolor : 배경색 (열 지정가능)

table 안에 table 넣기

테이블 생성 -> 행 생성 -> 열 생성 -> 열 안에 테이블 생성 -> 행 생성 -> 열 생성

---

** css 파일과 연결하여 사용가능

1. css파일에서 body{}, 클래스{} 등을 만들어 스타일 지정
2. <link> 태그 안에 하이퍼링크로 css파일 경로를 지정해 연결
3. body{}는 본문 전체에 스타일이 적용, 테이블{}은 테이블에 적용, 클래스{}는 지정한 부분에서 적용 가능

body{} : 문서의 몸통 부분

• 폰트 사이즈 등 스타일을 지정하면 문서 전체에 적용

td{} : 열에 적용될 스타일 지정

.c1 : 클래스

• 클래스에 스타일 지정 후 부분적으로 적용해 사용
  cf) #c1 : 더 큰 범위에 적용할 때 사용

<코드>

<결과>