728x90
반응형
| 프로그래밍 언어 | 개발툴 | |
| html | visual studio | 소문자 권장 |
Hyper Text Markup Language
Hyper Text Markup Language |
|
| - 웹페이지(웹문서)를 만들 때 사용하는 언어 - 다른 웹 문서로 이동할 수 있는 마크업(태그로 이루어진) 언어 |
|
| SYNTAX <시작태그명>컨텐츠</종료태그명 > 태그명앞에는 공백xx *컨텐츠 : 텍스트, 태그들,(이미지, 영상, 블록) <시작태그명 속성명 ="속성명:값;속성명:값;..." 속성명='값'....>컨텐츠</종료태그명> 속성명 ", ' 구분없이 사용가능 <!DOCTYPE html> -시작태그만 존재 empty tag <html> <head> 브라우저에 보이지 않는 부분에 대한 설정을 하는 곳 <title> ~ </title> <meta charset = "UTF-8"> -시작태그만 존재 empty tag </head> <body> 브라우저에 보인느 부분에 대한 설정을 하는 곳 </body> </html> |
|
| HTML4 <meta> |
|
| HTML5 <meta charset = "UTF-8"> |
 |
| 블록레벨 요소 - 가로 새 줄에서 시작 width 가로, 100%가 기본값 height 세로 border 테두리 margin 바깥여백, 더 넓은 영역의... padding 안쪽여백 12font, 16px 기본값 |
기본 태그
기본 태그 |
|
| <img> | 이미지 파일 표시 관련 속성 - src : 이미지 파일이 저장된 경로와 파일 이름 지정 - width, height : 너비와 높이 지정, 정수입력시 픽셀단위, 백분율 입력시 비율대로 지정 - title : 이미지 위에 마우스 hover시 표시될 텍스트 지정 |
| <h1> 인라인라벨 요소 </h1> ~ <h6> </h6> | - 입력된 내용에 제목 스타일 적용(진하게) - h뒤에 붙는 숫자가 클수록 글자 크기가 작아진다. |
| <p> </p> |
- 위 아래 여백 한 줄만 - width 블록레벨, height 컨텐츠 길이만큼 |
| <br> | - 줄 바꿈 |
| <a> | 텍스트나 이미지 클릭 시 연결할 URL 설정 관련속성 - href : 연결할 url지정 - target : 웹 페이지가 열리는 방식을 지정 생략하거나 |
| <pre> </pre> - 쓰여진 대로 공백, 줄 바꿈 이루어짐 - 내용 크기 자동바꿈 |
|
| <hr> - width만큼 선이 그어짐 |
엔티티
<!DOCTYPE html>
<html lang ="ko">
<head>
<meta charset="UTF-8">
<title>HTML Entities</title>
</head>
<body>
<h1>HTML 엔티티</h1>
<p>less than(<)과 greater that(>) 엔티티사용</p>
<p><p> 태그는 단락을 나타내는 태그입니다.</p>
<p>한 칸 공백 엔티티 사용</p>
<p>& n b s p ; 태그는 한 칸 공백을
나타내는 태그 입니다.</p>
<p>&문자 엔티티사용</p>
<p>&는 &문자를 나타내는 엔티티입니다.</p>
<p>큰 따옴표, 작은 따옴표 엔티티사용</p>
<p>방백은 "큰 따옴표"로 처리를 독백은
' 작은 따옴표'로 처리합니다. </p>
</body>
</html>더보기
HTML 엔티티
less than(<)과 greater that(>) 엔티티사용
태그는 단락을 나타내는 태그입니다.
한 칸 공백 엔티티 사용
& n b s p ; 태그는 한 칸 공백을 나타내는 태그 입니다.
&문자 엔티티사용
&는 &문자를 나타내는 엔티티입니다.
큰 따옴표, 작은 따옴표 엔티티사용
방백은 "큰 따옴표"로 처리를 독백은 ' 작은 따옴표'로 처리합니다.
엔티티
<!DOCTYPE html> <html lang ="ko"> <head> <meta charset="UTF-8"> <title>HTML Entities</title> </head> <body> <p>¢(센트) 엔티티사용 : ¢</p> <p>£(파운드화) 엔티티사용 : £</p> <p>¥(엔화) 엔티티사용 : ¥</p> <p>€(유로화) 엔티티사용 : €</p> <p>©(저작권) 엔티티사용 : ©</p> <p>®(등록상표) 엔티티사용 : ®</p> <p>×(곱셈) 엔티티사용 : ×</p> <p>÷(나눗셈) 엔티티사용 : ÷</p> </body> </html>
¢(센트) 엔티티사용 : ¢
£(파운드화) 엔티티사용 : £
¥(엔화) 엔티티사용 : ¥
€(유로화) 엔티티사용 : €
©(저작권) 엔티티사용 : ©
®(등록상표) 엔티티사용 : ®
×(곱셈) 엔티티사용 : ×
÷(나눗셈) 엔티티사용 : ÷
b태그와 strong태그
<!DOCTYPE html> <head> <title>b태그와 strong태그</title> </head> <body> <p>This text is normal.</p> <p>This text is <b>bold.</b></p> <p>This text is normal.</p> <p><strong>This text is important!</strong>strong</p> <p>This text is normal.</p> <p><i>This text is italic.</i></p> <p>This text is normal.</p> <p><em>This text is emphasized.</em></p> </body> </html>
This text is normal.
This text is bold.
This text is normal.
This text is important!strong
This text is normal.
This text is italic.
This text is normal.
This text is emphasized.
728x90
반응형
'[HTML]' 카테고리의 다른 글
| [HTML] a tag, href, bookmark (0) | 2024.02.14 |
|---|---|
| [HTML] table Element, colgroup (0) | 2024.02.14 |
| [HTML] Table border, element, colspan, rowspan (0) | 2024.02.14 |
| [HTML] LIST (0) | 2024.02.13 |
| 서식태그, LIST (0) | 2024.02.13 |