Notice

Recent Posts

Recent Comments

Link

« 2025/12 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

당니의 개발자 스토리

12/24 화 본문

LG CNS/필기노트

12/24 화

clainy 2024. 12. 24. 12:25

강사: 박창렴

myanjini@gmail.com

010-2982-7033

데이콤에서 일했었음

https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb

Front-end Development Tutorial

poiemaweb.com

참고하면 좋은 사이트

1교시

AM 기존 어플리케이션 환경을 현대화한다.

최근에 나오고 있는 여러가지 개발 트렌드나 아키텍처 등을 반영해서 현대화하는 과정이다.

클라우드 네이티브는

클라우드 환경에 최적화 되어서 수행될 수 있는 어플리케이션을 개발하는 것을 말한다.

gpt

[좀 더 쉽게 설명하면, 클라우드는 인터넷을 통해 컴퓨터 자원을 빌려서 쓰는 방식이고, 네이티브는 원래 태어난 환경을 의미해요. 그래서 클라우드 네이티브는 애플리케이션이 클라우드 환경에서 원활하게 실행되도록 설계된 방식이라고 할 수 있어요.

여기서 중요한 특징은:

유연성: 애플리케이션이 쉽게 확장되고, 여러 서버에 분산될 수 있어요.
빠른 배포: 새로운 기능을 빠르게 추가하거나 수정할 수 있어요.
자동화: 시스템 관리가 자동화되어 수동으로 해야 할 일이 적어요.

예를 들어, 클라우드 네이티브 앱은 큰 트래픽을 처리하기 위해 자동으로 더 많은 서버를 추가하거나, 문제가 생기면 자동으로 복구하는 방식으로 동작해요.

]

기존의 얘기를 해보겠음

회사 인프라가 구성되어 있는데 인프라는 일반적으로 하드웨어를 말함

인프라는 전산실 안에다가 rack이 서버 장비를 올려서 안정적으로 동작하도록 관리하는 형태를 가짐

비용절감을 위해 외부의 곳에다가 위탁시킴

최근에는 이것을 네트워크 어딘가에 있는 IT 자산들을 빌려쓰는 개념으로 바뀌고 있음

이 빌려쓰는 인프라를 클라우드 인프라라고 함.

내가 직접 구성하고 관리하는 온프레미스(On-premises) 환경이 외부에 위탁하고 빌려쓰는 클라우드 환경으로 바뀐다

[온프레미스(On-premises)는 자신이 직접 관리하는 물리적인 서버 환경을 의미해요. 즉, 전산실이나 자신의 건물 안에 설치된 서버를 말하죠.]

원하는 시점에 원하는 양만큼 요청해서 제공받고, 그 제공받은 만큼의 비용을 지불

= 클라우드, 비용 효율적

클라우드를 구성

- 인터넷 : 네트워크 퍼블릭 인프라, 전세계 어디에서든지 인터넷을 이용하면 클라우드 it 자산을 빌려쓸 수 있다

- 가상화 : 클라우드를 구성하는 핵심 기술. 가상화는 하드웨어를 소프트웨어로 표현한다. 하드웨어가 소프트웨어화 되는 것. 이 소프트웨어로 표현된다는 건 파일로 관리된다는 것. 하드웨어가 파일 형태로 만들어져서 특정 프로그램을 통해서 그 기능들을 수행하도록 해줌.

파일 관리의 장점

- 쉽게 복사, 이동 가능

- 내용을 inspection 할수있음.

- 파일은 버전관리가 가능. 롤백 할수있고 이전버전으로 옮길수 있음

그런 장점을 극대화 시킨게 IaC (인프라스트럭쳐 코드)

어플리케이션 현대화한다는 개념에는 자동화라는 개념이 함께 들어감

엄청나게 많은 기술 요소들이 축약, 집약되고 빈번하게 바껴야되는데 사람이 하면 느려지고 실수발생 가능성 높음

그래서 자동화 기술이 중요한데 걸림돌이 됐던게 인프라였음 하드웨어 개념의 인프라들은 지가 자동으로 구성

