Jam's story
[HTML] days02-태그 본문
모르는 것이 있으면 이 페이지 참조할 것
KoXo 자바스크립트 매뉴얼 - 메인 인덱스
koxo.com
HTML 기본태그
| <!DOCTYPE html> | 웹 문서의 유형을 html로 지정 | |
| <html lang="ko"> | 문서를 html로 시작, 언어를 한국어로 지정 | |
| <head> | 주로 브라우저의 정보를 입력하는 곳 | |
| <meta> | 메타 데이터 입력, 주로 <meta charset="UTF-8">처럼 입력 | |
| <title> | 문서 제목 탭에 나타난다. |
|
| <body> | 문서 내용을 입력 | |
제목태그 <hn></hn>
검색엔진이 제목(hn태그)을 사용해서 웹페이지의 내용과 구조를 파악한다.
H1, H2, H3, H4, H5, H6 6가지이고 머릿글의 크기에 따라 사용된다.
이 개체는 IE3.0에서 지원되고 스크립트는 IE4.0에서 부터 지원된다.
이 엘레멘트는 블럭모드이다.
이 엘레멘트는 종료태그가 필요하다.
태그에 따라 굵기와 글꼴 크기가 다르게 나타난다.
<hr>
- 수평선 표시
- 종료태그 필요없음
- 블럭모드
- horizontal rule 의 약자
<hr 이부분> 에서 ctrl+space를 누르면, 적용할 수 있는 속성들이 나온다,.
만약, 색을 바꾸고 싶다면
<hr color="red">
<hr color="#rrggbb">
<hr color="#FF0000">
hr의 부모요소는 body,부모요소너비의 50%<br>
<hr color="rgb(255.255,0)" width="50%" align="right">
<p>
- parapraph
- 아래 /위 여백 자동추가
- 항상 새줄에서 시작
<p>
이번 선거는 윤석열 정권이 출범한 지 불과 22일 만에 치러진다는 점에서 집권 초반 정국의 향배를 좌우할 풍향계로 평가된다.
국민의힘은 여당으로서 치르는 첫 선거에서 '안정론'을 들고 반드시 승리해 정권 초기 국정 동력을 최대한 확보하겠다는 목표다.
</p><p>
반면, 더불어민주당은 '견제론'을 통해 지난 대선의 패배를 설욕하고 거대 야당의 존재감을 더욱 살리겠다며 벼르고 있다.
</p><p>
특히 이번 보궐 선거에는 유력한 차기 대권 주자로 꼽히는 국민의힘 소속 안철수 전 대통령직인수위원장과 더불어민주당 이재명 상임고문이 동시 출격하면서 지난 대선의 연장전 성격과 동시에 '미니 대선'으로 체급이 올라갔다는 평가도 나온다.
</p>
<span>
- 강조
- 인라인모드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
span{
color:red;
border : 1px solid blue;
/* display:none; /* 안보이게 하는것 */ */
}
</style>
</head>
<body>
<span>이동원</span>
<span>김희진 </span>
<span>안시은 </span>
</body>
</html>
<xmp> </xmp>
- 개행작업이 작성되어 있던대로 된다.
- <br>작업을 따로 하지 않아도 된다.
- html5에는 없어졌지만 사용할 수 있다.
- 글자 크기 글꼴 일정하게 나온다 .
<pre> </pre>
위의 xmp태그처럼 작성한 대로 출력된다.
- 공백, 개행 유지한다.
- 블럭모드
- 고정 너비 글꼴로 표시
- 미리 형식이 지정된 텍스트를 정의
글씨체를 진하게 ,굵게하여 강조
- <b></b>
- </strong></storong>
- <em></em>
기울임꼴
- <i></i>
mark 표시된 텍스트 ,노란색 배경
- <mark></mark>
작게
- <small></small>
취소선- 중앙에 한 줄을 그음
- <del></del>
언더라인 -문서에 새로 삽입된 것을 표시
- <ins></ins>
연락처 정보(이메일 , 실제주소, 전화번호 등등 )
- <address></address>
어떤 창작물(책, 시, 노래, 영화 ,그림) 의 제목 정의하는 태그
- <cite></cite>
현재 텍스트 출력 방향을 재정의하는 태그
- <bdo></bdo> ->양방향
- <bdo dir="rtl"></bdo> ->우측에서부터 출력됨
- 예) <bdo dir="rtl">안녕 </bdo>는 녕안 으로 출력됨
글꼴변경
- face=" "
- face="궁서체" 이런식으로 작성하면, 궁서체로 변경됨
글 색깔 변경
- <font color=" " >
- 예 ) <font color=" red " >
글 크기 변경
- <font size=" " >
- 예) <font size="5 " > 기본이 3으로 설정되어있다.
- 예) <font size="14px">
<font face="궁서체" ><font color="yellow"><b>안녕하세요 </font>홍길동입니다.</b></font><br>
<font color="red" >안녕하세요 홍길동입니다.</font><br>
<font size="14px">안녕하세요 홍길동입니다.</font><br>
<font size="4px">안녕하세요 홍길동입니다.</font><br>
하이퍼링크
- 보라색: 방문한 링크
- 파랑색: 방문하지 않은 링크
- 빨강색: 활성 링크
- <a href=" " ></a>
- 예) <a href="http://www.naver.com">naver</
target- 어디에서 링크된 문서를 열지 결정하는 속성(대상)
- <a target="_self"> </a> 자기 자신 창에 넣겠다.
- <a target="_blank"> </a> 새 창, 새 탭
- <a target="_parent"> </a> 부모(상위)프레임
- <a target="_top"> </a> 창의 전체 본문에 열겠다.
상대경로
컨택트패스 지우기
상대경로(URL)
절대경로(URL) 는 전체 웹 주
<p> <a href="http://localhost/webPro/html/days01/ex05.html">ex05.html</a></p>
상대경로
<p> <a href="ex05.html">ex05.html</a></p>
<p> <a href="/ex05.html">ex05.html</a></p>
<!-- /를 붙히니 http://localhost/ex05.html 로 잡히고
이러면 완전히 다른 경로,
/붙히려면 /webPro/html/days01//까지 있어야한다. /하나는 localhost만-->
<p> <a href=" /webPro/html/days01//ex05.html">ex05.html</a></p>
<!--1. 절대경로 -->
<p> <a href="http://localhost/webPro/index.html">1. index.html</a></p>
<!--2. /컨텍트패스 -->
<!-- ex09.html 기준으로 index.html 상대경로를 표시 -->
<p> <a href="/webPro/index.html">2. index.html</a></p>
<!--3. ex09.html -->
<p> <a href=" ./../../index.html">3. index.html</a></p>
북마크기능
특수기호
1. 띄어쓰기
2. < less then < (<)
3. > greater then (>)
4. & 를 스페이스말고 화면에 출력하고 싶은 경우 앞에 써준다 (&nbsp;)
5. " " (쌍따옴표)
6. ' ' (홑따옴표)
'WEB > HTML' 카테고리의 다른 글
| [HTML] p - 높이지정, padding, margin, 배경이미지 (0) | 2022.05.16 |
|---|---|
| [HTML] 파비콘 (0) | 2022.05.16 |
| [HTML] days06- picture 태그 (0) | 2022.05.16 |
| [HTML] days06 - 이미지플로팅 (0) | 2022.05.16 |
| [HTML]days03-img (0) | 2022.05.16 |
'WEB/HTML' Related Articles
more
Comments