2023/12/04🚀 Html , css 시작

---

 

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ 

GitHub - gayulz/StudyHistory: 나의 공부 기록 commit

 

 

---

 

 

 

 

 

 

⭐️ Web 수업 목록 : WEB 수업 List

---

web과 app의 차이

1. 웹브라우저를 가지고 서버와 통신하는 작업이 web이고 app의 안드로이드나 ios기반의 운영소프트웨어를 가지고 동작하는 것이 app입니다
2. 크롬을 사용하는 이유 : 개발자 모드가 잘 되어잇다.

진행방향
Web Architecture -> Front End -> Back End

WorkSpace (개발자가 작업하는 환경)

1. 현재 서비스에서 운영중인 소스
2. 현재 개발중인 소스
3. 소스관리는 형상관리 = 버전관리
   형상관리는 내가 현재 서비스에 운영되고있는 소스와 개발하고 있는 소스는 다르다
   형상관리의 장점
   • 작업의 분업화가 가능
   • 역추적 가능
   • 히스토리 확인 가능
   • tool : GitHub

---

Web

web은 Client와 WebServer로 나눠진다
Client의 request(요청)를 통해 WebServer는 response(응딥)한다
해당 구조일 경우 실시간 반영이 되지 않는 단점이 있다
만약 WebServer가 Client에게 실시간 response를 하려 할 경우 NodeJs를 사용한다
Web은 누구에게나 개방되어있는 특징이 있다
https 는 암호화시켜서 전달하는 프로토콜이다
http란 통신규약 , 통신을 위한 약속

웹 아키텍처의 흐름
예시 : 홈페이지에 접속하는 로직 설명
클라이언트가 해당 홈페이지를 클릭하며 서버에 요청한다
웹서버의 컨트롤러가 요청을 받아 클라이언트에게 응답을 한다
응답을 받은 클라이언트는 해당하는 뷰로 클라이언트 화면에 보여준다

View의 역할은 2가지 이다

1. 클라이언트가 요청 하는 화면 역할
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을 생성하여  목록태그를 활용하여 세부 주제로 이동할 수 있도록 한다.  제출방법 : 소스파일 제출   

개발공부중인 개린이의 포스팅 입니다📝