파일 단위로 관리가 된다는건 프로그래밍 방식으로 하드웨어를 구성하고 제어할 수 잇다. 그래서 하드웨어의 어떤게 필요해 라고 하면 그때 딱 프로그래밍으로 주는거임

그게 IaC. IaC가 나오면서 인프라도 자동으로 구성되는 것.

["인프라가 걸려있다"는 말은 보통 서버나 네트워크 같은 IT 자원을 직접 구축하고 관리하는 일이 필요하다는 뜻이에요. 예를 들어, 서버를 하나 만들 때, 실제로 하드웨어를 구입해서 설치하고, 운영체제를 설치하는 등의 과정이 필요하죠. 이건 시간도 오래 걸리고, 번거롭기도 해요.

그런데 **IaC(인프라 코드화)**라는 개념이 등장하면서, 인프라를 코드로 관리할 수 있게 되었어요. 즉, 서버나 네트워크 자원을 물리적으로 하나하나 설정하는 대신, 코드로 "이런 서버가 필요하다", "이런 네트워크 구성이 필요하다"라고 작성하면, 시스템이 자동으로 그 자원을 만들어주는 방식이죠.

IaC 가 가능한 이유는 가상화(virtualization) 덕분이에요. 가상화는 물리적인 서버 한 대를 여러 대처럼 쪼갤 수 있게 해주는 기술이에요. 가상화 덕분에 실제로 서버를 설치하지 않고도, 가상 서버를 코드로 만들고 관리할 수 있게 된 거죠. 즉, 우리가 원하는 대로 서버를 "생성"하거나 "삭제"할 수 있는 환경이 되어, IaC가 더 쉽게 구현될 수 있게 된 거예요.

간단히 말하면, IaC는 가상화 기술을 이용해서 물리적인 서버를 직접 다루지 않고, 코드만으로도 서버와 네트워크를 자동으로 구성할 수 있게 해주는 기술이라고 할 수 있습니다.

]

클라우드로 가고 있다는 거임. 인터넷이랑 가상화가 구성요서니깐

어플리케이션을 현대화한다는 것에서 인프라의 변화는 클라우드로 가고있다

소프트웨어는 과거에는 단위 모듈들이 잘 돌아도 통합해서 통쨰로 빌드하면 꼭 에러가 낫음

빈번한 배포가 어려웠음

그래서 이거를 독립적인 서비스 단위로 나눠서 개별 서비스들을 나누고

연계해서 가져가는 형태로 바뀜

이걸 MSA라고 함 마이크로 서비스 아키텍처

전체 서비스를 하나의 덩어리로 간주하는 모놀리식 아키텍처에서 개별 서비스를

독립된 서비스로 분화해서 서비스들끼리 연계하는 방식을 MSA인데 이걸로 바뀌게 됨

MSA의 장점

- 쉽게 수정과 반영 가능. 독립된 서비스니까 크기가 확실히 작아지니까

내가 블로그를 바꿨는데 영화가 바뀌는 이런 사고가 생길수도 있음. 이렇게 되면 변화를 소극적으로 수용 하게 됨

고객의 요구사항을 적극적으로 받아들이니까 비즈니스 효용이 향상

- 하나의 덩어리를 크게 가져 갔을 때는 단일한 language 나 데이터베이스 나 프레임워크 등의 종속 되어 있었는데

MSAA는 독립 되어 있기 때문에 이거는 java 베이스로 가고 이거는 파이썬 베이스로 가고 이거는 db 오라클 쓰고 이거는 mysql 쓰고 각각 서비스 별로 조직에 맞는 개발 도구나 환경을 채택 하는 겁니다.

MS A를 뒷바침 하기 위해서 여러 가지 방법론이 나옴

대표적인 방법론이 Agile

고객의 요구사항들을 적극적으로 수용 하는 게 애자일이다. 그래서 고객도 만족하고 개발자도 발전이 방법론이다.

쉽게 deploy되기 위해서는 실행 환경 하고 소스코드 즉 어플리케이션이 결합된 형태가 되어 있어야 돼요. 그러니까 내가 프로그램을 만들었는데, 이 프로그램이 동작 하기 위해서 필요로 하는 프로그램들이 있다는 거예요.

