2023/06/28
안녕하세요 오늘은 OT이후 첫 수업으로 xhtml과 웹 프로그래밍에 대한 수업을 수강하였습니다.
웹에 대한 지식은 배우긴 했으나,, 다 기억이 나지 않는 상황이여서 이 수업은 굉장히 마른 사막의 오아시스..? 같은 기분이었습니다. 단언하고 바로 배운 내용에 대한 내용 정리로 들어가 보겠습니다!!
웹프로그래밍은 프로그래밍 언어에 대한 해석을 브라우저가 진행하여 웹페이지를 띄울 수 있는 명령어들의 활용입니다.
따라서 기존에 제가 알던 python, c 와는 완전히 다른 형태를 띄고 있습니다.
너무 기본적인 내용부터 전부 올리기엔, 충분히 좋은 내용들이 많기 때문에
온전히 제 위주로! 올리도록 하겠습니다. 혹시나 보시는 분이 있다면 참고 해주세요
XHTML
고급 프로그래밍 언어 : 컴퓨터에게 일을 시키기 위해 사람이 알아볼 수 있는 명령어 집합
컴파일러 or 인터프리터 : 프로그래밍 언어를 컴퓨터가 알아볼 수 있게 해석해주는 플렛폼이나 프로그램
HTML, CSS, Javascript는 웹 브라우저가 번역해서 실행(edge, 크롬이 달랐음 -> 크롬이 유리해서 결국 같아짐)
IDE(통합 개발 환경) : 프로그래밍 언어로 소스코드를 작성하고 번역 및 빌드(실행할 수 있는 코드를 만드는 작업)등을 편리하게 해주는 소프트웨어
애플은 개발시 함수 이름이 보자마자 알 수 있게 작성함.
Ex add가 아니라 add integer with integer
<!doctype html>
<html>
<head>
문서에 대한 정보
</head>
<body>
화면에 보여지는 내용
</body>
</html>
- -태그는 순서대로 읽어서 번역한다.
- -style(css)은 코드를 전부 읽은 후 마지막에 읽어서 번역한다.
- -스크립트도 순서대로 읽어서 번역한 후 실행한다.
xhtml에서는 내용이 수정되면 웹브라이저에서 새로고침만 누르면 된다.
Charset과 encoding이라는 것을 절대로 잊으면 안된다. 글의 해석을 어떻게 하는지를 결정해 줘야 한다 -> UTF-8 그렇지 않으면 한글이 깨질 수도 있다.
-블록태그 -> 영역을 차지해서 주변에 아무것도 없다
-인라인 태그 -> 옆에 누가 있어도 됨.
-속성 : 태그안에 속성이름 = “값”의 형태로 작성해서 태그의 옵션을 설정하는 것.
모든 태그에 사용할 수 있는 태그가 있고 태그 별로 별도로 갖는 속성이 있음.
공통속성 :
- Id : 페이지 내에서 구분하기 위한 이름
- Class : 동일한 묶음을 만들기 위함
- Name: 서버에게 데이터를 전달할 때 사용하기 위한 이름
- Data : 태그안에 데이터를 포함시키고 싶을 때
Style sheet 와 script
- 스타일 시트는 위치와 상관이 없다.
물리적 태그/ 논리적 태그
- 둘다 브라우저가 해석하게됨
- 물리적은 눈에보이고, 논리적은 브라우저에 따라 적용이 보일 수 있다.
경로의 종류
: 상대경로, 절대경로
절대경로 : 불변의 경로 (웹의 url 등) <a href=https://www.~~~>네이버
C://drive/mydrive~~
상대경로 : 현재 위치에서의 경로
./ 앞의 기호를 생략하면 현재 위치
../ 은 상위 디렉토리로 이동하는 것임
크롤링 등으로 데이터를 수집할 때, a태그를 잘 찾아야함.
// -> http로 가든 https로 가든가
절대인지 상대경로인지 잘 파악해야한다.
이미지 파일을 업로드 하고싶을 경우에는, 높이와 넓이와 같은 구조를 꼭 설정해줘야 한다.
그래야 메모리에 이미지가 올라가고 그 이후에 있는 정보들이 브라우저에 잘 출력된다. 렌더링이 빨라진다.
쇼핑몰 등 결제가 필요한 부분에서는 위와 같은게 중요하다.
실행파일은 bin이라는 디렉토리에 존재함.
Mlops
- Ci, cd 등을 git hub을 사용함.
- Git 에서 현재 작업 디렉토리를 저장
- è 디렉토리로 프롬프트를 이동해서 git init 명령을 수행한다.
è .git 파일이 생성되고 이 파일이 생성되면 git이 소스 코드 버전 관리를 한다라는 의미.
Path 등록하는 것이 중요하다. 그래야 git 등의 명령어를 활용할 수 있다. 실행하는 명령어는 항상 bin에 있다는 점!
다운로드 받은 언어가 안된다면 환경변수로가서 시스템 환경변수에 git의 bin 폴더 주소를 입력해주면 명령어 작성이 가능해진다.
Git이 관리할 파일을 등록할 때
- git add 파일명 파일명 or
- git add. -> 현 디렉토리의 모든 내용을 관리
- commit : 현재 변경 내용을 반영 로컬 git에 반영
- commit -m”메시지” 에서 메시지 내용을 잘 작성해줘야 협업시 중요
- 변경 내역을 확인하는 것은 git log 이다.
Git push -> 코드를 올리는 것임.
github에서 repository만들 때 get ignore을 적용하면 그것들을 제외하고 업로드를 해줌.
로컬 내용을 github에 올려보는 작업
è Git remote add (repository이름)/origin https://github.com/svng-zu/basic.git
repository라면 각자의 브랜치에 올리고, 나중에 merge한다.
수정후 git hub에 올리기
Git commit -m”메시지”
Git push 이름 브랜치이름(브랜치 이름 수정하면 별도의 장소에 보관이 됨.)
Repository를 변경하고 싶다면, git remote add 명령을 다시 수행하면 된다.
다운로드 받는법
Git clone https://github.com/svng-zu/basic.git 폴더 이름
6.29.
웹클라이언트와 웹서버와의 소통으로 웹 서비스가 진행됨.
클라이언트에서 요청 데이터를 전송하면, 웹서버가 처리를 한다.
웹서버내에 repository/data store/DB/persistence store 등으로 불리는 데이터 저장소 내의 정보들을 어플리케이션 계층에서 그 데이터들을 처리한다.
컵퓨터내에 역할들이 구분되지 않으면, 활용도가 떨어지므로
데이터 서버, 어플리케이션 서버, 웹 서버로 나뉜다. -> 서버는 항상 서비스를 준비하고 있어야한다. + 주소가 고정이여야함.
집 컴퓨터는 ip를 나눠 받기 때문에 서버로 사용하기는 불가하기는 하나, port 포워딩을 사용한다면 ip를 고정적으로 받을 수 있어서 사용할 수도 있다.
결과적으로 유저 클라이언트에서 보낸 요청에 대한 응답을 웹서버에서 보내준다. -> 화면을 보내줌(HTML or 데이터)
www.~~~.com 과 같은 형태는 어떠한 html을 받기로하는 라우팅된 주소이다.
Localhost or 127.0.0.1 이라고 쓰는데, 로컬호스트는 밖을 나가지 않고, 루프백은 나갔다가 들어옴.
이 차이에서는 방화벽에서 나타난다. 로컬호스트는 방화벽에 관계가없고, 루프백은 방화벽에 영향을 받는다.
Firewall -> 들어오는 것을 검사 proxy -> 나가는 것을 검사
Ipconfig라 치면 ip를 볼 수 있음
캐싱의 개념
자주 사용할 것 같은 것은 컴퓨터에 저장해놓고 사용하려는 것.
5***** 이 port 번호이다.
데이터 서버에서 누구는 들어오고 누구는 못나갈지 방화벽과 프록시 작업도 해줘야한다.
이런 미디어를 재생할려면 그간 새로깔아야하는 프로그램이 있어야 동작하는 프로그램들이 많았는데, 요새는 기본으로 내장되었는 미디어로 재생할 수 있게끔 설계 되어있음.
* 숫자쓸 때 앞에 0이 있으면 에러 예외처리 *
Get은 입력사항을 외부노출 기능이 있지만 자동복구 기능도 있다.
Post는 입력사항을 노출시키지 않음. 자동복구 기능 없음.
입력 시 이상치 등을 조사해야한다.
이를 위해서 데이터가 나가고 들어올 때 검사해야 하며, 여러 결측치와 이상치들을 처리하는 것이 굉장히 어려운데 각각의 기준을 선정하는 것이 어렵기 때문이다.
Id를 써줘야 데이터에 대한 확인이 가능해진다. Id는 웹에서 알아보기 위해, name은 서버에서 알아보기 위해이다.
Name = gender id = 남/여 라고 생각.
웹클라이언트부터 데이터 서버 까지의 그림을 기억
Radio는 동구래미
영역 태그
– 다른 콘텐츠를 출력하기 위한 용도의 태그
<div></div> 블록태그 -> 주변영역은 블록태그만의 것
<span></span> :인라인 태그 -> 주변에 다른 것이 와도됨.
각 태그에 id를 만들어서 계속 돌려서 출력도 가능하다.
Frame : 이미 만들어진 html(보이는 것)을 가지고 출력,데이터는 명확하고 구조적이여야 하는데 html은 명확하지 않고 구조적이지 않기 때문에 데이터라고 할 수 없다.
HTML에서 스크랩해서 파싱을 해야 데이터 형태가 됨.
xml, json은 명확히 데이터다
CSS
1. 개요
웹 페이지의 디자인을 담당하는 언어(도구)
2. 중요한 내용
선택자{
속성: 값 ;
….
}
3. CSS를 적용하는 방법
1 외부에 스타일시트 파일을 만들고 HTML 문서에서 불러다 사용하는 것 -권장
2 HTML 문서 내에 style이라는 태그를 이용해서 사용하는 것
<style> <style> 안에 작성
3 태그 내에 style을 설정하는 것(inline) – 가장 비추천
4 중복되는 경우에는 마지막 or 가까이서 작성한 것이 우선권을 가짐.
설정 방법
1. 기본형식
Selector(선택자){
속성 : 값;
…
…
}
어떤 개체에게 적용할지를 결정.
값: 적용할 데이터로 문자열과 예약어를 구분하므로 “red”와 red는 다른 것. “”안에 있으면 문자열이지만, red 는 예약어(미리 기능을 정해준 명령어)
2) 규칙 : 속성과 값은 쌍으로 지정되어야 하며 콜른으로 구분
하나의 속성과 값만 존재하는 경우는 ;을 생략해도 되지만 여러 개의 속성과 값이 있는 경우는 반드시 ;으로 속성을 구분해야 합니다.
들여쓰기나 줄 바꿈은 기능에는 아무 영향을 주지 않음.
Selector(선택자)
- Html 문서 내에서 특정 개체나 그룹을 선택하기 위한 문법
- 웹 크롤링에서도 선택자를 종종 이용합니다.
- *은 모든 것을 나타냄
- 태그는 그대로 태그
- .클래스 이름
#id {~~
주석
/*내용*/ 형식으로 작성
링크
Link : 일반 링크
Visited : 방문한 링크
사용자동작
Hover : 마우스가 올라오면
Active : 클릭하면
Focus : 포커스가 오면 -input 에서만 가능
UI 요소
CSS내 상속
똑 같은 것을 쓸 때 inherit 이라고 쓰면 똑같이 적용이 됨.
단위에는 절대단위와 상대단위가 있다.
절대단위 : 고정된 크기 (인쇄, 모바일 페이지 등)
상대단위 : 화면 크기에 따라 변경되는 단위. 보통 스크린에는 상대단위 사용.
Typegraphy: 글자에 대한 속성
'LG 헬로비전 DX DATA SCHOOL > Web Programming' 카테고리의 다른 글
| React 애플리케이션 개발 (0) | 2023.07.31 |
|---|---|
| Django & React (0) | 2023.07.28 |
| JavaScript 기초 3 (0) | 2023.07.04 |
| JavaScript 기초 2 (0) | 2023.07.03 |
| JavaScript 기초 (0) | 2023.06.30 |
