kh day 049 ~ 051
49일차부터 UI구현, 프론트 파트를 들어갔다. 처음은 HTML과 CSS부터 시작했는데, 처음 자바 수업 들었던 생각도나고 나름 재미있었다. 아무래도 이제 3개월차에 들어간 상황이다보니 수업 내용이 너무 쉬운거 아닌가 싶기도 하지만 기초를 튼튼히 잡아야 탈이 없으니 만큼 수업 시간에 집중 잘 해야겠다. 백엔드보다 확실히 프론트가 뭔가 만드는 재미가 있기는 한것 같다. 당초 진로를 이 쪽으로 정했을 때 백엔드를 염두해두긴 했지만 프론트도 괜찮은 것 같기도...
---
UI 구현 요소기술
HTML5(version 5) + CSS3(level3) + ECMAScript(ES5) (Javascript)
HTML : 화면을 구성하는 요소들 이들 요소의 배치와 컨텐츠 구성
CSS : HTML5에 스타일 추가
ECMAScript : 동적으로 화면을 실시간 조작 + 비동기호출 (aJax)
백엔드 구현을 위한 환경설정으로 배울 것
1. Apache Maven
2. JDBC API
3. Servlet/JSP
4. MyBatis
5. Spring framework
6. 응용서버 => Oracle Cloud Compute 서버를 사용
ㄴ 운영체제 : Oracle Linux
VS Code 추가 설치
live server
open in browser
lorem picsum
image preview
html tag wrapper
rest client
HTML (HyperText Markup Language)
HyperText : 링크를 통해서 이동가능한 텍스트(문서)
Markup : <age> 23 </age>
웹 페이지는 HTML 문서이므로 메모장 등 편집기로 제작 가능
홈페이지는 하나 이상의 웹 페이지로 구성
HTML 문서 기본 구조
<!D0CTYPE html>
<html> </html>
<head> </head>
<meta>
<title> </title>
<body> </body>
<meta> 태그는 브라우저에 메타데이터를 제공
메타데이터 : 데이터의 데이터
태그는 크게 2가지 종류가 있다.
1. Block-level tag
: 하나의 태그가 뷰포트에 렌더링 될 때 온전히 하나의 행 영역을 다 차지하는 태그
2. Inline-level tag
: 시작/끝 태그 사이에 나온 컨텐츠를 표시할 수 있을 만큼의 공간을 차지하도록 렌더링 되는 태그
---
웹 페이지에서 테이블 제작 시 사용하는 태그
<table> 표에 넣고자 하는 내용
<tr> 하나의 행
<th> 테이블 각 열의 제목 “table header”
<td> 열 제목 나타내는 첫 번째 행의 셀 제외한 각각의 셀 표현
rowspan 행 합치는 데 사용
합치고자 하는 셀의 개수를 속성값으로 지정
colspan 열을 합치는 데 사용
텍스트 입력 창
사용자가 텍스트 입력하는 폼 양식
<form> 으로 폼 양식 삽입
<form>
아 이 디 : <input type='text'><br>
비밀번호 : <input type='password'>
</form>
라디오 버튼
원형의 선택 폼 양식
여러 항목 중 단 하나만 선택
<input type='radio' checked>
체크 박스
사각형의 선택 폼 양식
다수 항목 선택 가능
<input type='checkbox'>
파일 선택 창 만들기
<input>의 type 속성값을 ‘file’로 지정
<body>
<form action="" method="post">
1. search : <input type="search" name="keyword"><br>
2. tel: <input
type="tel"
name="tel"
pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
placeholder="000-0000-0000"><br>
3. url : <input type="url" name="url"> <br>
4. email : <input type="email" name="email"><br>
5. date : <input type="date" name="today"> <br>
6. month : <input type="month" name="month"><br>
6. week : <input type="week" name="week"> <br>
8. time : <input type="time" name="time"> <br>
9. datetime-local : <input type="datetime-local" name="datetime-local"><br>
10. number : <input type="number" name="age" min="0" max= "120"><br>
11. range : <input type="range" name="height"><br>
12. color : <input type="color" name="mycolor"> <br>
13. image : <input type="image"
src="https://picsum.photos/id/684/100/100"
name="myImage"><br>
14. textarea : <textarea name="lines" cols="30" rows="10"></textarea><br>
15. fieldset : <br>
<fieldset>
<legend>Sign In</legend>
id : <input type="text" name="id"> <br>
pw : <input type="password" name="passwore">
</fieldset>
16. datalist : <br>
My Browser : <input list = "browsers" name="mybrowser">
<datalist id="browser">
<option value="1">Safari</option>
<option value="2">Chorme</option>
<option value="3">Edge</option>
</datalist> <br>
17. progress : <progress max="100" value="75" name="currprog"></progress><br>
18. meter : <meter min="0" max="100" value="40" name="nowmeasure"></meter>
<p></p>
<input type="submit" value="Submit">
</form>
</body>
---
HTML5의 3가지 요소기술
(1) HTML : 문서의 구조와 컨텐츠를 구성
(2) CSS level3 : 문서의 스타일 작업 (디자인작업)
(3) Javascript (ECMAscript)
웹브라우저 안의 3개의 엔진
(1) HTML 태그처리 엔진
(2) CSS 스타일 엔진
(3) ECMAScript 엔진
색상을 지정하는 여러방법
(1) 색상의 이름 지정 (red, blue, green...)
(2) #16진수로 색생표현 (#RRGGBB, #RRGGBBAA -> AA : alpha 투명도)
(3) rgb(0, 255, 0) rgba(10, 255, 187, 0.5)
태그 선택자
태그의 영역 선택하고 이후에 오는 CSS 명령을 해당 영역에 적용
p
id 선택자
웹 페이지에서 유일무이한 단 하나의 특정 영역 지정하여 CSS 명령 적용
id명 앞에 샵(#) 붙여야
클래스 선택자
두 군데 이상의 특정 영역 지정하여 동일한 CSS 적용
클래스명 앞에 점(.) 붙여야
*
HTML5에 정의된 모든 태그 중에 약 99.99% 태그는 모두 박스 모델을 따른다.
나머지 0.001%의 태그들은 박스모델을 따르지 않는다.
이들은 시작 태그만 존재하고 끝 태그가 없어서 컨텐츠를 가지지 못하는 태그들임.
블록 요소(태그)이든 인라인 요소(태그)이든 박스모델을 따른다
99.99%의 태그들은 실제 "벽돌"이다 그래서 레이아웃이란 결국 내가 원하는 벽돌들을 쌓는 것이다.
border
예시의 청색 경계선 등 그리는 데 사용하는 속성
padding
경계선 내부 간격
예시의 콘텐츠 ‘웹이란?’과 경계선 사이의 간격
margin
경계선 외부 간격
경계선과 외부의 요소 사이의 간격
경계선 그리기
border
경계선 스타일
solid (실선)
double (이중실선)
dotted (점선)
dashed (줄 선)
경계선 두께
px 단위
경계선 색상
색상 이름 혹은 코드
padding
글자와 경계선 사이의 간격
width / height
박스의 너비 / 높이
'국비학원' 카테고리의 다른 글
| [국비지원] KH 정보교육원 55~56일차 (0) | 2022.06.17 |
|---|---|
| [국비지원] KH 정보교육원 52~54일차 (0) | 2022.06.15 |
| [국비지원] KH 정보교육원 48일차 (2/2) (0) | 2022.06.03 |
| [국비지원] KH 정보교육원 48일차 (1/2) (0) | 2022.06.02 |
| [국비지원] KH 정보교육원 47일차 (2/2) (0) | 2022.06.01 |