그게 하나도 결합 되어서 배포 되어야 쉽게 배포 될 수 있어요

잡아라는 언어는 내가 어디에서든 실행 해도 실행 된다. 라고 얘기가 있는데 실제적으로는 내가 만든 잡아 프로그램이 다른 데서 안 오는 경우도 있다고 합니다. 그걸 우리가 흔히 말하는 환경에 영향을 받는다고 해요. 대표적인 게 XML 파서 가 있거든요.

XML 문서를 해석 하는 해석기가 있는데, 그것이 동작 하는 버전과 서버에 따라서 될 때도 있고 안될 때도 있어요

J D K의 버전에 따라서 종류에 따라서 조금씩 차이가 납니다

어디에 머신에서든 동작 하면 좋은데 실행 되지 않을 수도 있다는 거예요. 이것을 극복하기 위해서는 내가 실행에 필요로 하는 것과 나의 소스코드가 같이 묶여서 배포 되면 되겠죠

이것을 지원해 주는 게 가상화라는 것과 컨테이너 하는 기술 입니다

가상화의 단점이 있는데 가상 머신이 있는데 머신 동작 하기 위해서 하드웨어 제어 하기 위한 운영체제가 필요해요. 그래서 모든 머신은 운영체제라는 것이 들어가기 때문에 20 메가의 프로그램을 돌리기 위해서 600 메가 짜리의 운영체제 가 있어야 되기 때문에 리소스 낭비가 심합니다.

그래서 이 운영체제 부분을 어떻게 없앨 수 없을까 해서 나오는 게 컨테이너임 기술이에요'

계속 경리를 해서 프로그램 각 각마다 호스텔 리소스를 격 리 해서 충돌 없이 쓰도록 하는 겁니다

그래서 deploy를 용이하게 하기 위해서는 컨테이너 기술이 필요합니다. 또 자동화 하는 기술도 필요합니다. 우리가 AI 가게 개발을 해서 이 MS A 독립적인 서비스를 수시로 수정 하는데 수정하면 그게 반영이 되어야 하잖아요. 그걸 효율적으로 하기 위해서 자동화가 필요한 겁니다. 이 자동화를 있어 보이게 얘기할 때. CI/CD 라고 얘기합니다 지속적으로 변경된 내용을 가지고 오고 그래서 자동으로 반영해 주는 거예요

자동화 하려 보니까 품질에 대한 의구심이 들어요. 이게 진짜 제대로 동작 하는지 원하는 요구사항이 들어간 건지 확인을 해야 돼서. TDD라는 게 나옵니다.

계속 우리가 개발 할 때 테스트 코드를 먼저 만들고 그것을 만족하는 실행 코드를 만들면 확실하게 잘 되지 않을까 라고 하는 마음에서 나온 겁니다

그래서 우리가 소프트웨어를 개발 할 때는 가급적이면 작은 서비스 에다 위로 만들어서 그 만든 걸 가지고 우리가 100%를 용이하게 하기 위해서 컨테이너 기술로 컨테이너화 하고 그것을 자동화 된 프로세스를 통해서 구축해놓은 클라우드 환경에 배포 하자는 겁니다

그래서 이게 클라우드 네이티브에 핵심 기술 요소가 MSAA 와, 컨테이너 그리고 ci/cd 합니다. 그래서 이렇게 구성 되는 걸 만드는 과정을 애플리케이션 현대화 라고고 합니다.

그걸 AM이라고 하죠

2교시

MPA는 **"여러 페이지로 구성된 웹사이트"**라고 생각하시면 돼요. 예를 들어, 네이버나 다음 같은 웹사이트를 떠올려 보세요. 뉴스나 블로그, 쇼핑몰 같은 카테고리를 클릭할 때마다 새로운 페이지가 열리잖아요? 이게 바로 MPA예요.

어떻게 동작하나요? 사용자가 페이지를 클릭하면, 서버에서 새로운 페이지를 받아와서 그 페이지를 새로 로드해요. 즉, 페이지가 바뀔 때마다 다시 새로 로딩되는 거죠.

