#1 VS 익스텐션 & 몰랐던 단축키들
Auto Rename Tag 자동으로 html 코드 마무리 지어주는 익스텐션 Live Server 비주얼스튜디오에서 html 실행 Window + . 윈도우 이모티콘 Alt + l + o live server 실행 ! + Enter, html:5 자동으로 기본 html 설정 Ctrl + / 주석 처리 Alt + Shift + 아래화살표 밑줄에 같은 내용 복사 li*3 li태그 3번 반복 SETTING-JSON-SETTINGS.JSON 비주얼 스튜디오 주석 색깔 변경 등 Material Theme 화면 색깔 변경
#2 본문 태그
<h> 제목태그 (h1~h6) <p> 본문내용태그 (줄바꿈) <span> 본문내용태그 (옆으로)
특징이 없는 태그<br> 개행 (break) <hr> 수평선 - 끝 태그 생략 가능(홀태그)
# 3. 강조
<b> 굵게 <strong> 굵게 (청각장애인 배려), 걍 쓸거면 보통 이걸로 씀
웹페이지 맨 밑에 '개인정보처리방침' strong으로 처리되있음
#4. 리스트
리스트 공간 선언 <ul>, <ol>, <dl> 리스트 내 실질적인 데이터 <li> <ul> unordered list, 번호없는 목록 <ol> ordered list, 번호있는 목록
type = "A", "a", "1"(기본값), "i", "I"<dl> definition list, 정의 목록
<dt>, <dd><dt> title, 용어의 제목 <dd> description, 용어의 설명 <li> list item, 공통적으로 사용 li*숫자 리스트 갯수만큼 자동완성
#5. 이미지
<img src="상대경로"> 원본 이미지 <img width="500px" height="300px" src="img1.png"> 이미지 크기 속성 추가 <img alt="경고문구" src="틀린상대경로"> 웹에 있는 이미지 이용 웹 이미지 - 이미지 주소 복사 이전경로 ../
# 6. a태그
<a> 링크 웹에 있는 이미지 이용 웹 이미지 - 이미지 주소 복사 <a href="링크"> <a target="_blank"> 새 창으로 이동
#7. 테이블태그
<tr> table row, table 태그 안에서 행을 의미 <td> table data, table 태그 안에서 열을 의미 <table><tr><td> 순서 <table border="1px solid black"><table> <td colspan="2"> 열병합 <td rowspan="2"> 행병합
#8. 입력태그
<input type="text"> 텍스트 입력 <form><input></form> style="text-align: right;"모든 입력받는 태그는 form 태그 안에 들어가 있어야한다.style="text-align: right;" placeholder "아이디를 입력해주세요"
사용자에게 설명하고 싶은 텍스트를 입value "기본값" type= "(데이터 양식)" "text"
"password"
"email"
"submit"
"file"
"color"
"radio"
"checkbox"
"number"
"range"
"date"maxlength 최대 글자수 지정 readonly 읽기 전용 <select> <option>과 함께 사용
여럿 중 하나 쓰고 싶을 때<textarea> 넓은 텍스트 영역
rows="10" cols="40" 으로 크기 지정Document
#9. 실전 예제
테이블 속성 <table>: 속성을 넣을 수 없다.
<td> : 속성 삽입 가능정렬 style="text-align: right;"
style="text-align: left;"
style="text-align: center;"
Document
Step1 : 아이디/비번 입력 아이디 : 비밀번호 : 비밀번호 확인 : Step2: 개인정보 성별 : 남 여 혈액형 : 생일 : Step3: 선호도 취미 : 축구 야구 농구 좋아하는 색깔 : Step4: 적고 싶은 말
