[국비지원] KH 정보교육원 52~54일차

 52일차에는 프론트의 HTML과 CSS를 가볍게 훑는 것으로 마무리 했다. 그 다음에는 Javascript를 들어가는 걸로 알고 있었는데, HTML과 CSS를 다른 교재로 좀 더 깊이 공부하는 방향으로 나갔다. 두번 학습하니 이해에는 도움이 되는 것 같지만 약간 시간 낭비 같기도 하다 ㅋㅋ 현재 HTML을 다 배웠는데, 강사님께서 w3school의 HTML 태그들을 한번씩 다 실습해보는 것을 추천해주셨다. 아무래도 직접 해보는 것과 그렇지 않는 것은 차이가 있을 수 밖에 없을 것 같다. 시간을 내서 HTML뿐만 아니라 다른 언어들도 다 섭렵을 해보는게 좋을 것 같다

 

---

1. 배경 색상 설정하기 

background-color: yellow;
태그 선택자 body로 전체 웹 페이지 선택
background-color 속성
yellow 속성값

<div id=‘button’> 자세히 보기 &gt; </div>
<div>
박스 형태 요소 만들기

#button
id=‘button’의 영역을 선택


2. 배경 이미지 삽입하기

background-image: url(‘img/bg.jpg’);
background-image 속성
배경 이미지 삽입에 사용
url 뒤 괄호 안에 경로 포함한 배경 이미지 파일 이름 입력

3. 배경 이미지 반복 설정하기
background-repeat: no-repeat;


---

1. 테이블 경계선 그리기 

border: solid 1px #000000;
태그 선택자 table, th, td
border 속성 이용하여 실선, 1픽셀 두께, 흑색 경계선 그림

border-collapse: collapse;
border-collapse 속성
collapse 속성값
테이블 경계선을 하나의 가는 실선으로 그림 - 생략할 경우 이중실선


2. 테이블 너비 지정과 텍스트 정렬하기

width: 80px;
width 속성, 80px 속성값으로 너비 80픽셀로 확장

text-align: center;
text-align 속성, center 속성값으로 테이블 셀 안 요소를 중앙정렬


3. 테이블 배경 색상 지정

background-color: #adf0f4;
셀의 배경 색상을 색상코드 #adf0f4 색상으로 지정

---

1. 레이아웃이란? 

레이아웃
웹 페이지에 박스, 텍스트, 이미지 등 HTML 요소 배치하는 것
수평 방향 레이아웃 / 인라인 (inline)
수직 방향 레이아웃 / 블록 (block)

인라인 요소
이미지, 텍스트 : 가로 방향으로 배치되는 HTML 요소
한줄을 가득 차지하지 않기 때문에 옆에 추가됨
<img>, <span> 태그 등


블록 요소
표시 박스 : 세로 방향으로 배치되는 HTML 요소
한줄을 가득 차지하기 때문에 밑에 추가됨
<p>, <div> 태그 등


2. display 속성

display 속성
기본 속성 무시하고 인라인과 블록 사용하기

<li> 태그
list-style-type: none;
목록의 글머리 기호 제거

#v_menu li / #h_menu li
후손 선택자 -선택자 아래 다시 선택자 설정

display: inline;
<li> 태그가 기본으로 가지는 블록을 인라인으로 변경


3. float 속성

float 속성
웹 페이지에 요소를 왼쪽 또는 오른쪽에 배치

float: left;
해당 요소를 왼쪽에 배치

float: right:
해당 요소를 오른쪽에 배치


4. clear 속성

clear: both;
앞의 float: left; 와 float: right; 에서 사용된 float 속성 해제

 

---

 

-- vs code 업데이트 하는법 --

vscode 업데이트

파워쉘 관리자 실행

스쿱 업데이트

스쿱 언인스톨 vscode

scoop install vscode

C:\app\scoop\apps\vscode\current\install-context.reg
C:\app\scoop\apps\vscode\current\install-associations.reg
레지스트리 2개 등록

윈도우 - scoop apps- vscode 여기서 실행