SPA는 **"하나의 페이지에서 모든 게 바뀌는 웹사이트"**예요. 예를 들어, 페이스북이나 인스타그램 같은 사이트를 생각해 보세요. 한 번 페이지가 열리면 그 뒤로는 계속 그 페이지 안에서 내용이 바뀌죠. 페이지가 새로 로드되는 게 아니라, 화면만 계속 바뀌는 거예요.

어떻게 동작하나요? 처음에 한 번 페이지가 로드되면, 그 이후에는 서버에서 필요한 데이터만 받아와서 화면을 동적으로 바꿔요. 예를 들어, 페이스북에서 피드를 내리면 그때그때 새로운 게시물이 로딩되는 방식이에요.

얘기해 보면 이 싱글 페이지 애플리케이션을 쉽게 구현 할 수 있도록 도와준다. 사용자 ui를 쉽게 구현 할 수 있는 자바스크립트 라이브러리 환경 그리고 서버에 데이터를 주고 받는 부분은 ajax 라는 통신 방식을 통해서 요청 하게 되고 이때 왔다갔다하는 데이터 형식은 json 이라는 개체를 표현 하는 방식을 통해서 왔다갔다 한다. 이제 나오는 백엔 서버는. REST API 라고 한다

REST는 http가 제공하는 기능들을 이용해서 서비스를 만드는 걸 말하고 http는 기본적으로 프로토콜이다

인터넷이라는 네트워크 환경에서 개별 서버들이 가지고 있는 리소스를 쉽게 공유할 수 있도록 만들어진 프로토콜이 http이고 그 위에서 데이터를 데이터를 표현 하는 방식이 http 고 그러한 HTTP랑 HTML을 공유하는 인터넷 플랫폼을 web이라고함

일반적으로 이 두은 공유예요. 각자가 가지고 있는 네트워크에 붙어 있는 자원들을 쉽게 교환하고 활용할 수 있도록 하기 위한 방안으로 만들어진 거죠. 그걸 극대화 시켜서 만들어진 서비스가. REST예요

거기에서 제공하고 있는 url 이라는 주소 표현 방식을 통해서 내가 가지고 있는 자들을 표현 하자 그리고 HTTP의 요청에 있는 메소드

GET, POST, PUT, DELETE와 같은 HTTP 메소드를 사용하여 클라이언트가 서버에 요청을 보내고, 원하는 자원에 대한 작업을 수행하는 방식은 RESTful API에서 사용됩니다.

이것들이 마치 함수처럼 동작 하기 때문에 이런 함수들을 보고 api라고 하는 겁니다. 그래서 백엔드는 마치 함수처럼 된다.

그래서 정리하면 애플리케이션을 현대화 하면 프론트에서는 사용자가 UI의 제공하는 쪽은 리 액트와 같은 라이브러리를 통해서 싱글 페이지 애플리케이션 더 발달 하게 되는 거고 빼는 rest API 형태의 서버들로 구성이 되는 겁니다. 이 레스트 API의 서버들은 컨테이너화 돼서 쉽게 다 줄어들었다 할 수 있는 것입니다. 이때 사용하는 데이터 표현 방식과 통신 기술은 Json과 ajax 입니다

그래서 우리가 배울 프론트엔드 부분에서는 리액트를 배울 겁니다

리액트 쓸려면 잘 알아야 되는 게 Es6이비다.

ECMA의 약자이다.

내가 도커 이미지를 push 해서 레파지토리에 올리면은 내가 다른 머신에서 도커 이미지 pullㅙ서 가지고 와서 컨테이너에 넣어야 되는데 이렇게 하려면 사용자가 아까 그 머신에서 붙어서 작업하고 pull한 머신에서도 작업하고 머신마다 붙어서 작업 해야 되는 거죠.

그래서 이게 힘드니까 분산 되어 있는 서버들을 하나로 묶어 주는 하나의 가상 된 머신 전원 묶어 주는 겁니다. 이걸 우리가 Clustering 한다고 합니다. 로스터를 구성 한다. 라고 하는 거죠. 마치 하나의 서버처럼 보게 되는 것이고 그래서 관리자 개발자는 개별 호스트에 붙는 게 아니고 호스텔 중에서 대표 되는 놈에게 붙어서 명령어를 주는 겁니다.

