1. 태그 사용 시 주의사항
1) HTML Tag는 중첩 사용 가능
- 태그 안에 태그를 정의하는 방법(닫힘 순서에 주의). 안쪽 태그부터 닫자!
2) 부모 자식관계의 태그는 다른 태그를 넣지 않음
- <ol>이나 <ul>은 <li>만 갖는다. (<li>는 <ol>이나 <ul> 안에만 온다.)
- <dl>은 <dt>, <dd>만 갖는다.
- <table>은 <thead>, <tbody>, <tfoot>, <tr>만 갖는다.
- <tr>은 <th>나 <td>만 갖는다.
>> 다른 속성을 넣고 싶다면 자식 태그 안에서 넣으면 된다. <ol><li><string>..
3) 부모태그에 속성을 설정하면 자식 태그에 속성이 상속됨
자식태그에서 동일 속성을 사용하면 부모에서 전달된 속성은 소멸됨
4) 주석
<!-- 내용 -->
2. tag
1) 줄변경
- Web Browser는 엔터로 줄변경을 하지 않음
- <br> : 한 줄 바꿈 / 줄을 변경하고 싶은 곳에서 <br>을 사용! <br/> 보통 이렇게 사용함
: 문단 내에서 한 줄을 바꿀 때 사용 - <p> : 문단을 만들 때 사용
<p> 문단 내용 </p>
2) 글 목록
- <h1>~<h6>까지 제공됨
- <h1> 큰 글자 / <h6> 작은 글자
- 자동 줄변경의 기능이 있음
3) markup
<b> : 진하게
<strong> : 진하게 / reader기에서 강하게 읽어들일 수 있음
<i> : 이탤릭
<u> : 밑줄 / HTML5에서 지원하지 않음 (웹 브라우저에서는 그려서 보여주기는 함)
<strike> : 취소선 / HTML5에서 지원하지 않음
<mark> : 형광펜 효과 (HTML5에서 새로 지원된 태그)
<big> : 글자 크게 (HTML5에서 지원하지 않음)
<small> : 글자 작게
<sup> : 윗첨자
<sub> : 아랫첨자
3. 속성이 있는 tag
- 태그에 사용자가 값을 넣어 다양하게 사용해야 할 때
- 형식) <태그명 속성 = 값 속성 = 값,,,>
- 값은 3가지 형태로 넣음
① "로 묶어서 : 속성 = "값" // 값에 공백 포함 가능. 이걸 제일 많이 씀
② '로 묶어서 : 속성 = '값' // 값에 공백 포함 가능
③ 그냥 값으로 : 속성 = 값 // 값에 공백 포함 불가
- 태그 속성을 정의하는 순서는 없음
- 속성은 여러 태그에서 같이 사용하는 공통속성과 특정 태그에서만 사용하는 속성이 제공됨
1) 글자 태그
- 글자 크기, 글자 색, 글자모양을 변경하는 태그
- font는 글자만 갖는다. 테이블 등을 font태그가 가질 수 없음
- HTML5에서 지원하지 않음
<font size="크기" color="색깔" face="글꼴">글자</font>
> 크기 : 1~10
> 색 : 영어 (black, red)
RGB (#000000~#FFFFFF) // 앞에서부터 00:R, 00:G, 00:B
> 글꼴 : 컴퓨터에 설치된 글꼴 모두 사용가능.
(단, 클라이언트에 존재하지 않는 글꼴을 사용하면 클라이언트의 브라우저 기본 글꼴로 보여줌. 해결하려면 web font 사용)
2) 선긋기 태그
- Web Browser의 넓이 100%가 기본 설정 (자동 줄변경)
- browser마다 다르게 보여짐 (사용자에게 보여지지 않고(? 보여짐..), 소스를 구분하는 용도로 사용함)
<hr color = "색깔" size="높이" width ="넓이"/>
> 넓이 설정방법
① 비율 (숫자%)
- 브라우저의 몇 %로 할 건지 지정
- 가변 / 브라우저의 크기에 따라 변경됨
② 숫자
- pixcel로 지정
- 고정 / 브라우저의 크기와 상관없이 항상 고정
** 속성 중 하나인 size와 color는 font와 선긋기 등의 태그에 공통으로 사용되는 속성임 => 글로벌 속성이라 함
3) 이미지 태그
- 이미지를 넣어서 제공할 때 사용
- 이미지는 모든 확장자가 다 가능!
<img src="이미지 경로" width="넓이" height="높이" title="풍선도움말" alt="엑박떴을 때 보여줄 텍스트"
border="테두리선두께" name=”이름명”/>
> 이미지 크기변경(Resize)는 되도록 하지 말자. CPU 엄청 소모됨.
> width나 height 하나만 바꿔도 나머지 하나가 알아서 맞춰서 바뀜
> 이미지 경로 (!절대경로는 절대 사용하지 말자!) :
- URL
- 다른 서버의 이미지도 연결해서 보여줄 수 있음
- 장점) HTML파일의 위치가 변경되더라도 이미지의 경로를 수정할 필요 없음
- 단점) 경로가 길다.
- 사용법) src =http://~/이미지명.확장자" - 제일 많이 씀!! - 상대경로
- 서버에 존재하는 이미지만 연결해서 보여줄 수 있음
- 장점) 경로를 짧게 표현할 수 있음
- 단점) HTML 파일의 위치가 변경되면, 이미지의 경로를 수정해야 함
- 사용법) src ="../이미지명.확장자"
- HTML 파일이 존재하는 위치로부터 경로를 연산함
4) 다른 HTML과 연결 (Hyper Text)
- URL과 상대경로를 사용하여 다른 HTML 페이지와 연결 (Hyper Link)
- 사용법) <a href = "연결할 HTML의 주소" target = "연결된 HTML이 보여질 frame" name ="이름" id ="아이디"> 링크명 </a>
> 연결할 HTML의 주소는 URL or 상대경로로 표현함
> target을 " 아무거나 "로 주면 새창으로 뜨는데 보통 blank나 new로 줌
> name 과 id는 글로벌 속성임
> name속성은 한 페이지에서 특정 위치로 이동할 때 사용함
: href="#name 속성명" => 링크 클릭 시 name 부분으로 이동함
- 연결된 페이지는 web browser 안의 내용을 모두 삭제하고 다시 그려서 보여줌 (화면 깜빡임이 발생함)
5) frame
- 하나의 웹 브라우저에서 여러 개의 HTML을 동시에 보여줄 때
- frame, iframe (inner frame의 약자) 을 제공
- frame : 페이지의 전체를 나눌 때 사용 / 페이지의 디자인을 만들 때 사용 / 요새 잘 안씀 / Ex. Java API
- iframe : 페이지내의 일부분을 나눌 때 사용 / 페이지의 일부분을 변경하여 보여줄 때 사용 / 이걸 더 많이 씀
* iframe
- 사용법) <iframe name = "이름" src ="최초 제공 페이지의 URL" frameborder="선의 두께" width ="넓이" height="높이" scrolling="스크롤바의 제공여부"> </iframe>
> name은 태그에서 찾아갈 이름
> scrolling은 yes/no/auto 중 하나로 설정 가능
- HTML안에 다른 HTML을 넣어서 보여주기 가능
- HTML안의 사진을 눌렀을 때 다른 HTML 보여주기 가능 >> 외부 HTML
6) 목록 태그 (list tag)
- ol, ul, dl 3가지의 목록을 제공
- <ol>
- 순서 목록
- 순서가 있는 데이터를 보여줄 때
- 숫자 / 알파벳 / 로마자의 순서를 제공하는 목록 태그
- <li> : 목록을 보여줄 때 사용. 자동 줄바꿈이 됨
- 사용법) <ol type = "시작할 값">
<li> 목록 </li> ......
</ol>
> ol에 시작할 값을 주지 않으면 숫자로 시작함
> li태그의 value 속성으로 번호를 건너뛸 수 있음. 중간 list 번호를 건너뛰고 싶으면 <li value = "설정할 값"> - <ul>
- 도형 목록
- 순서없는 목록
- 사용법) <ul type="도형의 종류">
<li> 데이터 </li> .......
</ul>
> 도형 종류 : square, circle, disc // disc가 기본 - <dl>
- 설명 목록 - 어떤 대상에 대한 설명을 보여줄 때
- <li>를 쓰지 않음
- 사용법) <dl>
<dt> 제목 </dt>
<dd> 설명 </dd> ..... // dd는 들여쓰기가 된다.
</dl>
7) 테이블 태그
- 표 만들기
- <table>, <tr>,<th>,<td>, <thead>, <tbody>, <tfoot>으로 구성되는 태그
(_얘네는 필수, 나머진 선택)
- <tabel>
- 표를 시작할 때
- 높이는 행마다 / 넓이는 열마다 같음
- 사용법) <table border = "선의 두께" bordercolor="선색" width ="테이블넓이" height ="테이블높이"
align ="수평정렬" bgcolor="바닥색" background="바닥에 들어갈 이미지"
cellspacing="td(셀) 간 간격" cellpadding="td 내부 간격(여백)">
*테이블 자체에 넓이와 높이를 설정하는 것보다 안쪽 td나 th에서 넓이와 높이를 설정하고 테이블에 적용하는 걸 권장함* - <tr>
- 행을 만들 때
- 안에 존재해야 함
- 사용법) <tr bgcolor="바닥색" background="바닥에 들어갈 이미지" align="수평정렬" valign ="수직정렬">
> 수평정렬 : align = "left,center,right"
> 수직정렬 : valign = "top,middle,bottom" - <th>
- 테이블 header
- 컬럼의 제목을 만들 때
- 입력되는 글자는 가운데 정렬, 진하게의 설정이 자동 설정됨
- 사용법) <th bgcolor="바닥색" background="바닥에 들어갈 이미지" align="수평정렬" valign ="수직정렬"
width ="넓이" height ="높이" colspan ="합칠 칸의 수" rowspan="합칠 행의 수"> - <td>
- 컬럼의 데이터
- 입력되는 글자가 왼쪽정렬에 일반 글자로 설정됨
- <tr>안에 존재해야 함
- <th>와 속성이 같음
- 사용법) <td bgcolor="바닥색" background="바닥에 들어갈 이미지" align="수평정렬" valign ="수직정렬"
width ="넓이" height ="높이" colspan ="합칠 칸의 수" rowspan="합칠 행의 수"> - <thead>, <tbody><tfoot>
- 각각 사용자의 눈에 보이지 않고 "테이블의 제목/내용/결과 부분"임을 알려줄 때
'Development > HTML CSS' 카테고리의 다른 글
| [HTML] WEB/ HTML (0) | 2021.10.23 |
|---|









