1. HTML 이란? : 웹에서 사용하는 파일 형식
1> 웹화면을 그려주는 역할을 의미하여 html 소스는 tag 라고 하여 <head>, <body> 등의 tag들로 구성되어있다.
2> 웹표준으로 HTML5는 버전의 차이로 버전은 지속적으로 업그레이드 되며 공식 명칭으로는 'HTML'
3> 웹브라우저 종류 : 인터넷 익스플로어, 크롬, 파이어폭스, 엣지 등
- HTML 문서 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>HTML이란?</h1>
<p>HTML 구조 알아보기</p>
</body>
</html>
<!DOCTYPE html> : HTML 언어로 작성된 웹 문서
<html> ~ </html> : 웹 문서 시작과 종료 표시 태그
- lang : 문서에서 사용하는 언어 지정
<head> ~ </head> : 웹 문서 해석 관련한 정보
- meta : 인코딩 관련 정보 (UTF-8은 한글을 표기해주기 위한 설정)
- title : 브라우저 탭 명칭 (문서 제목)
<body> ~ </body> : 웹 브라우저에 나타나는 실제 화면 내용 (텍스트, 이미지 등)
2. 태그 (Tag) : 웹문서에서 약속한 표기법
1> <hn> 태그
* 제목 표시 태그 : <hn> 제목 </hn>
크기순서 : h1> h2> h3> h4> h5 >h6
2> <p> ~ </p> 태그 : 앞뒤로 줄이 생기며 텍스트 단락 생성
3> <hr> 태그 : 하단에 수평 줄 표시
4> <ul>, <li> : 순서 없는(unordered) 목록
5> <ol>, <li> : 순서 있는(ordered) 목록
6> <span> ~ </span> : p태그 똑같이 텍스트를 주기 위해 사용가능하지만 텍스트 중에 일부 효과를 별도로 주기 위해 영역 설정
3. 이미지 참조, 하이퍼링크
1. <img> 태그 사용 : <img src = "이미지 경로" ~ alt = "대체 텍스트">
- JPG, JPEG, GIF, PNG 이미지 파일 형식
- src : 이미지 파일 경로 지정
- alt : 이미지 설명하거나 이미지 표시 안될 경우 대체로 표시해주는 텍스트
2. 하이퍼링크 : 사이트나 문서로 연결시켜주는 링크 기능
- <a>태그, href 속성 사용
<a href = "www.daum.net"> Daum 사이트 이동 </a> : 현재 화면에서 daum 사이트 바로 이동
<a href = "www.daum.net" target="_blank"> Daum 사이트 이동 </a> : 새 탭에서 daum 사이트 이동 (blank 기능)
4. 폼(Form)
- 웹페이지에서 보내는 정보 형태 (저장, 검색, 수정 기능 등)
- <form> ~ </form> 태그를 이용하여 폼을 사용
- form 태그 선언
type은 text 경우 일반적으로 화면에 노출되며, hidden은 노출되지 않는다.
-> 내부적으로 데이터 처리하고자 할때 hidden 사용
<form name = "test" method="get">
<input type = "text" title = "확인">
<input type = "hidden" title = "결과" value="success">
</form>
1> method : get방식, post방식
GET : 보안에 취약한 정보는 GET 방식 사용, 입력한 내용이 노출되며 길이 제한 O
POST : 보안이 중요한 정보는 POST 방식 사용, 입력한 내용 보이지 않고 길이 제한 X
2> <fieldset>~</fieldset> 태그 : 그룹으로 묶어주는 역할
3> <legend>~</legend> 태그 : 위에서 묶인 그룹의 명칭 선언
4> <input> 태그 : 일반적으로 다양한 형태의 데이터를 넣는 역할
name : 서버에 알려주는 구분값
size : 텍스트 필드 길이
value : 해당 필드에 지정하려는 값
<input type="hidden" name = "이름" value="서버로 넘기는 값">
<input type="text" name = "텍스트" value="서버로 넘기는 값">
<input type="password" name = "비밀번호">
<input type="url" 속성 = "http:// 사이트 주소">
<input type="email" 속성 = "email 주소">
<input type="tel" 속성 = "전화번호">
<input type="range" 속성 = "범위"> : 슬라이드 막대를 통해 숫자 입력
<input type="radio" name= "address" value = "abc">
: radio는 선택 중에 하나만 선택이라 동일한 name으로 지정, value는 각각 설정
<input type="checkbox" name= "address1" vlaue ="123" >
: checkbox는 동시 선택 가능하므로 name을 각각 다르게 준다.
<input type="text" id="id" placeholder ="id를 입력하세요"> : 입력란에 힌트 표시 (누르면 사라지는 희미한 글씨)
<input type="text" id="id" readonly> : 읽기만 가능, 입력은 불가
<input type="text" id="id" autofocus> : 먼저 초점이 잡히는 방식
<input type="text" id="id" required> : 값이 필수여서 없을 경우 기본 에러메시지 노출
* CSS 적용 우선순위 : 인라인 스타일 > id 스타일 > class 스타일 > tag 스타일 (인라인이 더 우선순위 높음)
-> 보통은 나중에 명시된 스타일 css가 위에 먼저 선언된 스타일을 덮어쓴다. 나중에꺼가 먹힌다.
'IT ▶ > Java & Web' 카테고리의 다른 글
| 홈페이지 직접 만들기 - (2) STS Web 프로젝트 생성 및 로컬에서 웹페이지 호출 (0) | 2021.02.11 |
|---|---|
| 홈페이지 직접 만들기 - (1) jdk 설치 및 이클립스 STS 설치 (0) | 2021.02.07 |
| Picked up JAVA_TOOL_OPTIONS 오류 해결방법 (0) | 2020.12.30 |
| CSS 개념 및 CSS 문법 (width, padding, margin) 사용방법 (0) | 2020.12.25 |
| HTML 숫자, input, table 문법 사용방법 <sub>,<input>,<tr>,<td> (0) | 2020.12.25 |