각각 이 클러스터에 있는 호스트에 사용할 리소스를 보고 클러스터 내에 있는 호스트, 즉 노드들을 모니터링 하고 그 노드들에게 적절하게 리소스를 배분에서 실행 하는 이런 것들을 오케스트레이션 이라고 합니다. 그 오케스트레이션 하는 도구의 대표적인 게. k8S(쿠버네티스)입니다.

분산 된 노드들 하나로 클래스팅 클러스터링 하고 그 클러스터링 한 공간들의 내가 필요로 하는 컨테이너 자원들을 생성 하고 관리하고 모니터링 하는 거 그것을 오케스트레이션 이라고 얘기하고 그거에 대표적인 도구가 쿠퍼네티스 라고 하는 겁니다.

gpt [

클라우드는 '인터넷을 통해 빌려서 쓰는 컴퓨터'**라고 생각하면 돼요. 예를 들어, 집에 큰 컴퓨터나 서버를 두지 않아도, 클라우드를 통해 필요한 만큼 자원을 빌려서 사용할 수 있다는 점이 클라우드의 장점입니다.

이렇게 클라우드를 사용하면 비용도 절감되고, 필요한 자원을 빠르게 조정할 수 있어서 매우 편리해요,.

MSA(Microservices Architecture)는 마이크로서비스 아키텍처라고도 불리며, 복잡한 소프트웨어 시스템을 작고 독립적인 서비스들로 나누어 개발하는 방법입니다. 쉽게 말해서, 큰 시스템을 여러 개의 작은 서비스로 쪼개서 각 서비스가 독립적으로 동작하도록 하는 방식이에요.

]

3교시

이름(10)나이(2)성별(4)이메일(20)주소(20)

홍길동____20남자hong@test.com_______고길동____40남자go@test.com_________

예전에는 데이터를 이렇게 표현했음 엄청 빨리 처리할수있었음 단점이 길이가 한정되어있다는 것

홍길동,20,남자,hong@test.com,주소

고길동,140,남자,go@test.com,주소

-> 구분자를 통해서 기호를 통해서 데이터를 구분하자

다른 시스템에다가 전달 하고 싶을 때 각각에 데이터가 어떤 의미인지를 다른 시스템이 모르는 거죠. 그래서 나온 게 일정한 기호를 통해서 그 데이터가 어떻게 구성 되어 있는지를 알 수 있도록 만드는 거예요.

의미가 있는 기호를 통해서 데이터를 감싸서 표현하는 방법을 마크업 이라고 합니다. 마크의 대표적인 게 우리가 쓰고 있는. html

HTML 보다 조금 더 확정된 개념이 XML이다. 이거보다 더상위 개념은 SGML이라는것도 있어요

소위 다른 기계들끼리 데이터를 자유롭게 쉽게 해석 할 수 있도록 만든 것이다. 데이터를 공유 하기 위한 게 마크업 랭귀지 이다.

HTML은 사람을 위한 게 아니에요. 기계를 위한 겁니다. 그래서 사람이 이해 하기는 어려워요. 기계들이 새로운 쉽게 데이터를 주고 받기 위한 거 입니다. 데이터를 표현하는 방식이고 이 데이터 표현식은 사람을 위한 게 아니라 기계를 위한 겁니다. 기계들끼리 서로 데이터를 쉽게 주고 받기 위한 표현 방식 입니다.

여기서 가독성을 높여서 사람들이 쉽게 이해할 수 있게 한 것이 CSS 입니다. 그래서 HTML은 기계를 위한 거 CSS는 사람을 위한 겁니다.

[플러그인 방식은 **"기존 프로그램에 새로운 기능을 추가하는 방법"**이라고 생각하시면 돼요.

예를 들어, 웹 브라우저에 플러그인을 설치한다고 하면, 원래 브라우저만으로는 할 수 없는 기능을 플러그인을 통해 추가하는 거예요. 예를 들어, 광고 차단기, 화면 캡처 도구, 비밀번호 관리기 같은 것들이 플러그인 방식으로 추가될 수 있죠

]