------------------------------------

웹의 특징
전 세계의 컴퓨터를 연결
HTTP(Hyper Text Transfer Protocol) 프로토콜 사용
HTML(Hyper Text Markup Language)로 작성된 문서 연결
텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공

반응형 웹 (Responsive Web) (CSS 미디어 쿼리)
웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 웹 환경


웹 표준
개발자 간 일종의 약속
누가 개발하든 정해진 규칙을 준수하면 모두 호환되어 편리하게 사용

W3C
웹에 관련된 기술과 웹 브라우저 사용을 위한 표준안 제정
웹 개발자나 사용자 간의 정보 공유 및 신기술 개발 등에 기여

html5test.com

마크업 언어
웹에서 사용되는 문서가 어떻게 구조화되는가를 나타내는 언어

마크업 언어 유형
구조적 마크업 : 문서의 구성 방식을 표현한 것
유형적 마크업 : 문서를 시각적으로 표현하는 방법
의미적 마크업 : 데이터 내용 자체에 관한 것

HTML5
W3C와 WHATWG의 두 단체가 협동하여 제안한 새로운 HTML 규격

HTML5의 특징
구조적 설계 지원 
그래픽 및 멀티미디어 기능 강화 
CSS3 지원 
자바스크립트 지원 
다양한 API 제공 
모바일 웹 지원

웹 브라우저
HTML 문서를 읽고 웹 페이지에 정보를 표시하는 소프트웨어
URL(Uniform Resource Locator)을 통해 접근

웹 브라우저 기능
웹 페이지 탐색
접속하는 프로그램의 주소 관리
웹 페이지의 저장, 인쇄, 소스 파일 보기
웹 페이지 보안에 관련된 각종 필터 도구 제공

웹 환경

 클라이언트   ↔    인터넷     ↔    웹 서버
(웹 브라우저)                            (아파치)


웹 서버
클라이언트의 요청에 따라서 서버에 있는 파일을 제공

웹 서버의 기능
리스너 기능 : 클라이언트로부터 접속이 있는지 항상 체크하고 대기
답변 기능 : 요청한 사항을 처리한 후 결과를 클라이언트에 보냄

프로토콜
네트워크에서 제공하는 일종의 데이터 전송 규약
웹 서버는 HTTP(Hyper Text Transfer Protocol)를 통해 클라이언트와 대화

포트
웹 서버에서 일종의 문
아파치 톰캣(Tomcat)의 경우 8080번 포트를 사용

포트 번호
0~65,535번 중에서 사용 가능
미리 예약된 포트 번호 : 0~1,023번
사용할 수 있는 포트 번호 : 1,024~65,535번

서버 프로그램
JSP(Java Server Page), ASP, PHP 등
특히 자바를 기반으로 한 웹 서버 프로그램인 JSP가 많이 사용됨

데이터베이스 접속 API
JDBC : 자바 기반의 웹 프로그램이 쉽고 빠르게 데이터베이스에 접속하여 데이터를 조회하거나 저장할 수 있도록 해줌
ODBC : 데이터베이스 관리 시스템(DBMS) 종류에 관계없이 어떤 응용 프로그램에서나 모두 접근하여 사용할 수 있도록 하기 위하여 마이크로소프트에서 개발한 표준 방법

사용자 정의 태그
1) 디스플레이 : 인라인
2) 유저 에이전트 스타일 시트가 없음
3) 인라인 요소이기 때문에 박스 모델을 따르기는 하지만
    컨텐츠 영역만 크기를 결정함

파일의 경로를 지정하는 방식 :

(1) 절대경로
     C:\a\b\c\temp\img\TTT.jpg

(2) 상대경로 : 특수문자 (. , ..)
    . -> 현재폴더 .. -> 부모폴더
   /temp/img/ttt.jpg
  <img src="img/ttt.jpg">

 

---

<img> 태그
웹 문서에 이미지 삽입 시 사용

