https://brackets.io/ 에서 다운로드
1. ! tab 키를 누르면
2. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
과 같이 변하게 된다.
간단하게 설명을 하자면,
<!DOCTYPE html> <!-- 문서 유형을 지정하는 선언문. html5 문서이다 -->
<!-- 웹 문서의 시작과 끝을 알려주는 태그 : 안에는 크게 head와 body로 나뉜다. -->
<html lang="en">
<!-- head : 브라우저에게 정보를 주는 태그
화면에 보이지 않지만 브라우저가 알아야할 정보를 모두 이 안에 태그로 입력
title, meta, style, link... -->
<head>
<!--meta : 문자 인코딩 및 문서 키워드, 요약정보 -->
<meta charset="UTF-8">
<!-- 웹 브라우저 탭에 작성되는 제목 표시줄 지정 -->
<title>Document</title>
</head>
<!-- body : 실제 브라우저에 표시될 내용들, 안에 작성 -->
<body>
<h1>
안녕하세요~~
</h1>
</body>
</html>
태그 알아보기
<텍스트 관련 태그>
@ h태그 (제목 태그)
<body>
<!-- 텍스트 관련 태그 -->
<!-- h: 제목태그 -->
<h1> 제목태그</h1>
<h2> 제목태그</h2>
<h3> 제목태그</h3>
<h4> 제목태그</h4>
<h5> 제목태그</h5>h1 → h5 갈수록 글자가 작아진다.
@ p태그
<!-- p : 단락만들기 : 앞뒤 줄바꿈 기능이 있는 텍스트 덩어리 -->
p태그는 paragraph의 앞글자를 딴 것으로 글자그대로 문단을 뜻합니다
<p>Lorem ipsum dolor sit amet, //Lorem 치고 tab 누르면 글자나옴
<br /> br은 한줄내리기
consectetur adipisicing elit. Architecto iusto omnis officiis porro nisi ducimus
repellendus minima sapiente tempora, delectus dolor modi temporibus voluptate non
et libero ea ex consectetur!</p>
<pre> pre 입력한 그대로 나옴 띄워쓰기 여러개 표시가능
</pre>
</p>
@ hr / span / strong / u
<hr /> hr 가로줄 테그
<blockquote>
blockquote 인용문 Lorem ipsum dolor sit amet,
</blockquote>
<span style="color: red"> span 텍스트를 묶어주는 태그 </span>
<strong> strong 굵게나옴 </strong>
<u> u는 밑줄을 나오게함 </u><태그> </태그> 가 한 쌍이다.
<목록 태그>
@ ul / ol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 목록 태그 :
ul : 순서가 없는 목록 만들기 : unorder list : ul 안에 목록은 li 태그 안에 나열
각 항목안에 원이나 사각형 같은 불릿(bullet)이 붙는다.
CSS의 list-style-type 속성으로 수정가능
ol : 순서가 있는 목록 만들기 : ol안에 목록은 li 태그로 나열
각 항목앞에 순서를 나타내는 숫자, 문자가 붙는다.
트개 속성으로 수정 가능
type 속성 : 목록앞에 숫자/ 영문/ 로마숫자로 변경가능.
값: 1= 숫자(default), a = 영문소문자, A = 영문대문자,
i = 로마숫자 소문자, I= 로마숫자 대문자
start 속성 : 시작값 지정
reversed : 항목을 역순으로 표시
-->
<h2> 웹개발 커리큘럼</h2>
<h3>ul, li</h3>
<ul>
Ul> li*5 tab키 누르면 자동으로 만들어줌
<li> java </li>
<li> html css </li>
<li> javascript </li>
<li> jsp </li>
<li> spring </li>
</ul>
<ol typr ="1" reversed>
<li> java </li>
<li> html css </li>
<li> javascript </li>
<li> jsp </li>
<li> spring </li>
</ol>
</body>
</html>
<표 만들기 태그>
@ table
tr : 행을 지정 (가로 줄, row). <th></th> 개수로 가로줄이 몇개인지 알 수 있다
td : 셀 만들기 (세로한칸) <th></th>안에 몇개의 셀이 들어갈것인가 ?
th : 제목 셀
<th></th>를 먼저세우고 td를 넣음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 표 만드는 태그
table 은 행(row)과 열(column) 으로 이루어져 있다.
table : 테이블의 영역을 묶는 태그
tr : 행을 지정 (가로 줄, row)
td : 셀 만들기 (세로한칸)
th : 제목 셀
table 태그 안에 행의 수만큼 <tr> 태그를 넣고
각 tr태그 안에 열의 수만큼 td 태그를 만든다.
행/열 합치기
: 셀을 합치는 것이므로 td에 적용
colspan 속성 : 열 합치기 colspan = "합칠 열의 개수"
rowspan 속성 : 행 합치기 rowspan = "합칠 행의 개수"
-->
<table border = "1">
<tr> 가로
<td rowspan="2"> 1행 1열</td>
<td> 1행 2열</td>
<td> 1행 3열</td>
</tr>
<tr>
<td colspan="2"> 2행 2열</td>
</tr>
</table>
<table border = "1">
<tr> 가로
<td rowspan="2"> 1행 1열</td>
<td> 1행 2열</td>
<td> 1행 3열</td>
</tr>
<tr>
<td> 2행 1열</td>
<td colspan="2"> 2행 2열</td>
</tr>
</table>
</body>
</html>
<a 태그>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 링크 : a태그 : href속성을 이용하여 다른 페이지로 넘어가게 할 수 있는 태그
- 속성
href : 링크 주소
target : 링크한 내용이 표시될 위치
새창 : _blank
현재창 : _self(default)
- 앵커
<태그 id="앵커명"> ... </태그>
<a href="#앵커명"> 텍스트나 이미지 </a>
-->
<a href="http://naver.com"> 네이버로 이동 </a>
<a href="http://naver.com" target="_blank"> 네이버 새창 이동 </a>
</body>
</html><이미지 태그>
@ img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
- 이미지 파일
GIF : 색상수 256가지, 파일크기 작음.
아이콘, 불릿, favicon(작은이미지), 움짤
JPG : 사진.
PNG : 투명 배경 가능.
- 속성
src : 이미 경로 값으로 지정(필수 기입 속성)
alt : 이미지 설명글 저장
- 경로
상대 경로 : 현재 작업파일을 기준으로 이미지 파일의 위치 작성
/ \ : 한단계 안으로 들어가기
. : 현재위치
.. : 한단계 위로 나가기
절대 경로 : 이미지 파일이 저장된 컴퓨터 내의 위치한 전체 주소
C:\html\img\test.jpg
-->
<h2> img tag</h2>
<img src="tayo.jpg" width="50%"/> <!--(같은 경로, 디렉토리) -->
<img src="E:\htmlcss\workspace\html\img\tayo.jpg"/> <!--절대경로 -->
<img src= "img/tayo.jpg" width="200"/> <!--img/로 한단계 안으로 -->
<img src="../mickey%20png.png" width="30%"> <!--../ 을 적어서 한단계 위로 -->
</body>
</html>
'WEB Creator > [HTML]' 카테고리의 다른 글
| [HTML] 2 - html 폼관련 태그 + 옵션 태그 + 앵커 (0) | 2022.06.01 |
|---|---|
| [HTML] OT (0) | 2022.06.01 |