비쥬얼 스튜디오 코드 다운로드
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
c드라이브 Work 파일 코드로 열기
7종 파일 깔기 +1
Prettier, Material Icon Theme, Error Lens, Better Comments, Bracket Pair Colorizer 2, Live Server,
IntelliJ IDEA Keybindings +auto rename tag
태그를 수정할 때 시작과 끝 태그 둘 중 하나만 수정해도 동기화
테마 파일 아이콘 테마 material icon theme
ctrl + 마우스 휠로 화면 축소 확대
html 파일 하나로 열기
open with live server
결과
js파일을 만들어서 열기
ctrl 누르고
"./js/index.js"
클릭하면 됨
이 방법은 권장하진 않음
결과
저장된 상태 저장이 안된상태
script 사용해서 열기 (권장하지않음)
페이지 이동 태그
태그 공통속성
결과
text font
<!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>
<!-- 문서 자동 정렬 : ctrl + alt + l -->
<!-- h1 : 제목태그 (굵은글씨) h1 ~ h5(크기에 따라 화면에 다르게 보임) -->
<!-- 자동 줄바꿈 일어남 -->
<!-- ctrl + d : 줄복사 -->
<!-- b : 굵은글씨 (bold) -->
<!-- p : 단락태그 (paragraph), 일반글씨 사용 -->
<p><b>Lorem ipsum dolor</b></p>
<h5>Lorem ipsum dolor</h5>
<!-- i : 글자 기울임(italic) -->
<h5><i>Lorem ipsum dolor</i></h5>
<!-- small : 글자 작게 보임 태그 -->
<h5><small>Lorem ipsum dolor</small></h5>
<!-- sub : 아래 첨자 -->
<h5>Lorem <sub>ipsum</sub> dolor</h5>
<!-- sup : 윗 첨자 -->
<h5>Lorem <sup>ipsum</sup> dolor</h5>
<!-- ins : 밑줄 -->
<h5><ins>Lorem ipsum dolor</ins></h5>
<!-- del : 취소선 -->
<h5><del>Lorem ipsum dolor</del></h5>
<!-- hr : 중앙선 -->
<hr />
<!-- br : 줄바꿈(*) -->
Lorem ipsum dolor <br>
Lorem ipsum dolor
</body>
</html>
결과
응용
<!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>
<h1>홍차</h1>
<hr />
<h2>정의</h2>
<p>홍차는 백차, 녹차, 우롱차</p>
<br />
<h2>등급</h2>
<p>
홍차는 여러가지로 등급이 매겨진다.
</p>
<p>- 브로큰 페코</p>
<p>- 브로큰 페코 수숑</p>
<p>- 브로큰 오렌지 페코</p>
</body>
</html>
결과
순서있는 목록 태그
<!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>
<!-- ol : 순서있는 목록 태그(ordered list) -->
<ol>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ol>
</body>
</html>
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=q, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 줄복사 : ctrl + d -->
<!-- 참고) 에밋기능 : 부모태그>자식태그*개수 -->
<!-- ul : 순서없는 목록 태그(unordered list) * -->
ul>li*3
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
</body>
</html>
결과
테이블 사용 행 열
<!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>
<!-- 사용법 : table - thead(제목태그)-생략가능 [tr(행), th(열)] 굵은글씨 중앙정렬 -->
<!-- 본문 tr(행), td 열 일반글씨 -->
<table border="1">
<!-- 제목 : 테이블 -->
<thead>
<tr>
<th></th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
</thead>
<!-- 본문 시작 -->
<tr>
<td>2교시</td>
<td>영어</td>
<td>국어</td>
<td>과학</td>
<td>미술</td>
<td>기술</td>
</tr>
<!-- 본문 끝 -->
</table>
</body>
</html>
결과
비디오 테스트
<!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>
<!-- 파일명.확장자 (.css, .js 등등) -->
<!-- 동영상 파일 : .mp4 -->
<!-- 비디오 태그 : video(부모태그) > source(자식태그) src="비디오경로" type="video/확장자" -->
<!-- video 속성 : width(가로크기), controls(동영상컨트롤패널) -->
<video width="640" controls="controls">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.webm" type="video/webm" />
</video>
</body>
</html>
결과
오디오 테스트
<!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>
<!-- 첫번째 오디오 -->
<!-- audio 속성 src="오디오파일경로" -->
<!-- 인터넷 주소 : http -->
<!-- https(보안 프로토콜), http: 프로토콜 -->
<!-- 오디오 확장자 : .mp3, .ogg -->
<!-- source src="오디오파일경로" type="audio/확장자" -->
<hr>
<!--- 두번째 오디오 --->
<audio controls="controls">
</audio>
</body>
</html>
결과
※ 이미지
<!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>
<!-- img : 이미지 태그 -->
<!-- 주요속성 : src="이미지경로" alt="이미지설명글" -->
<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" alt="토끼" width="300" /><br>
<!-- alt 속성 : 그림이 없으면 대체텍스트를 화면에 보여줌 -->
<img src="nothing" alt="그림이 존재하지 않습니다." width="300">
</body>
</html>
결과
테스트
코드로 구현하시오
답
<!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>
<ul>
<li><b>두 번째 목록</b></li>
<ol>
<li>Lorem ipsum <sup>sit amet</sup></li>
<li><ins>Lorem ipsum sit amet</ins></li>
<li><del>Lorem ipsum sit amet</del></li>
</ol>
</ul>
</body>
</html>
'HTML > Html' 카테고리의 다른 글
| [HTML]연습 문제 & 자주 쓰는 용어 및 태그 정리 (0) | 2023.08.03 |
|---|---|
| [HTML]테이블, 이미지 링크연결, 라디오, 체크박스, 버튼, 파일첨부, 대화상자, 아이디 비밀번호(텍스트 입력) (0) | 2023.08.02 |
| [HTML] 비주얼 스튜디오 단축키 (0) | 2023.08.01 |