<img> 태그 속성
src : 이미지 파일이 저장된 경로 지정
alt : 이미지를 웹 브라우저에서 표시하지 못했을 경우 표시되는 대체 텍스트 지정
width/height : 이미지의 가로, 세로 길이를 픽셀 단위로 지정(% 단위를 사용하면 웹 브라우저의 크기에 따라 이미지 크기가 조절되도록 지정할 수 있음)
style : 이미지의 스타일(크기, 위치 등)을 픽셀 단위로 지정
border : 이미지 경계선의 두께를 픽셀 단위로 지정


<audio> 태그
웹 페이지에 오디오 파일을 삽입하는 태그

<audio> 태그 속성
src : 재생할 오디오 파일이 저장된 경로 표시
controls : 재생 제어기 표시
loop : 반복 재생
autoplay : 웹 문서가 열림과 동시에 자동으로 재생
muted : 음소거 상태로 시작
preload : 오디오 파일 사용 여부와 상관없이 미리 다운로드함


<video> 태그 사용
비디오 파일을 웹 문서에 삽입할 때 사용
<source> 태그로 여러 가지의 비디오 파일을 동시에 제공

<video> 태그 속성
src : 재생할 비디오 파일이 저장된 경로 표시
controls : 재생 제어기 표시
width, height : 비디오의 가로/세로 크기 설정
loop : 반복 재생
autoplay : 웹 문서가 열림과 동시에 자동 재생
muted : 음소거 상태로 시작
preload : 비디오 파일을 사용 여부와 상관없이 미리 다운로드함
poster : 비디오 파일이 재생되기 전이나 다운로드되지 않고 있는 경우 표시될 이미지의 URL을 표시


폼 태그
웹 양식을 만드는 데 사용하는 태그

action : 사용자가 입력한 데이터를 받아 처리하기 위한 웹 프로그램(ASP, PHP, JSP… 등)의 페이지 지정
method : 웹 서버와 클라이언트 간의 통신 방법 지정(GET 방식, POST 방식)
type : 폼의 모양과 기능 결정
name : 폼의 이름 결정


GET 방식
URL 뒤에 파라미터를 붙여서 데이터를 전달하는 방식
사용자가 보내는 데이터는 이름과 값이 결합된 문자열 형태로 전달, 각 이름과 값의 쌍은 ‘&’ 기호로 구분
서버로 보낼 수 있는 최대 글자수는 2,048자
URL을 보면 어떤 데이터를 전송하고자 하는지 알 수 있기 때문에 보안에 취약

POST 방식
HTTP Request 헤더에 파라미터를 붙여서 데이터를 전송하는 방식
서버로 보낼 수 있는 글자수 제한 없음
GET 방식과 비교하여 보안상 우위에 있음

***넷캣***
파워쉘 관리자
nc -l -p 8080

끊을때는 ctrl+c

<form action="http://localhost:8080/">

***

*라디오, 체크박스는 name 값이 같아야한다

*입력 양식의 주요 속성

읽기 전용 속성 : readonly
텍스트 상자에 쓰기를 제한하고 오직 읽기만 가능하게 설정

비활성화 속성 : disabled
텍스트 상자를 비활성화 시킴

자동 완성 속성 : autocomplete
사용했던 데이터를 기준으로 입력 중인 텍스트에 자동 완성 기능을 적용할 수 있음

자동 포커스 속성 : autofocus
현재 페이지가 로드될 때 처음으로 입력하고자 하는 폼을 선택하는 속성

플레이스 홀더 속성 : placeholder
현재 폼에 입력해야 하는 텍스트를 희미하게 보여주는 속성

필수 입력 속성 : required
반드시 데이터가 입력되어야 하는 폼을 지정하는 속성

오타 체크 속성 : spellcheck
입력되는 문장의 오타를 실시간으로 점검

<div> 태그
웹 브라우저 전체 공간에 대해 분할
블록(block) 형식으로 분할

*ctrl+i -> 그루핑됨

<span> 태그 
웹 브라우저의 일부 영역만 분할
인라인(inline) 형식으로 분할