기본
글씨 크기 h1>h2>h3>h4>h5>h6
style="color: 색상지정;" 색상변경
-페이지 이름
<title>페이지 이름<title>-주석처리
cmd+/ - 주석 단축키
<!---->원문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H태그연습</title>
</head>
<body>
<!-- h(header)1~6까지 있다. 1이 제일 큰 글꼴 -->
<h1 style="color: blueviolet;"> H1 태그 입니다~~~~</h1><!-- 태그 사이에 닫여야함 <h1>열기 </h1>닫기
<h1 style="color: 색;"> 해주면 색변경-->
<h2 style="color: rebeccapurple;">H2 태그입니다</h2>
<h3 style="color: #ffccff;">H3 태그입니다</h3>
<h4 style="color: blue;">H4 태그입니다</h4>
<h5 style="background: #00ffcc;">H5 태그입니다</h5>
<h6 style="background-color: brown;">H6 태그입니다</h6>
</body>
</html>글씨 및 사진 홈페이지
b는 굵은 글씨체 br은 한 줄 내림
<b>Hello~Html~~</b><br>
아무것도 적용안함!!!<br>
HappyDay<br>
안녕하세요<br>pre는 자동으로 줄내리기 적용
<h1><pre>
안녕
오늘은
html 시작날이야
</pre></h1>선
<hr color="red" size="5" align="center" width="300">p태그..문단처리..단락
<p>장마는 6월 하순에서 7월 하순의 여름에 걸쳐서<br>
동아시아에서 습한 공기가 전선을 형성하며 남북으로<br>
오르내리면서 많은 비를 내리는 현상을 가리키는 말로,<br>
그 시기를 장마철이라 한다.</p>
<p>장마는 6월 하순에서 7월 하순의 여름에 걸쳐서<br>
동아시아에서 습한 공기가 전선을 형성하며 남북으로<br>
오르내리면서 많은 비를 내리는 현상을 가리키는 말로,<br>
그 시기를 장마철이라 한다.</p>font 속성
<font size="5" color="green" face="Impact">Have a Nice Day</font>style 속성과 속성 사이는 ;
u는 underline
<b style="font-size: 4em; color: orange;"><u>안녕하세요</u></b>em 배로 늘린다는 의미
span 태그는 공간활용 높이조절 X
<span style="font-size: 3em; background-color: #ff00ff;">HappyDay</span>image
alt는 이미지 안뜰때 표시해주는 것 src는 같은 폴더에 있을경우 ./없어도 됨
./의미는 동일폴더 ../상위폴더를 의미
<img alt="이미지없음" src="1.jpg">
<img src="../flower_ani/f11.png">solid 테두리 실선
dotted 테두리 점선
inset 약간 액자처럼 됨
dashed 굵은 점선
<img src="../Food/12.jpg" style="border: 5px solid orange; width: 200px;">
<img src="../Food/12.jpg" style="border: 5px dotted orange; width: 150px;">
<img src="../Food/12.jpg" style="border: 5px inset maroon; width: 100px; height: 200px;">
<img src="../Food/12.jpg" style="border: 5px dashed orange; width: 100px;">원문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본태그연습</title>
</head>
<장마는>
<!-- b는 굵은 글씨체 br은 한 줄 내림-->
<b>Hello~Html~~</b><br>
아무것도 적용안함!!!<br>
HappyDay<br>
안녕하세요<br>
<!-- pre는 자동으로 줄내리기 적용 -->
<h1><pre>
안녕
오늘은
html 시작날이야
</pre></h1>
<!-- 선 -->
<hr color="red" size="5" align="center" width="300">
<!-- p태그..문단처리..단락 -->
<p>장마는 6월 하순에서 7월 하순의 여름에 걸쳐서<br>
동아시아에서 습한 공기가 전선을 형성하며 남북으로<br>
오르내리면서 많은 비를 내리는 현상을 가리키는 말로,<br>
그 시기를 장마철이라 한다.</p>
<p>장마는 6월 하순에서 7월 하순의 여름에 걸쳐서<br>
동아시아에서 습한 공기가 전선을 형성하며 남북으로<br>
오르내리면서 많은 비를 내리는 현상을 가리키는 말로,<br>
그 시기를 장마철이라 한다.</p>
<!-- font 속성 -->
<font size="5" color="green" face="Impact">Have a Nice Day</font>
<!-- style 속성과 속성 사이는 ; -->
<!-- u는 underline -->
<b style="font-size: 4em; color: orange;"><u>안녕하세요</u></b>
<!-- em 배로 늘린다는 의미 -->
<!-- span 태그는 공간활용 높이조절 X -->
<span style="font-size: 3em; background-color: #ff00ff;">HappyDay</span>
<!-- image -->
<!-- alt는 이미지 안뜰때 표시해주는 것 src는 같은 폴더에 있을경우 ./없어도 됨 -->
<!-- ./의미는 동일폴더 ../상위폴더를 의미 -->
<img alt="이미지없음" src="1.jpg">
<img src="../flower_ani/f11.png">
<!-- solid 테두리 실선 dotted 테두리 점선 inset 약간 액자처럼 됨 dashed 굵은 점선-->
<img src="../Food/12.jpg" style="border: 5px solid orange; width: 200px;">
<img src="../Food/12.jpg" style="border: 5px dotted orange; width: 150px;">
<img src="../Food/12.jpg" style="border: 5px inset maroon; width: 100px; height: 200px;">
<img src="../Food/12.jpg" style="border: 5px dashed orange; width: 100px;">
</body>
</html>
백엔드 개발자로서 성장해 나가는 성현이의 블로그~