반응형
VSCODE 설정 방법
css로 폴더 지정 후 .vscode라는 파일 생성, 그 파일 안에 launch.json파일과 settings.json파일 생성
launch.json파일 코드
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}settings.json 파일 코드
{
"liveServer.settings.port": 5501,
"editor.tokenColorCustomizations": {
"comments": "#ff8800" //원하는 주석 색상
}
}
단축키 및 태그
기본 태그
| 태그 이름 | 설명 |
| p | 본문 글자 태그 |
| br | 개행 태그 |
| hr | 수평 줄 태그 |
| b | 굵은 글자 태그 |
| i | 기울어진 글자 태그 |
| small | 작은 글자 태그 |
| sub | 아래에 달라 붙는 글자 태그 |
| sup | 위에 달라 붙는 글자 태그 |
| ins | 밑줄 글자 태그 |
| del | 가운데 줄이 그어진 글자 태그 |
| a | 앵커 태그 |
목록 태그
| 태그 이름 | 설명 |
| ul | 순서가 없는 목록 태그 |
| ol | 순서가 있는 목록 태그 |
| li | 목록 요소 |
테이블 태그
| 태그 이름 | 설명 |
| tr | 표 내부의 행 태그 |
| th | 행 내부의 제목 셀 태그 |
| td | 행 내부의 일반 셀 태그 |
이미지 태그
| 속성 이름 | 설명 |
| src | 이미지의 경로 지정 |
| alt | 이미지가 없을 때 나오는 글자 지정 |
| width | 이미지의 너비 지정 |
| height | 이미지의 높이 지정 |
입력 양식 태그
| 속성 | 설명 |
| button | 버튼을 생성 |
| checkbox | 체크박스 생성 |
| file | 파일 입력 양식 생성 |
| hidden | 보이지 않음 |
| image | 이미지 형태 생성 |
| password | 비밀번호 양식 생성 |
| radio | 라디오 버튼 생성 |
| reset | 초기화 버튼 생성 |
| submit | 제출 버튼 생성 |
| text | 글자 입력 양식 생성 |
//P17 에서 부터 다시 하기
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
1. 하고 싶은말- hello..라이브서버 플러그인<br>
1. 하고 싶은말- 정상동작이 안되면 .vscode 폴더 생성<br>
1. 하고 싶은말- 해당 폴더 안에 settings.json 파일 생성<br>
1. 하고 싶은말- 브라우저 변경 -> setting 들어가서 browser검색<br>
<!--
단축키
코드이동: alt + 방향키
행복사: shift + alt +방향키
코드정렬: alt + shift + f
alt + cursor 하면 원하는 위치에 같은 코드 작성 가능
태그명 + tap버튼
주석단축키: ctrl + /, alt + shift + a
행삭제: ctrl + shift + k
-->
<a href="https://www.naver.com">네이버</a>
<h3>
제목태그
</h3>
<p>글자태그</p>
<small>글자태그</small>
<strong>글자태그</strong>
<i>글자태그</i>
<del>글자태그</del>
<b>글자태그</b>
<hr/>
<ol>
<li>목록</li>
<li>목록</li>
<li>목록</li>
</ol>
<ul>
<li>목록</li>
<li>목록</li>
<li>목록</li>
</ul>
</body>
</html>결과
인라인, 블럭 태그
예시
결과
반응형
'JS | CSS | HTML' 카테고리의 다른 글
| 61일차 CSS FLOAT (0) | 2022.12.21 |
|---|---|
| 61일차 CSS PADDING, MARGIN, BOX (0) | 2022.12.21 |
| 60일차 CSS BACKGROUND (1) | 2022.12.20 |
| 60일차 CSS FONT , TEXT, BORDER, DISPLAY (0) | 2022.12.20 |
| 60일차 CSS STYLE, SELECTOR (0) | 2022.12.20 |
댓글