HTML Basic Tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- Visual Studio Code 지원 기본 html 문서 타입을 위한 태그
- 일부 태그를 제외한 모든 태그는 열어준 후() 닫아야 함()
<!-- annotation -->- html의 주석 태그는 위와 같으며, ‘ctrl+/’로 생성 가능
- 단축키로 생성 시 같은 줄에 존재하는 모든 코드가 주석으로 처리됨에 유의
Header
<!-- h(header)1~6까지 있다.1이 젤 큰 글꼴 -->
<h1 style="color: blueviolet;">H1 태그입니다</h1>
<h2 style="color: #ffccff;">H2 태그입니다</h2>
<h3 style="color: #cfc;">H3 태그입니다</h3>
<h4 style="background-color: rgb(255, 0, 140);">H4 태그입니다</h4>
<h5 style="background: #0d00ff;">H5 태그입니다</h5>
<h6 style="background-color: brown;">H6 태그입니다</h6>- header는 1~6까지 있으며 제목 작성 시 사용하며, <h1></h1>이 가장 큰 글꼴
Preformatted
<!-- pre태그는 엔터가 적용이 된다 -->
<h1><pre>
안녕
오늘은
html 시작날이야
</pre></h1>- <pre>는 내부의 enter, tab, space를 그대로 인식하여 출력
- 자동으로 tab(들여쓰기) 실행
a Horizontal Rule
<!-- 선 -->
<hr color="red" size="5" align="center" width="300">- <hr>은 선(line) 작성 시 사용
- size : 굵기 / align : 정렬 위치(left, center, right) / width : 선의 길이
Paragraph & Break
<!-- p태그..문단처리..단락 -->
<p>그러니까 무슨소리냐면.<br>
왜 랜덤으로 이미지 출력시키고싶은거.<br>
뭐 이미지만 랜덤으로 출력시키고싶으면 다른 방법도 많긴</p>
<p>그러니까 무슨소리냐면.<br>
왜 랜덤으로 이미지 출력시키고싶은거.<br>
뭐 이미지만 랜덤으로 출력시키고싶으면 다른 방법도 많긴</p>- <p></p>는 내부를 하나의 문단으로 인식하여 앞뒤로 간격 확보
- <br>은 줄 바꿈(닫아주는 태그가 부존재)
Font
<!-- font속성 -->
<font size="5" color="green" face="impact">Have a Nice Day</font>- size : 크기 / face : 글꼴
Element(em)
<!-- em 배로 늘린다는 의미 -->
<span style="font-size: 3em;">HappyDay</span>- 1em은 현재 사용되는 글꼴의 12point 크기의 대문자 ‘M’의 너비를 기준으로 정해짐(from Wiki)
- ‘n’em은 앞에 사용된 글자의 n배 확대를 의미
Semi Colon while using Style in Tag
<!-- style 속성과 속성사이는 ; -->
<b style="font-size: 4em; color: orange; background-color: #f0f;">
<u>안녕하세요</u></b>- 태그 내의 style 사용 시에는 하나의 속성이 정의될 때마다 ; (semi colon)
Inserting Images
<!-- image -->
<img alt="이미지없음" src="../flower_ani/12.jpg">
<img src="../Food/f12.png" style="border: 5px dotted orange; width: 200px;">
<img src="../Food/f12.png" style="border: 5px solid cyan; width: 150px;">
<img src="../Food/f12.png" style="border: 30px inset maroon; width: 100px;">
<img src="../Food/f12.png" style="border: 5px dashed orange; width: 100px;">- ‘./’ 는 동일 폴더를, ‘../’ 는 상위 폴더를 의미
- src : 이미지 파일의 저장 경로
- border : 이미지를 둘러싼 액자 형태(dotted, solid, inset, dashed 등) / width : 액자 두께
초보개발자