[옛날에는 플래시라는 기술을 많이 썼어요. 플래시는 웹에서 애니메이션이나 동영상 같은 걸 만들 때 주로 사용됐는데, 문제가 꽤 많았어요. 예를 들어, 모바일에서는 플래시가 제대로 작동하지 않았고, 보안 문제도 있었죠.

그래서 사람들이 HTML5라는 새로운 기술로 바꾸기 시작했어요. HTML5는 이제 웹에서 동영상이나 오디오, 애니메이션 같은 것들을 플러그인 없이 바로 웹 브라우저에서 볼 수 있게 해줘요. 예를 들어, YouTube에서 영상을 볼 때 플래시가 아니라 HTML5 기술로 영상이 재생되는 거죠.

HTML5가 나오면서 이제 모든 웹 브라우저에서 잘 호환되고, 모바일에서도 문제가 없어서 플래시 대신 HTML5가 표준이 된 거예요. 그래서 웹사이트들이 플래시를 버리고 HTML5를 채택하게 된 거죠.]

HTML, CSS, 자바스크립트 이 세계를 가지고 HTML5 웹 표준 이라고 하고 주은 의미에서는 HTML5 하나만 얘기 한다

의미를 가지고 있는 태그를 추가함으로써 내가 문서 구조를 만들 때 그 태그를 적절하게 쓰면 기계가 내가 만든 문서를 읽어 봤을 때 어떤 부분들을 보면 된다는 것을 내가 쉽게 알려 주는 겁니다. 그게 시맨틱 태그 입니다.

HTML5 스택은 크게 세 가지가 계속 되었는데 첫번째는 기존에 플러그인들로 제공해주던 기능들이 표준 기술로 흡수 되었다는 게 첫 번째이고 두번째는 웹의 기본 철학인 공유를 쉽게 구현 하기 위해서 의미론적 태그들이 추가 되었다. 세번째는 개발자 편의 기능이 추가 되었다.

대표적인 것이 html doctype schema 라는 것이 있는데 https://www.w3schools.com/tags/tag_doctype.ASP 들어가시면

DOCTYPE을 보면 이 문서가 어떤 구조로 정리 되어 있는지를 브라우저에게 또는 다른 머신에게 알려 줍니다. 옛날에는 이 DOCTYPE이 굉장히 길었어요 그런데 이거는 기계를 위한 것이지 사람 한테는 외우고 쓰는 것이 필요하지 않았죠. 그래서 더 간략하게 변했어요 세부적인 내용들은 기계들이 알아서 하게 놔둔겁니다

최근 사용한 스펙은 HTML5 라는 것을 알아 주셔야 되고

요소, 속성, 태그, 내용

<div> 
~~~~~
시작 태그
<!-- 종료 태그가 없는 경우 ⇐ 빈 요소(empty element) -->
	<hr>
	<input type="text" name="age" id="age">
	<br>
	<img src="http://test.com/myimg.gif">

	<!-- 종료 태그를 사용하는 경우 -->
	<input></input>
<img src="http://test.com/myimg.gif"></img>

	<!-- 자기 종료(self-closing) 태그 형태로 사용 -->
	<input />
	<hr />
	<br />
	<img />
</div>
~~~~~~
종료 태그

요소(element) = 시작 태그 + 종료 태그 + 내용
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<div> 시작 태그와 종료 태그 사이에는 다른 또는 텍스트가 들어갈 수 있음 </div>
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      내용 = contents = 다른 태그 또는 텍스트 


     속성(attribute) = 태그를 처리할 때 필요한 내용, 모양, 동작, 식별을 위한 값들로 구성
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<img src="http://www.test.com/myimage.gif" 	     	⇐ 이미 처리를 위해서 필요한 값
     width="100" height="100"  			            ⇐ 모양
     style="border: 1px solid red; cursor: hand;"	⇐ 모양 ⇐ inline style
     onclick="alert('clicked')" 			⇐ 이벤트가 발생했을 때 동작을 정의
     id="myimage"					        ⇐ 해당 문서에서 유일한 값
     class="ourimage"					    ⇐ 해당 문서에 여러 개 존재하는 값
