쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/html에 올려두었습니다.
Markup 태그
* 본문에서 특정 부분을 강조하여 보여줄 수 있는 태그
- <b> : 진하게
- <strong> : 진하게( 권장 ) - HTML 페이지의 리더기를 사용했을 때 강조하여 읽어준다.
- <big> : 글자 크게 ( HTML5에서는 지원하지 않는 태그 )
- <small> : 글자 작게
- <u> : 밑줄 ( HTML5에서는 지원하지 않는 태그 )
- <strike> : 취소선 ( HTML5에서는 지원하지 않는 태그 )
- <sup> : 윗첨자
- <sub> : 아랫첨자
- <mark> : 형광펜 효과 ( HTML5에서 새로 추가된 태그 )
- <i> : 이탤릭
* 속성(Attribute)이 있는 태그
- 속성 태그 사용
- <태그명 속성명="값", ... > 내용 </태그명>
- 속성에 값을 넣는 법
속성="값" (권장) => (공백까지 값으로 인식한다.)
속성='값' => (공백까지 값으로 인식한다.)
속성=값 : 아무것도 사용하지 않는 문장 => (공백은 값으로 인식하지 못한다.)
- 속성을 사용하면 다양한 값을 사용할 수 있다. => 동일한 태그를 다양하게 사용할 수 있다.
font
- 속성은 결정되어 있고, 속성을 사용하지 않더라도 기본 값이 들어간다.
- 속성은 순서가 없다.
<font size="크기" face="글꼴" color="색"> 문자열 </font>
<!--
사이즈
기본 값 3
확장값 1~10
글꼴
모든 글꼴 사용가능
저작권
접속자에게 해당 글꼴 없다면
웹 브라우저의 기본 글꼴이 사용된다.
모든 브라우저에 Sans-Serif는 존재한다.
컬러
문자열 : black, white,,,, pink, magenta…
16진수 숫자 : #000000
-->
a
- hyper link를 사용할 때.( 다른 문서(HTML)와 연결할 때 사용 )
- URL : http://서버명/경로/파일명
장점 : 외부서버에도 연결 가능 단점 : 경로가 길다.
- 상대 경로 (서버주소를 제외한 경로) : 경로/파일명
장점 : 경로를 짧게 사용할 수 있다.
단점 : 파일의 위치가 변경되면 경로를 재수정해야한다. 외부 서버로 연결 불가
- 절대 경로 : e:/dev/../a.html <= 절대 사용 불가
- 이동할 페이지가 결정되지 않은 경우에는 <a href="#void">를 설정한다.
<a href="연결할문서 경로" target="연결된 문서가 보여질 frame 이름" title="풍선도움말">클릭할 텍스트</a>
* 개발 경로
* a tag를 사용한 메일 전송
- outlook을 사용한 메일 전송 수행
<a href="mailto:수신메일주소">링크</a>
- 메일 제목과 내용설정
<a href="mailto:메일주소?subject=제목&body=내용">링크</a>
* a tag를 사용한 전화
<a href="tel:전화번호">링크</a>
* a tag를 사용한 문자 전송
<a href="sms:전화번호">링크</a>
선 긋기
- <hr> : web browser의 width 100%로 설정된다.( 줄이 변경된다. )
style sheet에서 display:none으로 설정하고 소스코드를 의미적으로 구분하는 용도로 사용
<hr color="선색" size="높이" width="너비"/>
<!--
너비
숫자 : pixel – 고정 (웹 브라우저의 크기가 변경되더라도 크기 일정)
숫자% : 비율 – 가변(웹 브라우저의 크기가 변경되면 그에 맞춰 크기가 변경된다.)
-->
목록 태그
- <ul>, <ol>, <li>, <dl>, <dt>, <dd>
- 사용자에게 데이터의 리스트를 제공할 때 사용.
- <ol> : 순서 목록(번호, 문자열, 로마자를 제공)
- <li> : 데이터를 보여줄 때 사용, 줄을 변경한다.(width=100%)
<ol type="">
<li>데이터</li>
<li value="다시 시작할 값">데이터</li>
.
.
.
</ol>
<!--
type 안의 값 : 1, A, a, i, |
-->
* 도형 목록
- <ul> : 순서 없는 데이터를 보여줄 때 사용
<ul type="">
<li>데이터</li>
<li>데이터</li>
.
.
.
</ul>
<!--
type 안의 값 : disc, circle, square
-->
* 설명 목록
- <dl> : 제목과 제목에 대한 설명을 보여줄 때 사용
<dl>
<dt>제목</dt>
<dd>설명</dd> <!-- 설명 부분은 들여쓰기가 된다. -->
<dt>제목</dt>
<dd>설명</dd> <!-- 설명 부분은 들여쓰기가 된다. -->
.
.
.
</dl>
목차( heading )
- 글자를 일정한 크기로 보여줄 때(제목 부분에 많이 사용)
- 태그를 사용하면 자동 줄 변경이 된다.
- 지원하는 태그는 <h1>~<h6>
<h1>내용</h1> <!-- 가장 크다. -->
.
.
.
<h6>내용</h6> <!-- 가장 작다. -->
- <h7> : HTML에서 제공하지 않는 Tag를 사용하면 웹 브라우저는 tag를 그리지 않는다.
태그사이에 있는 글자만 보여준다.
DTD( Document Type Definition ) : 문서 원형 정의
- ML에서 사용할 수 있는 태그, 태그의 등장 순서, 속성, 속성 기본값 정의
- DTD의 사용 및 적용 <!DOCTYPE html>으로 처리된다.
'성장 일기 > 쌍용교육센터' 카테고리의 다른 글
| 0214/HTML태그 (0) | 2023.02.14 |
|---|---|
| 0213/이미지, table tag (0) | 2023.02.13 |
| 0209/SQLInjection, web (0) | 2023.02.12 |
| 0207/Procedure (0) | 2023.02.12 |
| 0206/ResultSetMetaData, CLOB (0) | 2023.02.08 |
