1. <div>태그
- <div> 내용 </div>
- 영역을 구분하기 위한 태그
- 상단, 메뉴, 본문, 하단 등과 같이 웹페이지의 레이아웃에 대한 영역을 구분하기 위해 사용한다.
- 서로 중첩되어 사용할 수 있으며, 다른 태그를 포함할 수 있다.
- 고유한 id값을 부여하여 처리한다.(자바의 변수처럼 의미있는 id를 사용)
[코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- container : 사이트 전체 영역(정렬, 사이트 폭 설정 등의 용도) -->
<div id="container">
<!-- header : 사이트 상단 영역(로고, 메인메뉴 등) -->
<div id="header">
<h1>우리 사이트</h1>
</div>
</div>
<hr/>
<!-- content : 사이트 내용 영역(사이드바, 내용 등) -->
<div id="content">
<!-- sidebar : 왼쪽 사이드 바 영역 -->
<div id="sidebar">
<h2>메뉴 선택하기</h2>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</div>
<hr/>
<!-- main : 오른쪽 본문 영역 -->
<div id = "main">
<!-- 제목 -->
<h1>웹 접근성이란?</h1>
<!-- 소제목 -->
<h2>인터넷 공간 만들기</h2>
<!-- 본문 -->
<p>
월드 와이드 웹 컨소시엄..................
</p>
</div>
</div>
<hr/>
<!-- footer : 사이트 하단 영역(카피라이트, 주소 등) -->
<!--
<address> : 카피라이트, 주소, 연락처 등을 표시하는 태그. 문장을 강조하기 위해 사용
< <
> >
& &
© ⓒ
-->
<div id="footer">
<address>
copyright © codingbox
</address>
</div>
</body>
</html>
[출력결과]
▶ 코드 상으로는 div로 왼쪽 사이드와 오른쪽 메인 영역을 구분했지만, html로는 한계가 있어 css의 도움이 필요하다.
2. Sementic
- 의미론적 tag. 문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 한다.
- 사용 이유
- SEO(Search Engine Optimization)
검색을 최적화하기 위해서 제목, 부제목, ... 시멘틱 태그를 잘 활용하면 특정 키워드로 검색 했을 대 내가 만든 웹사이트가 검색창에 노출 될 수 있다. - 유지보수
단순히 div 태그로만 모든 구조를 짜는 것보다 한눈에 알아볼 수 있기 때문에, 유지보수가 더 편하다.
- Sementic Tag
- article : 본문
- aside : 광고와 같이 페이지의 내용과는 관계가 적은 내용들
- details : 기본적으로 표시되지 않은 정보들을 정의
- figure : 삽화나 다이어그램과 같은 부가적인 요소를 정의
- footer : 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
- header : 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
- main : 문서에서 가장 중심이 되는 컨텐츠를 정의
- mark : 참조나 하이라이트 표시를 필요로 하는 문자를 정의
- nav : 문서의 네비게이션 항목을 정의
- section : 문서의 구획들을 정의
- time : 시간을 정의
[코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header>
<h1>HTML</h1>
</header>
<nav>
<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
<li>리스트와 태그의 중첩</li>
</ol>
</nav>
<section>
<article>
<h2>선행학습</h2>
HTML 태그 사용법
</article>
<article>
<h2>선행학습2</h2>
HTML 태그 사용법2
</article>
</section>
<footer>
<ul>
<li><a href="about.html">회사소개</a></li>
<li><a href="private.html">개인정보 정책</a></li>
</ul>
</footer>
</body>
</html>
[출력결과]
3. 폰트
[코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<font size="8" color="red">Hello</font>
</body>
</html>
▶ size는 폰트 크기, color는 폰트 색
[출력결과]
4. 실습. 회원가입 부가정보 만들기
[코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action = "http://Locatlhosat/form1.jsp">
<h1>회원가입</h1>
<fieldset>
<legend>부가정보</legend>
<div>
<label>
이메일 : <input type="email" name="user_email" required>
</label>
</div>
<div>
<label>
홈페이지 : <input type="url" name="user_hompage">
</label>
</div>
<div>
<label>
나이 : <input type="number" name="user_age">
</label>
</div>
<div>
<label>
연락처 : <input type="tel" name="user_phone">
</label>
</div>
<div>
<label>
목표성취도(%) : <input type="range" name="point" min="0 max="100">
</label>
</div>
<div>
<label>
생년월일 : <input type="date" name="birthday" value= "2000-05-03">
</label>
</div>
<div>
<label>
출근시간 : <input type="time" name="worktime" value="09:00">
</label>
</div>
<input type="submit">
</fieldset>
</form>
</body>
</html>
▶ 이메일은 hgd@daum.net 의 형식을 맞춰야 한다. required로 필수입력하도록 지정해준다.
▶ 홈페이지는 http://hgd.com의 의 형식을 맞춰야 한다.
▶ number는 up/down 키가 생성된다.
▶ range는 min부터 max까지 이동할 수 있는 슬라이더 바가 생성된다. 기본적으로 숫자가 표시되지는 않는다.
▶ date는 날짜를 입력받는 칸을 생성한다.
▶ time은 시간을 입력받는 칸을 생성한다.
[출력결과]
728x90
'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글
| 220504 CSS 2 (0) | 2022.06.14 |
|---|---|
| 220503~04 CSS 1 (0) | 2022.06.13 |
| 220502 HTML2 (0) | 2022.05.27 |
| 220428 HTML1 (0) | 2022.05.24 |
| 220425 데이터베이스 INDEX (0) | 2022.05.04 |