/>

<div>는 구역을 나누는 태그입니다. 페이지 내에서 여러 요소를 그룹화할 때 사용됩니다. 이 태그 자체는 아무런 시각적 스타일을 제공하지 않으며, 보통 CSS나 JavaScript와 함께 스타일링 또는 기능을 부여합니다.
<hr>: 수평선(구분선)을 생성하는 태그입니다.
<input>: 사용자로부터 데이터를 입력받는 폼 필드입니다. type="text"는 텍스트 입력 필드를 의미합니다.
<br>: 줄바꿈을 위한 태그입니다.
<img>: 이미지를 표시하는 태그입니다. src 속성에 이미지의 URL을 입력합니다.
<form> 태그는 사용자 입력을 받는 폼을 정의하는 태그입니다.
- action: 폼이 제출될 서버의 URL을 지정합니다.
- method: 폼 데이터를 처리하는 방법을 지정합니다. (GET, POST 등)
- enctype: 폼 데이터를 서버로 전송할 때 사용하는 인코딩 방식을 설정합니다.
<input type="다양한 타입" />: 입력 필드입니다. type 속성으로 텍스트, 비밀번호, 체크박스 등 다양한 종류의 입력 필드를 설정할 수 있습니다.
<textarea></textarea>: 여러 줄 텍스트 입력 필드입니다.
<button></button>: 버튼을 생성하는 태그입니다. 폼 제출이나 다른 동작을 트리거하는데 사용됩니다.

AttributeDescription

id	유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다.
class	스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.

중요함

클라이언트 브라우저가 있으면 서버 쪽으로 요청을 합니다. 요청을 하면 그 요청에 결과로 HTML 문서가 내려옵니다

내가 서브 사이드로 요청을 할 때 요청을 통해서 어떤 내용을 전달 하고 싶을 때가 있어요. 그럼 이 서버 사이드 요청을 받는 놈이 이때 전달 된 값을 기반으로 해서 가변적인 형태의 어떤 응답을 줄 수 있겠죠

내가 어떤 것을 넣느냐에 따라서 써버 내부에서 동작이 달라 진다는 겁니다. 이걸 동적인 컨텐츠, 즉 다이나믹 컨텐츠 라고 합니다.

만약에 서버에다가 클라이언트가 어떻게 요청을 하더라도 그 내용이 항상 똑같은 결과가 나오면 이건 정적인 컨텐츠라고 합니다.

이 때 동적인 요청을 처리하기 위해서는 클라이언트가 서버에게 어떤 값을 전달 해야 되는데, 이제 전달 할 수 있는 태그가 form 태그 하는 겁니다. 이 form 이라는 태그 안에는 하위 태그로 input이나 textarea 같은 태그가 올 수 있어요.

이러한 태그가 들어가면 사용자가 어떠한 입력을 할 수 있는 창이 보여요. 그러면 이 창에 입력한 내용을 기반으로 서버한테 요청을 해서 서버가 사용자한테 필요한 데이터를 만들어서 느려 줍니다. 그래서 동적인 요청 처리가 가능하게 해주는 태그가 form 태그 하는 겁니다.

<form action="요청을 전달할 주소" 
      method="요청을 처리할 방식을 지정" 
      enctype="인코딩 방식">
      
      <!---- 사용자 입력으로 전달되는 데이터 --->
	<input type="다양한 타입" />
  	<textarea></textarea>
	<button></button>
</form>

css에서는 선택자를 보겠다

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 { color: red; }
    p  { color: blue; }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This paragraph is styled with CSS.</p>
</body>
</html>

<!-- <p> 태그는 HTML에서 단락(paragraph)을 정의하는 태그입니다. 
이 태그는 텍스트를 구분된 단락으로 묶어주는 역할을 합니다. 
기본적으로 텍스트는 <p> 태그로 감싸면, 화면에 나타날 때 자동으로 앞뒤에 여백이 추가되어 
다른 텍스트나 요소와 구분됩니다. -->

이렇게 하고 Open with Live Server 하면

이렇게 서버가 뜬다.

