2023/12/04🚀 Html , css 시작
❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤
⭐️ Web 수업 목록 : WEB 수업 List
web과 app의 차이
- 웹브라우저를 가지고 서버와 통신하는 작업이 web이고 app의 안드로이드나 ios기반의 운영소프트웨어를 가지고 동작하는 것이 app입니다
- 크롬을 사용하는 이유 : 개발자 모드가 잘 되어잇다.
진행방향
Web Architecture -> Front End -> Back End
WorkSpace (개발자가 작업하는 환경)
- 현재 서비스에서 운영중인 소스
- 현재 개발중인 소스
- 소스관리는 형상관리 = 버전관리
형상관리는 내가 현재 서비스에 운영되고있는 소스와 개발하고 있는 소스는 다르다
형상관리의 장점- 작업의 분업화가 가능
- 역추적 가능
- 히스토리 확인 가능
- tool : GitHub
Web
web은 Client와 WebServer로 나눠진다
Client의 request(요청)를 통해 WebServer는 response(응딥)한다
해당 구조일 경우 실시간 반영이 되지 않는 단점이 있다
만약 WebServer가 Client에게 실시간 response를 하려 할 경우 NodeJs를 사용한다
Web은 누구에게나 개방되어있는 특징이 있다
https 는 암호화시켜서 전달하는 프로토콜이다
http란 통신규약 , 통신을 위한 약속
웹 아키텍처의 흐름
예시 : 홈페이지에 접속하는 로직 설명
클라이언트가 해당 홈페이지를 클릭하며 서버에 요청한다
웹서버의 컨트롤러가 요청을 받아 클라이언트에게 응답을 한다
응답을 받은 클라이언트는 해당하는 뷰로 클라이언트 화면에 보여준다
View의 역할은 2가지 이다
- 클라이언트가 요청 하는 화면 역할
- 서버에 응답에 대한 결과물을 클라이언트에 보여주는 역할 (랜더링)
Git
Bin과 Src 차이
Src는 소스를 공유하기 위한 목적
Bin은 기계어로 되어있음
Bin 파일은 받지 않아도 되기 때문에 ignore(무시하다)로 보통 제어시킴
- repositories = project
- test하는건 workspace 에서 하는것이다
- 제출할때 commit하는 것임
인터프리터 언어(Interpreter Language) vs 컴파일 언어(Compiled Language)
인터프리터 언어(Interpreter Language)
바로 실행하는 언어
원시 프로그램을 즉시 실행하는 것
파이썬 , html , javaScript
컴파일 언어(Compiled Language)
목적 프로그램을 만든다
원시 프로그램을 목적 프로그램으로 만들고 목적 프로그램으로 실행한다
자바는 컴파일언어임 , bin에 코드가 위치해 있다
HTML
웹 개발 환경에서 클라이언트에게 서비스를 이용할 수 있는 화면을 제공하는 것 , 클라이언트가 서비스를 이용하거나 서버가 리스폰 해주는 해주는 값을 화면에 보여주게끔 렌더링 해주는 동작을 합니다
정적 문서입니다.
공부법
- 버전
우리는 지금 HTML 5 임 !DOCTYPE html 이 내용이 버전을 말하는것
- 태그
태그는 곧 명령어 이며 객체이다
태그는 시작과 끝이 있디
객체를 공부하는 방법 : 뭐하는 태그인가, 어떤 기능을 갖고있는가 , 어떤 메서드인가
태그는 부모와 자식, 자손, 형제의 관계를 가지고 있다
head : 문서의 정보를 저장한다
body : 화면에 보여주는 컨텐츠
주석 방법 < ! - - 내용 - - >
태그의 속성
title = 제목에 대한 속성
CSS
HTML 은 기본 컨셉이 흑백이다. 디자인 적인 요소를 가미할때 CSS로 한다
: style을 입힐 것에 대해 지정 해줘야한다
지정하는 것(태그) = 선택자
Tag 속성
span tag는 원하는 컨텐츠 영역만 차지한다 : Block 영역 , 블록으로 표현한다
p tag는 한 라인 전체를 차지한다 : inline 영역 , 인라인 으로 표현한다
inline-block : inline과 block 의 속성을 합친 것
ul : 목록태그
a herf : 하이퍼링크
점 한개는 현재 위치를 뜻하고 두개는 상위 디렉터리를 뜻한다
Today Task
주제 : 자유주제 조별과제 : 조가 2인이면 각 1명당 1개 이상의 페이지 조가 3인 이면 각 1명당 1개 이상의 페이지 기술stack 범위 : html, css 모든 기술 자유주제를 선정하고 세부 주제를 선정한다 세부주제를 각 조원별로 하나씩 개발한다. 마지막에는 index.html을 생성하여 목록태그를 활용하여 세부 주제로 이동할 수 있도록 한다. 제출방법 : 소스파일 제출 개발공부중인 개린이의 포스팅 입니다📝