728x90
Visual Studio Code
설치 및 폴더 연결
- 홈페이지로 들어가 다운로드 받은 후 폴더 연결
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
- 사용할 폴더의 영역을 확인하고, 파일을 생성함
settings
- file - preferences - settings 들어가서
- mouse wheel zoom 체크
- live server > custom browser: chrome 선택
- 기본적으로 사용할 브라우저 선택
- 라이브서버 플러그인 설치 후 사용( alt + l → alt + o)
html:5 자동완성 및 단축키
- html:5 작성 + tab
단축키
코드이동: alt + 방향키
코드정렬: alt + shift + f
원하는 위치에 한번에 글쓰기: alt + cursor
태그 한번에 만들기: 태그명 + tab 버튼
주석 단축키: ctrl + /, alt + shift + a
행 삭제: ctrl + shift + k
태그 바로 만들 때: a + tab
settings.json 파일
- 원하는 주석 색상 바꾸기
{
"liveServer.settings.port": 5501,
"editor.tokenColorCustomizations": {
"comments": "#d3ff99" //원하는 색상, 주석색
}
}
2022.11.28 - [HTML/CSS] - [JSP&HTML] 웹 프로그래밍, HTML 태그
HTML 태그
- 태그는 단순히 의미만 부여하는 용도이므로 어떤것으로 사용해도 관계x
- 전부다 div 도배해도 문제없음
HTML 태그
| block | inline | inline-block |
| 전체영역 | 태그 자체의 크기 | inline으로 배치하되 block의 성질을 갖게 함 |
| 줄바꿈과 블럭크기를 가짐 | 줄바꿈이 없음 | |
| width, height 값을 통한 크기 지정 가능 | width, height 값 지정 - 무시 | inline 태그를 바꿔줘야 함 |
| <블럭 <블럭/> /> O | <인라인 <인라인/> /> O | 너비, 높이 지정 가능 |
| <블럭 <인라인/> /> O | ||
| <h1> </h1> <p> </p> <div> </div> 영역 <ul> </ul> <ol> </ol> <table> </table> <form> <form> |
<sapn> </sapn> 영역 <strong> </strong> <small> </small> <a> </a> <img src="경로"> <input> |
기본 태그
- block안 써져 있는것은 inline
| h | 제목 |
| p (block) | 본문글 문단, 문장을 나눌때 사용 |
| br | 줄바꿈 |
| hr | 줄바꾸고 밑줄 |
| div (block) | 영역을 나눌때 사용 |
| span | inline요소들을 그룹화하거나 영역을 나눌 때 사용 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용하려고 할 때 |
| a | 링크를 통해 다른 페이지, 문서 연결 |
| img | 이미지 삽입 |
| script | javascript와 같은 스크립트 코드를 정의할 때 사용 |
| link | 해당 문서와 외부소스(외부 스타일 시트) 연결할 때 사용 |
| pre | 입력하는 그대로 화면에 표시 (띄어쓰기 같은 거) |
| 혼자 쓰는 태그는 마지막에 /해주고 닫아줘라 (필수는 아님) | |
글자 형태, 의미 부여 태그
| b | 제목 |
| i | 굵은 글자 |
| small | 약하게 |
| strong | 강하게 |
| del | 글자에 줄 |
layout 태그
| header | 상단 | 사이트 이름, 문서 대표제목, 로고 등 |
| nav | 페이지 내부로의 이동을 위한 링크 모음 | 카테고리, 메뉴들의 집합 |
| section | 본문 (article 포함) | |
| article | section 내부에 위치 | 컨텐츠의 제목, 내용 |
| aside | 사이드에 위치 | 보조 메뉴, 광고 등 본문과 상관없는 내용 |
| footer | 하단 | 저작권, 저자의 이름, 연락처 등 |
a 태그
- a 태그 : 앵커태그, 이동할 경로를 정함 (inline)
- 서로 다른 웹 페이지 사이 또는 웹 페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그
<a 변수 = "값" > </a>
| href | 링크한 문서, 사이트 주소 |
| target | 링크한 내용이 표시될 위치(현재창 또는 새창) 지정 |
| download | 링크한 내용 다운로드 |
| rel | 현재문서와 링크한 문서의 관계를 알려줌 |
| hreflang | 링크한 문서의 언어를 지정 |
| type | 링크한 문서의 파일 유형 |
list(목록) 태그
| ul | 순서가 없는 목록 - 아래에 li사용 |
| ol | 순서가 있는 목록 - 아래에 li사용 |
| li | 목록 요소 (자식태그) |
- 이미지만 width, height 높이 지정
- 이미지 태그는 홑태그
- 음악 영상 넣을 수 있는 태그~ video 에는 controls 필수
table 태그
| tr | 표 내부의 행 태그 |
| th | 표 내부의 제목 셀 태그 |
| td | 표 내부의 일반 셀 태그 |
| border | 테이블의 윤곽 |
| colspan | 컬럼을 합칠 때 (가로) |
| rowspan | 로우를 합칠 때 (세로) |
form 태그 (block)
- 사용자가 입력한 데이터를 서버로 전송하기 위해 사용
| 속성 | ||
| method | 어떻게 넘겨줄지 지정 | get 또는 post |
| name | 폼의 이름 | |
| action | form태그 안의 내용들을 처리해 줄 프로그램 지정 | |
| target | action 속성에서 지정한 스크립트 파일을 현재창이 아닌 다른 위치에서 열도록 지정 | |
- input 태그 (inline): 데이터를 입력하기 위해 사용되는 태그, 사용자로부터 입력을 받을 때 사용
form 태그 내부에서 많이 쓰임
| type (input 태그에 들어감) | ||
| text | text 데이터 입력 | placeholder: 도움말 명시 |
| password | 비밀번호 입력 | |
| checkbox | 여러개 체크 가능 | checked: 체크여부 확인 |
| radio | 하나만 체크 가능(동그라미) | |
| select | 리스트 형태의 데이터 사용 | value 속성은 선택된 값 의미 |
| textarea | 장문의 글 | |
| button (inline) | 버튼 형태, value 지정하여 버튼 안에 들어갈 문자열 입력 | |
| submit | form내의 데이터를 서버로 전송할 때 사용 (반드시 必) | |
| reset | form내의 데이터 초기화 | |
| file | 파일 업로드 | |
- label 태그
<input type="radio" name="age" id="teen" vlaue="teanage">
<label for="teen"> 10대 </label>for 속성을 사용하여 결합 가능, for = id와 속성값이 같아야 함
<label> 요소를 결합하고자 하는 요소 내부에 위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합시킬 수 있음
사용자가 마우스로 해당 텍스트를 클릭한 경우 <label>요소와 연결된 요소를 곧바로 선택 가능(사용자의 편리성 ↑)
<div class="buttons">
<label for="first">HTML</label> <!-- label 태그는 제목을 나타냄 -->
<label for="second">CSS</label> <!-- label의 for는 input태그와 맞물려 이용됨 -->
</div>label 태그는 제목을 나타냄
for 는 input태그와 맞물려서 이용됨
더보기
실습
<!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>
hello, 라이브서버 플러그인
정상동작이 안되면 ,vscode 폴더 생성
해당 폴더안에 setting.json 파일 생성
브라우저 변경 → settings 들어가서 browser 검색
<!--
단축키
코드이동: alt + 방향키
코드정렬: alt + shift + f
원하는 위치에 한번에 글쓰기: alt + cursor
태그 한번에 만들기: 태그명 + tab 버튼(아래 예제)
주석 단축키: ctrl + /, alt + shift + a
행 삭제: ctrl + shift + k
태그 바로 만들 때: a + tab
-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="https://www.naver.com"></a>
<h3>제목태그</h3>
<p>글자태그</p>
<small>글자태그</small>
<strong>글자태그</strong>
<i>글자태그</i>
<del>글자태그</del>
<b>글자태그</b>
<ol>
<li>목록</li>
<li>목록</li>
<li>목록</li>
</ol>
<ul>
<li>목록</li>
<li>목록</li>
<li>목록</li>
</ul>
</body>
</html>
<!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 - 개발자도구를 이용-->
<!-- 블럭
전체영역을 공간으로 가집니다
블럭태그의 자식으로 블럭, 인라인 태그 모두 들어갈 수 있습니다.
-->
<div>블럭</div>
<div>블럭</div>
<div>블럭</div>
<p>블럭</p>
<h3>블럭</h3>
<ul>
<li>블럭</li>
<li>블럭</li>
</ul>
<table>
<tr>
<td>블럭</td>
</tr>
</table>
<div>
<div>
<div>
블럭
</div>
</div>
</div>
<!-- 인라인
인라인요소는 태그 자체의 크기를 가집니다.
인라인요소 안에는 인라인만 들어갑니다.
-->
<a href="#">인라인</a>
<span>인라인</span>
<i>인라인</i>
<b>인라인</b>
<strong>인라인</strong>
<small>인라인</small>
<!-- 정답은 틀림, a는 인라인, p는 블럭-->
<a href="#">
<p>?</p>
</a>
<span>
<div>틀림</div>
</span>
</body>
</html>
오늘 하루
더보기
기억에 남는 부분
-
-
어려운 부분
-
-
문제 해결 부분
-
-
728x90
'클라이언트 > HTML & CSS' 카테고리의 다른 글
| [HTML] Flex 문법 (0) | 2022.12.27 |
|---|---|
| [HTML] Float, Position (Box layout) (0) | 2022.12.22 |
| [HTML] padding(패딩), margine(마진), box-sizing(속성) (0) | 2022.12.21 |
| [HTML] CSS 문법 (선택자, 폰트&텍스트, display, background) (0) | 2022.12.20 |
| [JSP&HTML] 웹 프로그래밍, HTML 태그 (0) | 2022.11.28 |