많고많은 인터넷에서 내가 원하는 데이터를 달라고 요청 하는 대상을 지정 할 때 쓰이는 게 호스트 주소예요. URL은 유니크하게 리소스를 위치를 위해서 식별 하는 거예요. 내가 원하는 파일이 어느 서버에 있는지 지정 하는 게 호스트 주소예요.

일단 호스트 주소로 갔어요. 그 서버에는 엄청나게 많은 프로그램들이 돌고 있을 거예요. 프로그램별로 고유한 번호를 가지고 동작 하고 있는데 운영체제가 80 이라는 숫자를 보고 해당 포트 번호를 가지고 있는 프로그램에게 전달해 주는 거예요.

그러면 그 80 이라는 프로그램은 c:\webdoc/path ... 라면 C밑에 webdoc 이라는 기준 디렉토리를 가지고 있고

자기한테 뭔가 요청이 들어오면 그 기준 디렉토리를 가지고 그 경로의 해당하는 파일을 읽어서 제공해 주는 거예요.

<4교시>

이렇게 태그 안에 style이라는 속성을 이용해서 여기에 배치나 색깔이나 모양 크기 등을 지정해 주는 것을 인라인 스타일 이라고 합니다.

이렇게 head 태그에 P 태그를 지정 하는 걸 셀렉터 선택자 라고 합니다. 이동한 스타일의 문서 내에서 어디에다가 지정 할 거냐 그 어디가피텍을 하는 겁니다. 얘는 internal 스타일 이라고 합니다.

인라인 스타일은 내가 직접 지정 해줬는데 내가 직접 이 태그에다 부여 하겠다는 거였는데,

internal 스타일은 <style> 태그 아래에서 내가 태그를 지정해 주구요. 괄호 안에 스타일에서 써줍니다. 이러한 스타일을 어디에다 지정해 줄건지 정해 주는 겁니다.

이렇게 해주면

link 태그로 연결하고

이제

이렇게 설정하고

이렇게 하면 h1은 무슨 색이 될까?

인라인 스타일이 가장 우선적으로 적용 된다는 것을 알아 두시면 좋습니다

우선순위 규칙

인라인 스타일 (style="color: red") — 가장 높은 우선순위를 가짐.
내부 스타일 (<style> 태그 안) — 두 번째 우선순위.
외부 스타일 (sample.css) — 세 번째 우선순위.

전체 셀렉터 (Universal Selector)

패턴Description

*	HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다)

 /* 모든 요소를 선택 */
    * { color: red; }

ID 셀렉터 (ID Selector)

패턴Description

#id 어트리뷰트 값

id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. id 어트리뷰트 값은 중복될 수 없는 유일한 값이다.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* id 어트리뷰트 값이 p1인 요소를 선택 */
    #p1 { color: red; }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <div class="container">
    <p id="p1">paragraph 1</p>
    <p id="p2">paragraph 2</p>
  </div>
  <p>paragraph 3</p>
</body>
</html>

To do

@media 로 미니프로젝트 해보기 (https://poiemaweb.com/css3-responsive-web-design)

간단한 웹페이지 만들어보기

박스모델

클래스 박스

반응형

은 알아두셔야 합니다

<!DOCTYPE html>: HTML5 문서임을 선언.
<html>: HTML 문서의 시작을 나타냄.
<head>: 문서의 메타정보(문서 제목, 스타일, 스크립트 등)를 포함하는 부분.
<style>: 페이지에 적용될 CSS 스타일을 정의.
<body>: 웹 페이지의 실제 내용(텍스트, 이미지 등)을 포함하는 부분.
<h1>: 가장 중요한 제목을 나타내는 헤딩 태그.
<div>: 다른 HTML 요소들을 그룹화하는 컨테이너.
<p>: 단락을 나타내는 태그, 텍스트를 문단 단위로 구분.

'LG CNS > 필기노트' 카테고리의 다른 글

리액트 컴포넌트 만들기 실습 (0)	2025.01.09
12/27 (0)	2025.01.08
1/6 (0)	2025.01.06
12월 26일 (목) (0)	2025.01.05
12/23 월 (0)	2024.12.23

'LG CNS/필기노트' Related Articles