o 웹 앱 3요소
1. 웹 표준: 다양한 플랫폼에서 문제 없이 구현되도록 하는 기법, 통일된 문법?
2. 웹 접근성: 누구나 정보접근에 편리
3. 웹 호환성: 환경이 달라도 동일한 서비스 제공되게
o 프론트단 프레임워크/라이브러리소스; bootstrap
o 자바스크립트(앞단을 좀 더 동적으로 만드는 것)를 보다 쉽게 쓸 수 있게 해 놓은 것 jpuery
o 하이퍼텍스트; 웹에서 사용되는 모든 문자, 이미지, 영상 등
(웹에서는 이미지 역시 텍스트로 봄)
o 마크업: 웹에 텍스트 배치
o 명령어
DB: 쿼리문
html: 태그
o html에서
<html> 태그(부모) 안에 있는 <head>, <body> (자식)
o html, css->인터프리터
o 웹에서의 프로토콜->서버가 있을 시
http://
https://
o html에서의 f12; 뷰
o "<!DOCTYPE html>"
: 표준화된 렌더링 위한 태그
<!-- 줄바꿈 <br> <br/> 둘다 사용가능, 닫기태그 존재x 여는태그만 사용해도 무관 -->
공백
< <
> >
& &
" "
' '
html로는 서식(글자크기 등) 많이 안건드는편이 좋음(지저분하기 때문)->css로
글자크기: <h1><h1/>~6
볼드<b>
밑줄<u>
기울임<i>
수평선<hr>
속성부여 ="" 또는 =''(오른쪽 값을 왼쪽에 부여하라)
예) <hr width = "50px">
*반응형 웹의 경우 퍼센트속성 많이 사용
색상표현
1. 이름
2. rgb함수
흑: rgb(0,0,0)~백: rgb(255,255,255)
3. 16진수
#000000~#FFFFFF
============================================================================================
o 이미지(.jpg, .png, .gif)추가
<img src="경로명+파일명"> 또는
<img src="경로명+파일명"/>
1) 상대경로(나를 기준으로 한 상향식) :
현재 문서가 저장된 폴더를 기준으로 경로 결정
예) /frontend/html
images/ 현재 폴더 안에서 하위폴더인 images를 찾기
./images/ 현재 폴더 안에서 하위폴더인 images를 찾기(위와동일)
../images/ 현재폴더의 상위폴더에서 images찾기
../../images/ 현재폴더의 상위폴더에의 상위폴더에서 images찾기
2) 절대경로(하향식)(서버가 있는 웹의 경우) : 서버의 도메인 주소를 통한 접근
= 웹프로젝트의 홈디렉토리(도메인주소)부터 시작
->경로가 틀리거나 파일이 없으면 엑박이 뜸
->width, height는 보여지는 크기를 조정하는 것(원본이미지 자체의 크기 조정X)
+이미지 표시 기준은 가로값이기 때문에 가로값만 입력하면 세로값 생략해도 가능(원본이미지의 비율대로 출력)
* 이미지 테두리선
border=""
+효과를 주고 싶지 않을 때는 ="0"으로(단위는 쓰지 않아야 함)
============================================================================================
o 오디오 출력
<audio>
<source src ="경로+파일명">
<audio/>
또는
<audio src="경로+파일명">
<audio controls> : 플레이어 출력
============================================================================================
o 동영상 출력
<video>
<source src="경로+파일명">
<vidio/>
또는
<vidio src="경로+파일명">
============================================================================================
<!--<iframe>같은 명령어(단, iframe만 외부자원 끌어오기가능)
<div>태그와 css로 프레임 모양 디자인 가능
<textarea>태그로 프레임 모양 디자인 가능
-->
o 프레임 추가
<iframe src="../images/angel.png" frameborder="3" width="300px" height="200px"
+다른 프레임과 연관하여 프로그래밍하는경우에는 부적절(보여주기용에 적절)
============================================================================================
<!--웹페이지 연결-->
<!--1) 다른페이지로 연결-->
<!-- <a href="경로명+파일명 or URL주소">(접속을 위해 클릭할)문자열</a> -->
<hr>
<hr>
<a href="04_색상.html">색상</a>
<a href="05_이미지.html">이미지</a>
<!--2) 같은 페이지 내에서 문서 연결 (북마크)
예) TOP버튼
<a href="#아이디명">버튼</a>
<h1 id="아이디명">서울</h1>
#붙은 링크인 버튼 클릭시 서울로 이동->#뒤의 대상을 찾아라
-->
<h1 id="아이디명">서울</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#아이디명">여기</a>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<!--3) 다른 페이지로 이동하면서 북마크한 곳으로 이동(위의 1번과 2번의 조합)-->
<!-- <a href=""경로명+파일명 or URL주소"#위치> 버튼 </a> -->
<!--단락구분-->
<!-- <p>~</p> -->
o 구조화 시 드러나는 들여쓰기, 머리기호 모두 제거하고 해야
============================================================================================
o 목록화
<!--웹페이지를 구조화할 때 주로 사용-->
<!-- 1) 순서가 없는 목록-->
<ul>
<li> 커피 </li>
<li> 녹차 </li>
<li> 우유 </li>
</ul>
<!-- 2) 순서가 있는 목록-->
<ol>
<li>coffee</li>
<li>greentea</li>
<li>milk</li>
</ol>
<!-- 3) 정의 목록-->
<dl>
<dt>coffee</dt>
<dd>latte</dd>
<dd>apogato</dd>
<dd>americano</dd>
<dt>milk</dt>
<dd>full cream</dd>
<dd>low fat</dd>
<dd>oat milk</dd>
<dt>juice</dt>
<dd>orange</dd>
<dd>strawberry</dd>
<dd>apple</dd>
</dl>
</body>
============================================================================================
o 표만들기
1. <!-- column 열, row 행, cell 한칸-->
<table border="1" width ="100" height ="200">
<tr> <!--줄 시작-->
<td>a</td> <!--셀글자 얇게, 좌측정렬-->
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<hr>
<table border="2" width ="200px" height = "100px">
<tr>
<th>a</th><!--셀글자 두껍게, 가운데정렬-->
<th>b</th>
<th>c</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</table>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
2. <!--셀 내부 정렬기준: 가로 align(왼,중,오), 세로 valign(상중하)-->
<table border="2" width="250" height="300">
<tr>
<td align="left">apple</td>
<td align="center">banana</td>
<td align="right">berry</td>
</tr>
<tr>
<td valign="top">apple</td>
<td valign="middle">banana</td>
<td valign="bottom">berry</td>
</tr>
</table>
<hr>
<table border="2" width="250" height="300">
<tr>
<td align="left" valign="top">apple</td>
<td align="center" valign="middle">banana</td>
<td align="right" valign="bottom">berry</td>
</tr>
<tr>
<td valign="top">apple</td>
<td valign="middle">banana</td>
<td valign="bottom">berry</td>
</tr>
</table>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
3.<!--표 내부에서 영역 구분(머리말thead, 본문tbody, 꼬리말tfoot 등)-->
<table border="1">
<thead>
<tr>
<th>month</th>
<th>charge</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2000</td>
</tr>
<tr>
<td>2</td>
<td>4000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>sum</td>
<td>6000</td>
</tr>
</tfoot>
</table>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
4. <!--셀 합치기: 가로 colspan(오른쪽셀 합치기), 세로 rowspan(아래셀 합치기)-->
<!--항상 표는 가로줄기준으로 보아야-->
<table border="1" width="150">
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<tr>
<td colspan="2">11</td>
<td>22</td>
</tr>
<tr>
<td>AA</td>
<td rowspan="2">BB</td>
<td>CC</td>
</tr>
<tr>
<td>가가</td>
<td>나나</td>
</tr>
</table>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
5. <!--표 내부에서 표 작성-->
<table border="2">
<tr>
<td>
<table border="1">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
</td><!--cell(1,1)table end-->
<td>b</td><!--cell(1,2)-->
<td>c</td><!--cell(1,3)-->
</tr>
<tr>
<td>ㄱ</td><!--cell(2,1)-->
<td>ㄴ</td><!--cell(2,2)-->
<td>ㄷ</td><!--cell(2,3)-->
</tr>
<tr>
<td>A</td><!--cell(3,1)-->
<td>B</td><!--cell(3,2)-->
<td>C</td><!--cell(3,3)-->
</tr>
</table>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
