UI(User Interface) - JAVA - DB
HTML : 문서의 구조와 내용을 담당함
CSS : 문서의 스타일을 나타냄
퍼블리셔 = 프론트개발자 (문서를 제작, CSS를 기반으로)
자바스크립트 : 문서의 기능적 역할, 버튼역할 -> 어려움
jQuery : 라이브러리, 프레임워크나 언어가 아님
*많이쓰는 스크립트 프레임워크
Angular(Type Script), react(양이 많음), view
실행결과는 브라우저를 통해
JAVA EE
chrome - F12(디버깅창)
HTML : Markup Language
html4가 마지막
XML : 문법적으로 엄격함
xHTML : XML의 문법적 성격을 일부 가지고 있음.
plugin 기술이 대두됨(Active x)
-
HTML5 이후 : plugin기술을 없애자
-
Semantic Tag
|
HTML4에선 <div> 를 사용한 후 id나 class 속성을 부여하여 레이아웃을 구분했었는데, HTML5에선
- <header> : 헤더를 의미
- <nav> : 내비게이션을 의미
- <aside> : 사이드에 위치하는 공간을 의미
- <section> : 여러 중심 내용을 감싸는 공간을 의미
- <article> : 글자가 많이 들어가는 부분을 의미
- <footer> : 푸터를 의미
등과 같은 의미 있는 태그를 사용한다.
시맨틱 태그는 <div>와 같은 기능을 수행한다.
하지만 div처럼 단순 그룹핑으로만 사용되어서는 안된다.
[출처] 시맨틱 태그(Semantic tag)|작성자 두지 |
-
웹표준을 지킴 (HTML5가 너무 잘지켜서 W3C가 인수함)
*HTML 문서구조
-DOCTYPE html : html버전을 나타냄
-<head> : body내용 사전 setting, (메타테이블, css, javascript)
-<body>
*HTML 마크업 작성
<h2> 제목
<br> 줄바꿈
<strong> 문자강조
<mark> 문자강조
<h1>첫번째 예제</h1>
<h2>첫번째 예제</h2>
<h3>첫번째 예제</h3>
<h4>첫번째 예제</h4>
<h5>첫번째 예제</h5>
첫번째 예제
첫번째 예제
첫번째 예제
첫번째 예제첫번째 예제
문서를 구조적으로 표현하기 위해 head tag를 사용한다. -> 시맨틱 웹 구현 위해 ->브라우저(검색 엔진)가 알기 쉽게 하기 위해
HTML5 = <!DOCTYPE html>
요소노드, 속성노드, 텍스트노드
**head 요소 - 문서머리글(head), 제목(title), 메타데이터(meta) : 기계가 언제 무엇을 찾는지 지정해주기 위함
(시맨틱 웹 구성을 위함)
**body 요소
- id속성 : 문서 내에서 태그를 유일하게 식별,
- class속성 : 여러 태그에 공통적인 특성을 부여(다른 요소와의 식별을 위해)
**마크업 요소
블록요소 -> 한줄을 모두 차지 -> h1~6, div, p, ul, li, br
인라인요소 -> 자신의 컨텐츠 내용만 포함 -> span, a, img
<h1>문서의 요소</h1>
<h2>블록요소</h2>
<div>
자신의 컨텐츠 내용 밖의 한줄 전체를 차지하는 것
</div>
<div>h1~6,div,p,ul,li,br</div>
<h2>인라인요소</h2>
<span>자신의 컨텐츠 내용만 포함</span>
<span>span, a, img</span>
**ul tag (목록태그)
<ul>
<li>HTML</li>
<li style="list-style-type:circle;">JavaScript</li>
<li style="list-style-type:square;">CSS</li>
<li style="list-style-type:disc;">jQuery</li>
</ul>
*링크요소 - Anchor
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
li {
display: inline;
}
</style>
</head>
<h2>페이지 이동</h2>
<ul>
<li><a href = "http://www.naver.com>"target="_self">네이버</a></li>
<li><a href = "http://www.daum.net>"target="_blank">다음</a></li>
<li><a href = "index.html>">다른문서</a></li>
</ul>
<body>
<ul>
<li>HTML</li>
<li style="list-style-type:circle;">JavaScript</li>
<li style="list-style-type:square;">CSS</li>
<li style="list-style-type:disc;">jQuery</li>
</ul>
</body>
</html>
**HTML 테이블모델
-표를 표현하기 위해 테이블을 사용해야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a id = "top">상단부</a>
<h1>테이블 예제</h1>
<table width = "450" border = "1" cellspadding = "0" cellspacing="0">
<caption>2020 프로야구 순위</caption>
<thead>
<tr height = "50" align = "center">
<th>순위</th>
<th>팀명</th>
<th>승</th>
<th>패</th>
</tr>
</thead>
<tbody>
<tr height = "50" align = "center">
<td>1</td>
<td>NC</td>
<td>90</td>
<td>10</td>
</tr>
<tr height = "50" align = "center">
<td>2</td>
<td>키움</td>
<td>80</td>
<td>20</td>
</tr>
<tr height = "50" align = "center">
<td>3</td>
<td>LG</td>
<td>70</td>
<td>30</td>
</tr>
</tbody>
</table>
<a href = "#top">top</a>
</body>
</html>
**셀병합
<h1>테이블 예제</h1>
<table width = "450" border = "1" cellspadding = "0" cellspacing="0">
<caption>2020 프로야구 순위</caption>
<thead>
<tr height = "50" align = "center">
<th>순위</th>
<th>팀명</th>
<th>승</th>
<th>패</th>
</tr>
</thead>
<tbody>
<tr height = "50" align = "center">
<td rowspan = "2">1</td>
<td>NC</td>
<td>90</td>
<td>10</td>
</tr>
<tr height = "50" align = "center">
<td>키움</td>
<td>80</td>
<td>20</td>
</tr>
<tr height = "50" align = "center">
<td>3</td>
<td colspan = "3" >LG</td>
</tr>
</tbody>
</table>
**프레임 요소 - 개요
<iframe src = "basic html" width = "400" height ="400"></iframe>
**폼
<h1>폼예제</h1>
<form action = "서버의 주소" method = "get/post">
<fieldset>
<oi>
<li>
<label for = "sname">이름</label>
<input type = "text" name = "name" id="sname"
autofocus = "autofocus" placeholder = "ex)홍길동">
<!-- name은 서버에 전송해주는 것 , sname은 고유식별자-->
</li>
<li>
<label for = "sname">이메일</label>
<input type = "email" placeholder = "aa@aa.com"
required = "required">
</li>
<li>
<label>배송일자</label>
<input type ="date">
</li>
<li>
<label>색상</label>
<input type ="color">
</li>
<li>
<label>숫자</label>
<input type ="range" min="1" max="10" value="5">
</li>
<li>
<label>선택</label>
<select multiple = "multiple">
<option value = "BMW3">BMW3</option>
<option value = "BMW5">BMW5</option>
<option value = "BMW7">BMW7</option>
<!-- value값이 server에게 보내지는 값, 가운데값이 화면에 보여지는 값 -->
</select>
</li>
</oi>
</fieldset>
<fieldset>
<input type = "submit" value="전송">
</fieldset>
</form>
**폼미션
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>폼 미션</h1>
<caption>기본정보 입력</caption>
<table width = "450" border = "1" cellspadding = "0" cellspacing="0">
<tbody>
<tr height="50" align="center">
<td>이름</td>
<td align="left">
<form action = "서버의 주소" method = "get/post">
<input type = "text" name = "name"
autofocus = "autofocus" placeholder = "ex)홍길동">
</td>
</tr>
<tr height="50" align="center">
<td>아이디</td>
<td align="left">
<input type = "text" name = "id"
autofocus = "autofocus" >
<button type ="submit">중복확인</button>
</td>
</tr>
<tr height="50" align="center">
<td>비밀번호</td>
<td align="left">
<input type = "password" name = "password"
autofocus = "autofocus" >
</td>
</tr>
<tr height="50" align="center">
<td>비밀번호 확인</td>
<td align="left">
<input type = "password" name ="password"
autofocus = "autofocus" >
<!-- name은 서버에 전송해주는 것 , sname은 입력값-->
</td>
</tr>
<tr height="50" align="center">
<td>이메일</td>
<td align="left">
<input type = "email" name "EmailId"
required = "required">
@
<select name = "address" id="seladdress">
<option value = "선택하세요">선택하세요</option>
<option value = "daum.net">daum.net</option>
<option value = "naver.com">naver.com</option>
<option value = "gmail.com">gmail.com</option>
</select>
</td>
</tr>
<tr height="50" align="center">
<td>연락처</td>
<td align="left">
<input type = "text" name = "phoneNumber" size ="15" maxlength = "11"
autofocus = "autofocus" placeholder = "010-0000-0000" >
<!-- name은 서버에 전송해주는 것 , sname은 입력값-->
</td>
</tr>
<tr height="50" align="center">
<td>메일수신여부</td>
<td>
<input type="radio" name="receive" value="받음">받음
<input type="radio" name="notreceive" value="받지않음">받지않음
</td>
</tr>
<tr height="50" align="center">
<td>관심분야</td>
<td>
<input type="checkbox" name="JAVA" value="자바">자바
<input type="checkbox" name="C++" value="C++">C++
<input type="checkbox" name="PYTHON" value="파이썬">파이썬
<input type="checkbox" name="ANDROID" value="안드로이드">안드로이드
</td>
</tr>
</tbody>
</table>
<br>
<input type = "reset" value ="취소">
<input type = "submit" value ="저장">
</body>
</html>
**contents
<h2>이미지출력</h2>
<img src="../images/road1.jpg" alt="도로배경"> <!-- 상대경로 -->
<img src="/Web/images/road2.jpg" alt="도로배경"> <!-- 절대경로 -->
<br><br>
<h2>동영상 컨텐츠</h2>
<figure>
<figcaption>동영상</figcaption>
<video width = "640" height = "360" controls="controls">
<soruce src ="../Merry_Love.MP4" type="video/mp4">
</video>
</figure>
**sample1
<h2>이미지출력</h2>
<img src="../images/road1.jpg" alt="도로배경"> <!-- 상대경로 -->
<img src="/Web/images/road2.jpg" alt="도로배경"> <!-- 절대경로 -->
<br><br>
<h2>동영상 컨텐츠</h2>
<figure>
<figcaption>동영상</figcaption>
<video width = "640" height = "360" controls="controls">
<soruce src ="../Merry_Love.MP4" type="video/mp4">
</video>
</figure>
**sample2
<header>
<h1>제주 올레</h1>
</header>
<h2>제주 올레 7코스</h2>
<div>
외돌개를 출발하여 법환포구를 경유해 월평포구까지 어어진 해안올레.
올레인들이 가장 아끼고 자연생태길인'수봉로'를 만날 수 있다.
수봉로는 세 번째 코스 개척 시기인 2007년 12월, 올레지기인 '김수봉'님이 염소가 다니던 길에 직접 삽과 곡괭이만으로 계단과 길을 만들어서 사람이 걸어다닐 수 있도록 한 길이다.
</div>
<article>
<h2>패스포트 스탬프 확인 장소</h2>
<dl>
<dt>시작</dt>
<dd>외돌개 제주 올레 안내소</dd>
</dl>
<dl>
<dt>중간</dt>
<dd>강정 올레 쉼터</dd>
</dl>
<dl>
<dt>종점</dt>
<dd>월평 송이 슈퍼</dd>
</dl>
</article>
난이도 : 상 총 16.4km(4~5시간)</meter>
수봉로는 언덕길이고 일강정 바당올레에서 서건도 사이 바윗길이 험한 편이다.
<br>
<img src="../images/road1.jpg">
<img src="../images/road2.jpg">
<br>
<footer>
<div>
이 문서는 <time datatime = "2010-05-19">2010년 5월 19일</time>에 작성되었습니다
</div>
<address>funcom@gmail.com</address>
</footer>
**미션
웹트렌드
html역사
html 구성요소(doctype, head, body)
블록요소 -> h1~6, div, p, ul,li
인라인요소 ->span, a, img
목록태그(ul, ol, dl) => 네비게이션(메뉴)
table, form, link, img
상대경로/절대경로
시맨틱태그(header, nav, section, article, aside, footer)
<header>
<h2>HTML 8/24일 배운 것</h2>
</header>
<ul>
<li><section>
<h3>웹트렌드</h3>
<ol>
<li>웹의 애플리케이션화</li>
<li>시맨틱웹</li>
<li>표준화</li>
</ol>
</section></li>
<li><section>
<h3>html 역사</h3>
<img src = "../image.png">
</section></li>
<li><section>
<h3>html 구성요소</h3>
<ul>
<li>doctype</li>
<li>head</li>
<li>body</li>
</ul>
</section></li>
<li><section>
<h3>블록요소</h3>
<div>블록요소의 종류 : h1~6, div, p, ul,li</div>
</section></li>
<li><section>
<h3>인라인요소</h3>
<div>인라인요소의 종류 : span, a, img</div>
</section></li>
<li><section>
<h3>목록태그 => 네비게이션(메뉴)</h3>
<div>목록태그의 종류 : ul, ol, dl</div>
</section></li>
<li><section>
<h3>table, form, link, img</h3>
</section></li>
<li><section>
<h3>상대경로/절대경로</h3>
<dl>
<dt>상대경로
<dd><img src="../images/road1.jpg"></dd>
</dt>
<dt>절대경로
<dd><img src="/Web/images/road2.jpg"></dd>
</dt>
</dl>
</section></li>
<li><section>
<h3>시맨틱태그</h3>
<div>종류 : header, nav, section, article, aside, footer</div>
</section></li>
</ul>
<footer>
오늘의 후기 : 자리 바뀐 후로 처음 수업을 듣는데 여전히 화면이 안보이고 HTML/CSS를 처음 접하던 터라 생소했다. 그렇지만
문법과 사용방법을 익히면 뭐든 자바보다는 재밌는 것 같다. 프론트엔드가 백엔드보다 훨씬 재밌는 것 같다.
HTML/CSS > DB > JAVA
<a href = "https://www.evernote.com/l/AgWL4sAzOYpPDaVzudSHa-tJRSJEKWnQmuY/" target = "_blank">에버노트 <time datetime = "2020-08-24"></time>8.24 -웹2차시</a>
</footer>
'FULLSTACK > WEB' 카테고리의 다른 글
| JAVA SCRIPT 3차시 - 객체 (0) | 2020.11.13 |
|---|---|
| JAVA SCRIPT 2차시 - 함수, 객체 (0) | 2020.11.13 |
| CSS 2차시, JAVA SCRIPT 1차시 - position, 게시판완성 (0) | 2020.11.13 |
| CSS 1차시 (0) | 2020.11.13 |
| WEB 1차시 - 개념 (2) | 2020.11.13 |