열심히 끝까지
디바이스 융합 자바(Java) day28 - header,section,footer,div,id,class 본문
디바이스 융합 자바(Java) day28 - header,section,footer,div,id,class
노유림 2022. 7. 20. 14:55[오늘 수업]
시맨틱 태그
: 중요도, 보조도구, 이용순서를 고려해서 작업
시맨틱(마크 업) 태그
> 웹 접근성 잘 할 것
ex )
div
span
header
footer
작업을 할 때,
>> [공지사항] 존재
+ 더보기
1. 공지 7번
2. 공지 6번
3. 공지 5번
4. 공지 4번
5. 공지 3번
...
>> 요즘 공지부터 나열하는 것이 일반적
>> 최근 게시글이 위에 있도록 하는 것
타이틀 : 공지사항(태그)
+ 더보기 존재(더보기 버튼 누르면? 두개의 게시글이 보이게)(태그)
+ 최근 게시글이 상단에 존재(오더리스트)
<h1>공지사항</h1>
<h2>+더보기</h2>
<ol>
<li>공지 7번</li>
<li>공지 6번</li>
<li>공지 5번</li>
</ol>
>> 시맨틱 태그를 잘 지킨 것이 아니다!!
>> 공지사항 바로 다음에 h2를 위치시키면 스크린 리더가 읽을 적에
공지사항, 더보기 로 읽기 때문에.. 이용자는 잘 모르기 때문이다.
>>다음과 같이 배치해야 한다
<div>
<h1>공지사항</h1>
<ol>
<li>공지 7번</li>
<li>공지 6번</li>
<li>공지 5번</li>
</ol>
<h2>+더보기</h2>
<div>
<< css로 더보기 위치를 결정, 태그로 결정하는 것이 아니다!
<div> 블럭요소를 묶어주는 박스태그
<span> 인라인요소를 묶어주는 박스태그
>> h1 다음에 오는게 h2 오는게 맞는지 확인
>> 레벨(순위, 중요도)이 h2보다 낮아진다.
>> 고려하여 배치
if...
<h2>뉴스/기사</h2>
가 되면
<h3>+더보기</h3>
같은 디자인을 사용하면 ,로 이어서 진행
어떠한 요소의 상하좌우에 margin 매기기
header, section, footer{
border : 1px solid black;
margin : 5px;
}
과거에는 이렇게 처리
<header>
<!-- 각 블럭 -->
로고, 메뉴, 검색창,...
</header>
<section>
본문
</section>
<footer>
회사소개, 개인정보처리방침,..
</footer>
>> 요즘은 <div>로 일괄처리
header의 경우 <div id = "header">로 처리
ppt만들 때, A to Z
>> 각종 개발 분야에서 디자인, 건설 등 쪽에서 기존에 있던 걸
: 템플릿
>> PPT 템플릿 검색
: 무료 피피티 템플릿 다운 받아서 작업
★웹, 앱 어플리케이션 템플릿도 존재★
>> 무료 HTML 템플릿 사이트
> 강사님 추천
> https://html5up.net/
> https://startbootstrap.com/
원하는거 다운로드 > 바탕화면으로 다운로드(ZIP) > 압축해제 > INDEX 사용 > WEBAPP에 옮기기
> LISENCE에 상업용 관련 떠있음
>> 템플릿 받아서 옮겨놓기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼</title>
<style>
table{
width : 60%;
}
.c1{
background : lightgreen;
}
.c2{
background : lightyellow;
}
</style>
</head>
<body>
<!-- 사용자의 입력을 받아들이는 공간 -->
<!-- form action="사용자가 form 태그에 입력한 값들을 어떤 페이지로 전달할 지를 작성" -->
<!-- method에 =을 하면 get(default)과 post가 들어간다고 뜬다 -->
<!-- get : URL에 사용자의 요청정보를 오픈 -->
<!-- post : URL에 사용자의 정보를 공개하지 않는다 -->
<form action="NewFile5.html" method="post">
<br>
<br>
<h1 align = "center">** 회원가입 **</h1>
<br>
<br>
<table align = "center" height=300>
<colgroup>
<col class = "c1">
<col class = "c2">
</colgroup>
<thead>
<tr>
<th width =15% colspan="2">*는 꼭 해야하는 항목</th>
</tr>
</thead>
<tbody>
<tr>
<th align = "center">*아이디</th>
<td><input placeholder="아이디를 입력하세요." required pattern = "^[a-z0-9_-]{5,20}$" title="5~20자의 영문 소문자, 숫자, 특수기호(_),(-)만 사용 가능"></td>
</tr>
<!-- -->
<tr>
<th>*비밀번호</th>
<td><input type="password" placeholder="비밀번호를 입력하세요." required pattern="^[a-z0-9_-]{8,20}$" title="8~16자의 영문 소문자, 숫자, 특수기호(_),(-)만 사용 가능"></td>
</tr>
<tr>
<th>*이메일</th>
<td><input type="text" placeholder="주소를 입력하세요." required ="required">@
<select required pattern = "required" title="이메일을 선택해주세요.">
<option>이메일</option>
<option>naver.com</option>
<option>daum.net</option>
<option>google.com</option>
<option>nate.com</option>
</select></td>
</tr>
<tr>
<th>*전화번호</th>
<td><input type="tel" name="tel" required pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" title="###-####-####"><br></td>
</tr>
<tr>
<th>성별</th>
<td>남<input type="radio" name="gender" checked="checked" value="apple"> 여<input type="radio" name="gender" value="banana"><br></td>
</tr>
</tbody>
</table>
<table width=300 align = "center">
<tr>
<td width = 100% align = "center">
<input width = 100% type="submit" value="회원 등록">
<input type="reset" value="리셋">
</td>
</tr>
</table>
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
header, section, footer{
border : 1px solid black;
margin : 5px;
}
</style>
</head>
<body>
<header>
<!-- 각 블럭 -->
로고, 메뉴, 검색창,...
</header>
<section>
본문
</section>
<footer>
회사소개, 개인정보처리방침,..
</footer>
</body>
</html>