tool
▸ brackets.io
유용한 사이트
▸www.w3schools.com/
HTML
HyperText Markup Language : 웹에서 사용하는 웹문서
확장자명 : .html
웹표준 : 웹사이트를 만들때 지켜야하는 약속들을 정리한 것 / HTML5
W3C : 웹표준을 제정하는 단체
📌
일반문서 : ex) 엑셀 .xlsx 입력프로그램과 내용 확인 프로그램이 동일
웹문서 : 작성프로그램은 "웹편집기" 문서보는 프로그램은 "웹브라우저"로 서로 다름
태그
마크업할 때 사용하는 약속된 표기법
- < 와 > 를 이용해 구분 ex) <html>, <head>
- 태그는 소문자로 사용 (대소문 구분하지 않지만, html5 표준에서 권장)
- 여는태그와 닫는 태그 정확히 작성
▹ 태그 : 쌍으로 이루어짐 Ex) <h1> ... </h1> <html> </html>
▹ 홑태그 : 하나의 태그로 이루어짐 ex) <img />, <br /> - 들여쓰기
- 태그는 속성과 함께 작성 가능
▹ <태그명 속성명="속성값" 속성명="속성값" ...> </태그명>
HTML 문서 구조
- <!doctype html> : 문서 유형을 지정하는 선언문
- <html> : 웹 문서의 시작과 끝을 알려주는 태그
- <head> : 브라우저에게 정보를 주는 태그
화면에 보이지 않지만 브라우저가 알아야할 정보를 모두 <head>태그 안에 입력
<title>, <meta>, <style>, <link> .... - <meta> : 문자인코딩 및 문서 키워드, 요약 정보
- <title> : 웹브라우저 제목 표시줄 지정
- <body> : 실제 브라우저에 표시될 내용
💡 주석처리 내용 <!-- 주석처리 내용 --> Ctrl + Shift + /
텍스트 관련 태그
- <h1><h2> : h 태그 : 제목 표시하기 <h1> ~ <h6>
- <p> : 단락 만들기
- <span> : 줄바꿈 없이 영역 묶기
목록 태그
- <ul>, <li> : 순서 없는 목록
- <ol>, <li> : 순서 있는 목록
▹type 속성 : 목록앞에 숫자/영문/로마숫자 변경가능
• 속성값 : 1 = 숫자(기본값) a = 영문소문자 A = 영문대문자 i = 로마숫자소문자 I = 로마숫자대문자
▹start 속성 : 중간번호부터 시작 가능
▹reversed 속성 : 항목 역순으로 순서 표시
표만드는 태그
표 : table 은 행(row)과 열(column)으로 이루어져 있다.
- <table></table> : 테이블의 영역에 해당
- <tr></tr> : 행을 지정
- <td></td> : 셀(열)만들기
- <th></th> : 제목 셀
- 행/열 합치기 : 셀을 합치는것이므로 셀을 만드는 <td> 태그에서 이루어짐
▹ conlspan 속성 : 열 합치기 <td colspan="열의 개수">
▹ rowspan 속성 : 행 합치기 <td rowspan="행의 개수">
이미지 태그
💡 이미지 파일
• GIF : 색상수 256가지뿐, 파일크기 작음, 아이콘, 불릿 작은이미지에 주로 사용
• JPG : 사진
• PNG : 투명배경
💡 이미지 경로
✔ 내 컴퓨터의 이미지로 경로
• 상대 경로 : 현재 작업파일을 기준으로 이미지 파일의 위치 작성 (확장자 포함)
☑ 작업파일과 동일한 폴더내에 있을 경우 : 이미지 파일의 이름만 작성, 작업파일동일 한 폴더내의 하위 폴더 안에 있을경우 한단계 아래를 뜻하는 '/'를 사용하여 폴더명/파일명
☑ 작업파일의 상위폴더에 있을경우 :상위폴더를 지칭하는 '..'을 사용하여 ../파일명
• 절대 경로 : 파일이 컴퓨터내에 위치한 전체 주소를 작성
ex) D:\html\workspce\imhs\이미지명.jpg
✔ 웹 상의 이미지로 경로
☑ 이미지 주소 복사해서 이미지경로에 넣기
- <img /> : src 속성을 사용하여 이미지 파일 경로를 반드시 지정해줘야함
src="이미지 경로"
alt="이미지 설명글"
링크
태그
- <a> : href 속성을 이용하여 다른 페이지로 넘어가게 만들기
<a href="이동할 주소"> 텍스트 </a>
<a href="이동할 주소"> 이미지 </a>
속성
- href : 링크주소
- target : 링크한 내용이 표시될 위치
새창 : _blank
현재창 : _self(기본값) - downliad : 링크한 내용을 다운로드 함
앵커
폼 관련 태그
아이디와 비번 입력, 로그인 버튼, 회원 가입창 등 사용자가 웹사이트로 정보를 보낼 수 있는 요소들을 모두 폼from이라 한다.
✔ form 태그
<form 속성="속성값"...> 여러 폼 요소 태그 </from>
✔ from 태그 속성
- method : 사용자가 입력한 내용들을 서버쪽으로 어떤방식으로 넘겨줄지 지정
▹get : 주소표시줄에 사용자가 입력한 내용이 그대로 드러남
▹post : 입력내용이 드러나지 않고 길이 제한 받지 않음 - name : 폼에 이름 붙여주기
- action : form 태그 안의 내용들을 처리해줄 서버상의 주소(프로그램) 지정
- target : action 속성에 지정한 스크립트 파일을 현재창이 아닌 다른 위치에 열 수 있도록 지정 가능한 속성
- autocomplete : 자동완성기능
✔ class와 id 속성
- class="" : 이름부여, 같은 속성값을 가진 태그들을 그룹으로 묶어 처리할때 주로 사용
클래스 속성값은 여러개 부여 가능하고 띄어쓰기 구분으로 지정 - id="" : class 속성보다 우선순위가 높은 선택자
속성값은 한태그에 유일한 값만 허용 (중복X)
✔ input 태그
홑 태그로 폼에서 사용자가 입력하는 부분을 만들 때 사용
한줄 텍스트 입력, 체크박스, 로그인 버튼 등 여러 타입 존재
☑ input 태그의 type 속성이 속성값
- text : 한줄짜리 텍스트 입력 상자
- hidden : 화면상에는 보이지 않지만 서버로 데이터 전송할때 숨겨서 전송가능
- password : 비밀번호 입력란. (. *로 대치됨 > 브라우저나 운영체제에 따라 다름)
- radio : 하나의 항목만 선택할 수 있음 Ex) 남여 항목있을때 하나 선택하면 다른하나는 선택체크 해제됨
- checkbox : 두개 이상의 여러가지 선택 가능
- color : 색상 선택 상자
- date.month,week : 날짜 선택 (브라우저별로 가능한지 체크하고 사용하기)
- time, datetime, datetime-local : 시간선택
- reset : 입력된 모든 정보 지우기. value 속성값이 버튼의 표시글이 됨
- submit : 사용자가 폼에 입력한 정보를 서버로 전송.
- image : 이미지 버튼 넣기. str="이미지 경로"
- buttom : 버튼
- file : 파일 첨부 (추가 지정해줘야되는 속성들이 있음.... 추후)
☑ input 태그의 다른 속성
- autofocus : 입력란에 커서 지정
- placeholder : 입력 박스에 기입할 내용 힌트 표시하기
- maxlength : 최대 입력가능한 글자수 설정
- readonly : 읽기전용
- required : 필수 기입 필드 지정
- min, max, step
- size, minklength, maxlengthtt
select
옵션중에 선택하는 드롭다운 목록
✔ 태그
<select name="값">
<option value="값">내용 1</option> // 값지정 안해주면 텍스트가 넘어감
<option>내용 1</option>
<option>내용 1</option>
....
</select>✔ option 속성
- value : 옵션을 선택했을 때 서버로 넘겨질 값 지정
- selected : 미리 선택, 화면에 표시될때 기본적으로 선택되어 있는 옵션 지정
✔ optgroup 태그
항목들을 그룹으로 묶어야 할경우 사용
textarea
여러줄 입력가능한 텍스트 영역
태그
<textarea>내용</textarea>
속성
- cols : 텍스트의 가로 너비 지정
- rows : 텍스트의 세로 높이 지정
button
버튼태그 <input type="button" value="버튼이름">과 동일한 버튼으로 사용가능
차이점은 화면 낭독기
CSS 활용에 편리
태그 : <button>버튼이름</button>
- type 속성
submit : 폼을 서버로 전송
reset : 입력내용 초기화
button : 버튼 형태만 만들고 자체 기능X - onclick 속성
버튼 클릭시 이벤트 등록 ( 이벤트 등록 코드는 javascript)
progress
작업의 진행상태를 나타내는 등의 막대 그래프 같은 태그
태그 : <progress value="값" ...></progress>
속성
- value : 부동소수점으로 표현(실수) 0.0 ~ 1.0 기본세팅. max 지정 0~max
- max : 완료 기준
'basic > HTML, CSS' 카테고리의 다른 글
| day 22 실습(2) - 회원가입 from 만들기 (0) | 2021.05.25 |
|---|---|
| day 22 실습 - CSS (0) | 2021.05.25 |
| day 22 - CSS (0) | 2021.05.25 |
| day 21 실습 (2) - HTML (이력서 양식 만들기) (0) | 2021.05.24 |
| day 21 실습 - HTML 태그 (0) | 2021.05.24 |