16일차 학습내용
| 1. vscode 설치 2. html 3. 태그, 속성과 값 4. html문서 구조 5. 텍스트 관련 태그 6. 목록 태그 7. 표 태그 8. 이미지 태그 9. 링크태그 10. 폼태그 11. input태그 13, selector 14. textarea 15. button 16. 프로그래스 17. html 시멘틱태그 |
0. 유용한 사이트
www.w3schools.com
www.caniuse.com //어떤 태그가 어떤 태그나 속성 기능을 지원하지 않는지 체크체크
https://developer.mozilla.org/ko/docs/Web
1. 개발 툴
http://code.visualstudio.com/
구글 > vscode 검색 > 다운받기
// 확장자들 설치할 것 prettier줄바꿈도움/ live server바로확인 / html css supporter자동완성
// 왼쪽하단 톱니바뀌 - setting 확장자나 워크벤치에서 뒤로가기 설정 150으로 늘려주고..
2. HTML
: HyperText Markup Language : 웹에서 사용하는 웹문서 //hyperText:링크 눌러서 이동하는 기능. Markup 사진 본문 제목 태그로 표시하는 것. 태그 언어
확장자명 : .html
웹문서 : 작성 프로그램 "웹편집기" (VSCode), 웹문서 보는 프로그램 "웹브라우저"(크롬)로 서로 다름.
웹표준 : 웹사이트를 만들 때 지켜야하는 약속들을 정리한 것.
HTML5
W3C : Wolrd Wide Web Consortium 단체 설립. 웹표준을 정의하는 단체.
크로스브라우징 : 회사마다 다른 엔진이면 최신문법 지원이 안될수도 있고, 결과물이 조금씩 다르게 보일수도 있으니까
특히 인터넷익스플로어....확인해줬어야 이제는 엣지(크롬이랑 비슷...)
브라우저상의 콘솔 개발자도구 F12
3. 태그 tag
: 마크업할 때 사용하는 약속된 표기봅
< 와 > 를 이용하여 구분 <html>
태그는 소문자로 사용
여는 태그와 닫는 태그 정확히
태그 : 쌍태그로 이루어짐 <html> <h1> ... </html>
홑태그 : 하나의 태그로 이루어짐 <img /> <br />
들여쓰기 잘하기
태그는 속성과 함께 작성 가능
<태그명 속성명="속성값" 속성명="속성값" > ..... </태그명> //띄어쓰기 구분자로 속성들 구분
4. Html문서 구조
//주석 <!-- 여기에 --> . 단축키 Ctrl+/
// 문서 열고 ! Tap 자동완성
// html5 버전 간결한 <DOCTYPE> 문서타입
// <html>의 문서를 열고 닫음. 최상위 부모. 그 내부에 다 적음. 언어. 언어ko로 바꾸면 구글 검색할 때 한글인걸 먼저 나와
// <head> 브라우저에 정보를 주는 태그. 화면상에는 보이지 않음. (body내부가 화면에 나타남)
// <Meta /> 문자인코딩/ 문서 키워드/ 요약정보 관련한 속성, 문서세팅값 정보값 지정, 언어, 브라우저 엔진에 던져줄 번역정보. 최신엔진 써라는 표시. name="태그이름" content="사이즈, 폰화면 브라우저 맞게 반응형 지정"
// <title> 탭에 표시되는 제목 기능없는저장?
//<body> 화면에 보이는 부분 / 기본적으로 한줄로 나옴/ 띄어쓰기나 엔터를 여러번 해도 한번만 지원됨/ 해당 태그를 사용해야 함. html 태그 밖에 써도 화면에는 나타나지만/ 다루기가 어려우니까 안에 써줘야쥐
5. 텍스트 관련 태그
<h1></h1> : h태그 : h1 ~ h6 : 제목 태그 : 자동줄바꿈
* 줄복사 단축키 alt shift
<p></p> : 단락만들기 : 앞뒤 줄바꿈 있는 텍스트 덩어리
<br /> 줄내림
<hr />수평 줄 넣기
<blockquote></blockquote> : 인용문 넣기 : 양쪽 들여쓰기 적용됨
<pre></pre> : 입력하는 그대로 화면에 표시 (줄내림 공백 엔터 다 적용~~)
<span></span> : 줄바꿈 없이 영역 묶기 : 일부 텍스트만 묶어서 스타일 적용할 때 주로 사용
// 직접적으로 적용하는 경우는 드물다. css파일로 해줌
<strong></strong> : 볼드체
<u></u> : 밑줄
6. 목록 태그
<ul></ul>, <li></li> : 순서 없는 목록 만들기 unordered list
<ol></ol>, <li></li> : 순서 있는 목록 만들기 ordered list
<html02.html 11:15
// ol>li*4 Tap 에밋 자동완성...
ol의 type 속성 : 숫자/ 영문/ 로마숫자 변경 가능 <11:35
1 = 숫자, a = 영문소문자, A = 영문대문자, i = 로마숫자소문자, I = 로마숫자대문자
start속성 : 중간번호부터 시작 가능
reversed 속성 : 항목 역순으로
7. 표만드는 태그
표 : table 은 행(row), 열(column) 으로 이루어져 있다.
<table></table>
table내부에 들어가는 태그들은
<tr></tr> : 행지정
<td></td> : 셀만들기
<th></th> : 셀제목
- 행/열 합치기
<td>, <th>에 작성
colspan속성 : 열 합치기 <td colspan="합칠 열 개수">...
rowspan : 행 합치기 <td rowspan="합칠 행 개수">...
<html3.html
//table안에는 tr td구조 맞게 써야 함. 그 구조가 맞지 않으면 문서 맨뒤로 튕겨감.
8. 이미지 태그
- 이미지 파일
GIF : 색상 수 256가지뿐, so 파일크기 작음. 아이콘, 불릿 등 작은 이미지에 주로 사용.
움직이는 이미지 만들 수 있음.
JPG : 사진
PNG : 투명 배경
- 태그
<img />
src 속성 : (필수기입속성) 이미지 파일 경로 지정해줘야 함. (상대경로, 절대경로 둘 다 가능)
alt 속성 : 이미지 설명글 (html에서 추구하는 속성)
width, height속성 : 이미지 가로, 세로 크기 지정 (px단위) //가로만 지정해주면 세로는 자동으로 비율 맞춰서 설정됨. 둘다 지정하면 이미지가 찌그러질 수 있다. 포토샵으로 원하는 크기를 정확하게 만들어놓든지..
<html04.html 11:57
width 퍼센트는 화면 비율 맞춰 조정됨
px로 지정하면 고정임
//경로
//img 옆에도 br/ 붙여야 줄내림 됨. 홑태그들 특징임.
9. 링크 <12:30
- 태그
<a> </a> : href속성을 이용하여 다른 페이지로 이동할 수 있게
<a href="이동할 주소">텍스트</a>
<a href="이동할 주소"><img /></a>
- 속성
href : 링크 주소
target : 새창 : _blank
현재창으로 이동 : _self (default)
<12:34 html05.html
- 앵커 //a태그로 가능 <06 12:40
단축키 ctrl+alt 여러줄 선택
//셀랙터 아이디 : #아디기값을 지칭
10. 폼 관련 태그 <12:51
아이디와 비번 입력, 로그인버튼, 회원가입 창 등
사용자가 웹사이트(서버)로 정보를 보낼 수 있는 요소들을 모두 폼form이라 한다.
- form태그
<form 속성="값"> ... 여러 폼 요소 ... </form>
- form태그의 속성
method : 사용자가 입력한 내용을 서버쪽으로 어떤 방식으로 전달할지 지정 (2가지를 가장 많이 사용함)
get : 주소 표시되는 부분에 사용자가 입력한 내용이 그대로 드러남. /넘겨주는 데이터 주소포함 텍스트로
post : 입력 내용이 url에 드러나지 않고, 내부에 담아서 전송 (내부 컨테이너에 담아서 숨겨서 보냄) / 이미지나 동영상을 글자로 드러나게 불가능하쥐. form택 post방식으로 보내야 . 지정을 해줘야 함. 디폴트 값이 get방식이 때문에
name : 태그에 이름 부여. 폼 태그 요소에 name속성을 지정하면 // 모든 a input table tf ... 모두 가능
넘겨주는 데이터의 이름을 name속성값으로 지정해줌. // 서버에서 찾아야 처리가 되니까 이름 붙여야함 <12:58
action : form태그 안에 내용들을 처리해 줄 서버상의 경로작성 // 이페이지를 띄울 경로, 데이터 들고갈 경로.. 다 따로 있음.
//autocomplete : 자동완성해줄지...
<12:59 html07
input submit 버튼 : 내용을 전송해주는 버튼이 만들어지고 다음 페이지로 값을 전송해주게 됨~~ 해당 페이지를 요청한것과 동일한 결과. (get)name속성을 넘어가는 데이터의 이름으로 설정되게 된다. // action은 메서드 겟방식
name을 적지 않으면 데이터가 사라지게 됨~~ 주소에 내가 보낸 메세지가 표시가 안됨.
이동하니까 새로 열린 페이지 주소에 msg적은 게 표시되야 처리를 할 수 잇자나
레이블을 붙여주면 라벨붙여준만큼 포커스가 거기로 들어가게 됨 인풋태그를 선택한효과
체크박스에서 라벨로 붂어야 텍스트만 클릭해도 택스트가 되는거여
11. input 태그
table태그내 text에 많이 들어감
- 태그
<input 속성="값"... //> //홑태그
폼에서 사용자가 입력하는 부분을 만들 때 사용
<input type="type속성값"에 따라 여러 형태로 입력받을 수 있다.
- type속성 값 //에 따라 텍스트 달력 위아래, 체크박스..로 달라지는거여
text : 한줄짜리 텍스트 입력할 수 있는 텍스트 상자
hidden : 화면상에 보이지 않지만 서버로 데이터를 전송할 때 사용. 값을 숨겨서 보내고 싶을 때
password : 비밀번호 입력란. *나 점으로 표시
radio : 하나의 항목만 선택하게 해 줄 수 있는 체크박스 계열 ex. 남녀체크 / 단점 선택 해제가 안됨
name속성 값이 동일해야 동일 그룹으로 인식하고 하나만 선택가능하게 됨.
checkbox : 중복선택 가능. 체크해제 가능
submit : 사용자가 입력한 정보를 서버로 전송하는 버튼을 만들어 줌. value속성값이 버튼글자로 표시됨.
reset : 입력한 모든 정보가 초기화되는 버튼. 역시 벨루 속석값이 value값..
image : 이미지 버튼 넣기. submit과 동일한 기능(서버로 데이터 전송). src로 이미지경로를 지정해햐함.
color : 색상 선택 상자 (컬러피커 뜸). 색상값을 보낼 수 있다.
date, month, week : 날짜, 월, 년, 주와 연도
time, datetime, datetime-local : 시간, 날짜..
file : 파일 첨부. 할때 쓰는 버튼이랑 경로...
- input 태그의 다른 속성
autofocus : 입력커서 지정
placeholder : 입력박스에 기입할 내용을 힌트로 표시~~
readonly : 읽기 전용
required : 필수 기입 요소로 지정. 입력 안하면 페이지로 전송이 불가함
//기타 minlength maxlength......
<html08.html
2:46 s넘어간것
http://127.0.0.1:5500/html08.html?tagName=%EC%A7%88%EB%AC%B8%EC%9D%84+%EC%A0%81%EC%9C%BC%EC%84%B8%EC%9A%94..&hiddenval=%EB%B9%84%EB%B0%80%EC%9D%B4%EB%8B%88%EA%B9%8C.+%EA%B7%BC%EB%8D%B0+%ED%95%84%EC%88%98%EB%A1%9C+%EB%84%A3%EC%96%B4%EC%95%BC+%ED%95%A8.&pw=&gender%3F=on&food1=on
?뒤에 있는 값 : 파라미터라고 부름
http://127.0.0.1:5500/html08.html?tagName=%EC%A7%88%EB%AC%B8%EC%9D%84+%EC%A0%81%EC%9C%BC%EC%84%B8%EC%9A%94..&hiddenval=%EB%B9%84%EB%B0%80%EC%9D%B4%EB%8B%88%EA%B9%8C.+%EA%B7%BC%EB%8D%B0+%ED%95%84%EC%88%98%EB%A1%9C+%EB%84%A3%EC%96%B4%EC%95%BC+%ED%95%A8.&pw=&color=%23ffea00&month=&date=2022-02-08&week=2022-W07
버튼태그도 submit기능이 들어있다.
데이터를 들고가게 하려면 form태그 안에서 있어야만 가능해영
autofocus 3:00
13. selector 태그 <3:5
: 옵션중에 선택하는 드롭다운 목록
- 태그
<select>
<option value="hello" selected> 내용1 </option> //value적으면 넘어가는 데이터가 해당값이고, 적지 않으면 내용1이 넘어감 //selected를 안적으면 처음에 선택된거로 보여도 실제 선택된거 아님 안넘어감
<option> 내용2 </option>
<option> 내용3 </option>
</select>
<3:8 html09
폼태그에 많이 넣어서 선택내용 설정
선택내용에 optgroup 제목으로 분류 가능. 선택대상은 아님
14. textarea 태그 <3:15 //폼테그 안에
: 여러줄 입력하는 텍스트 영역
- 태그
<textarea></textarea>
- 속성
cols : 가로너비 문자단위로 지정
rows : 세로너비를 줄단위로 지정
//미리 값을 넣겠다는건 value가 아니라 태그 사이에~~~~~~~
15. button
: 버튼 태그. <input type = "button"과 동일한 버튼 생성
차이점은 화면 낭독기에서 버튼이 있다는 것을 button태그를 사용하면 인지하고 전달 가능.
- 태그
<button>버튼텍스트</button> 폼태그 안에 있으면 버튼이랑 동일 3:38
<button><img /></button> 이미지버튼
- type 속성
submit : 폼의 내용을 서버로 전송 (<input type="submit"..과 동일기능)
reset : 입력내용 초기화
button : 버튼 형태만 있고 자체 기능은 없음. 눌러도 아무 기능 없음. 가끔 안될 때 타입에 버튼 적어줘라
onclick :"자바스크립트"넣거나... "location.href=''" 이벤트 처리 태그에 직접 작성.... 이런 단순한 기능은 여기에 적지만 여러 기능하면 js로 함수 따로 만들고 함수만 호출되도록 적어놓아용
16. progress태그
: 작업의 진행상태를 나타내는 등의 막대그래프같은 태그 // 예쁘게 꾸미려면 쓸일은없음
- 태그
<progress value="값"></progress>
- 속성
value : 부동소수점으로 표현많이해.. 0보다 크거나 같고 1.0보다 작은...
max : 완료 기준 값
<3:41
프로그래스 html은 정적인거라 안움직이지 html은 문서야. 나열만~~~ 보여줄 요소를 다 넣어놓고,
css는 디자인 사이즈, 격자배치, 간격, 색, ... 꾸미고
이벤트 주고 싶으면 있다없고 스크롤 움직이는건 다 javascript 움직이게 효과
html10.html
<3:44 크로스브라우징
<메타태그 3:57 html10.html
accessibility
스크립트는 다 바닥으로 가는게 무거워지지 않아~~
버튼 눌러야 위에서 함수호출되는거면 위에 넣어도 됨
17. html5 시멘틱태그 <4:33
: 웹페이지의 각 요소에 의미를 부여해서 의미와 관련성을 기반으로
보다 진보된 검색 또는 서비스가 가능하도록 시도한
header : 상단부, 로고같은거 배치하는 부분
nav : 네비게이션 (메뉴 가로바)
aside : 오른쪽 소 메뉴같은 용도
section : 본문부분, article 포함
article : 본문의 주 내용이 들어가있는 부분
footer : 하단부
가독성이 높아진거지.. 꼭써야하는건아님
부품 모듈식으로 따로 만듦- 수정 보수 유지
mvc패턴도 부품식으로.... 교재 나간거 찾아오기...html
////////
18. 실습
이력서 샘플 만들기
table태그로
'코딩' 카테고리의 다른 글
| 2022.03.03_18일차_css(2), javascript(1) (0) | 2022.03.05 |
|---|---|
| 2022.03.01_17일차_css(1) (0) | 2022.03.04 |
| 2022.02.25_15일차_스트림 (0) | 2022.03.01 |
| 2022.02.24_14일차_람다식 (0) | 2022.02.28 |
| 2022.02.23_13일차 (0) | 2022.02.27 |
댓글