본문 바로가기

Web13

웹 구조 WEB | 스타일 시트 CSS, Cascading Style Sheets ✅ 스타일 시트 CSS, Cascading Style Sheets스타일 시트 CSS, Cascading Style Sheets는 웹 페이지의 외관을 표현한다.웹 페이지의 디자인으로써 레이아웃, 텍스트 장식, 배경 등을 표현한다. CSS는 페이지 수가 많은 HTML 파일 코드를 간소화하는 데 유용하다.각 페이지마다 스타일을 정의할 경우 번거롭다. HTML 파일에서 CSS 파일을 참조하는 태그를 사용하여 연결한다. CSS 대신 Bootstrap 프레임워크나 Sass를 이용하기도 한다. 2023. 2. 9.

웹 구조 WEB | HTML, Hyper Text Markup Language | 하이퍼텍스트, 하이퍼링크, 태그 예시 ✅ HTML, Hyper Text Markup Language웹 페이지는 하이퍼텍스트로 작성되고는 하이퍼링크를 사용하여 이동한다. 💡 하이퍼텍스트HTML은 하이퍼텍스트를 기술하기 위한 언어이다.HTML은 태그라는 마크를 사용한다.마크로 문서 구조를 표현하기 때문에 HTML을 마크업 언어로 부른다. 태그 예시a: 하이퍼링크br: 줄 바꿈h: 표제header: 도입부hr: 밑줄img: 이미지 삽입meta: 페이지 설명p: 문장section: 페이지 각각table: 테이블 구조title: 타이틀 HTML로 작성한 페이지의 확장자는 html이나 htm이다. 💡 하이퍼링크 hypertext reference 약자 herf로 부른다. 2023. 2. 9.

웹 구조 WEB | 웹 디자이너 | UX 디자인, UI 디자인, 웹 디자인 ✅ 웹 디자인 웹 사이트는 코드로 구성되어 있다. 웹 사이트를 이용하는 시스템에서는 웹 디자인은 필요하다. UX, User eXperience 디자인: 사용자가 얻을 수 있는 만족하는 체험을 설계한다. UI 디자인: 최적의 외관, 편리한 사용을 설계한다. 웹 디자인: 언어와 도구로 외관을 표현한다. 2023. 2. 9.

웹 구조 WEB | 정보 시스템 SoR과 SoE ✅ 정보 시스템 SoR과 SoE 💡 정보 시스템 SoR 시스템에서 SoE 시스템으로 바뀌고 있다. 열람 중심 웹 사이트에서 다양한 정보를 수집하여 활용하는 웹 앱, 웹 시스템으로 변화함에 따름이다. 기록 시스템 SoR, System of Record: 과거에 사용, 조직 관리 중심 연결되는 시스템 SoE, System of Engagement: 현재에 사용, 다양한 조직과 개인의 연계 중심 💡 개발 스킬 디바이스나 네트워크가 급속히 다양해짐에 따라 과거와 현재의 개발 스킬이 변화한다. 제로 베이스에서 개발했던 과거에서, 프레임워크를 이용하고 API를 활용하는 현재가 되었다. 독자성이나 전용성을 중시하는 과거에서, 범용성이나 가용성을 중시하는 현재가 되었다. 프로그래밍에 구애받지 않고 코드를 최대한 적지 .. 2023. 2. 9.

웹 구조 WEB | 웹 사이트 규모 | site: 명령어, 웹 페이지 수 카운트 ✅ 웹 사이트 규모 웹 사이트 규모는 웹 페이지 수로 측정한다. 총 페이지 수의 기준은 액티브한 페이지를 전제로 한다. 소규모: 100 페이지 이하 중규모: 1,000 페이지 이하 대규모: 10,000 페이지 이하 초대규모: 10,000 페이지 이상 대규모 이상이 되면 유지 보수가 까다롭게 된다. 💡 웹 페이지 수 카운트 site: 명령어로 페이지 수를 카운트한다. site: 명령어는 구글이 인식하고 있는 페이지 수이므로 실제 페이지 수와 오차는 있지만 대략적인 규모는 짐작할 수 있다. 2023. 2. 9.

웹 구조 WEB | 웹 시스템 관리 | 클라서버 시스템, 온프레미스 On-Premises, 클라우드 서비스 ✅ 웹 시스템 웹 시스템은 브라우저, API, 애플리케이션이 설치된 디바이스로 웹 서버에 접근하는 구성이다. 💡 웹 시스템 관리 타사 웹 서버를 사용하는 것이 대부분이다. 자사 웹 서버 관리 자사 정보 시스템 센터, 데이터 센터에 서버를 설치하고 접근한다. 인트라넷: 내부 내트워크를 사용하는 것이다. 타사 웹 서버 위임, 대여 웹 서버, 메일 서비스 전용 인터넷 서비스 프로바이더 ISP 서비스, 클라우드 서비스, 데이터 센터 사업자의 호스팅 서비스를 이용한다. 💡 기업 업무 시스템 클라서버 시스템 클라이언트에서 LAN 네트워크를 통하여 시스템 서버에 접근한다. 온프레미스 On-Premises 클라서버 시스템 IT 기기가 기업이 관리하는 환경 내에 있는 것이다. 클라우드 서비스 서버를 클라우드 사업자가 관.. 2023. 2. 8.

웹 구조 WEB | API, Application Programming Interface ✅ API, Application Programming Interface 웹 시스템에 연결하는 방법에는 브라우저, API, 애플리케이션 등이 있다. API는 소프트웨어가 송수신할 때의 인터페이스를 의미한다. 💡 웹 시스템 API, WEB Application Programming Interface 웹 시스템 API는 하이퍼텍스트가 아닌 시스템 간의 데이터 송수신을 시행하는 구조이다. 스마트폰에서 애플리케이션을 통하여 웹서버에 데이터를 송수신하는 것이 예시이다. 웹 시스템 API는 위치 정보, 날씨 정보, 금융 거래, 이미지 인식, 언어 처리 등이 패턴화 되어 있다. 2023. 2. 8.

웹 구조 WEB | 브라우저 종류 | 요청과 응답의 렌더링 과정 ✅ 브라우저 브라우저는 하이퍼텍스트를 보여준다. HTML로 기술되어 있는 웹 페이지는 웹 사이트를 구성하고 브라우저에서 본다. 브라우저 종류 구글 Chrome 마이크로소프트 Microsoft Edge Internet Explorer 💡 브라우저 렌더링 Rendering Path 브라우저가 요청하고, 응답받는 과정을 렌더링 Rendering Path라고 한다. 요청, 리퀘스트 브라우저는 웹 서버에 요청을 한다. 응답, 리스폰스 웹 서버는 브라우저에 응답을 한다. HTML, CSS, JavaScript가 응답이다. 2023. 2. 8.

웹 구조 WEB | 웹 서버 구조 종류 | 랙 마운트형, 리눅스 Linux, Window Server, 유닉스 UNIX ✅ 웹 서버 💡 웹 서버 물리적 구조 웹 서버는 서비스 규모, 사용자 수에 따라 다른 구조를 가진다. 웹 서버 구조 종류 타워형: 오피스에서 주로 사용한다. 랙 마운트형: 정보 시스템 센터, 데이터 센터에서 주로 사용한다. Linux 사용이 늘어나고 있다. 리눅스 Linux: 필요한 기능위주로 추가하여 디스크 절약, 안정성 향상, 비용 절감이 가능하다. 구현이 어렵다. 윈도우 서버 Window Server: 많은 기능이 구현되어 있다. 유지 보수에 비용이 쓰인다. 범용기(메인 프레임): 대규모 업무 시스템에서 사용한다. 유닉스 UNIX: 대규모 업무 시스템에서 사용한다. 대규모 업무 시스템에서 범용기(메인 프레임), UNIX 계열 서버를 사용하기도 하지만 랙 마운트형을 여러 대 사용하기도 한다. 2023. 2. 8.

웹 구조 WEB | URL 구성 | 도메인명 종류, 프로토콜, 스키마명, FQDN ✅ URL 💡 URL이란 URL은 웹 페이지, 웹사이트의 파일이다. 구성 스키마(프로토콜)명 FQDN, Fully Qualified Domain Name: 완전 수식 도메인명, 호스트명 + 도메인명 경로명: 생략하여도 웹 서버 기능으로 보완한다. 💡 도메인명 도메인명은 IP 주소에 대응하는 이름이다. IP 주소를 알고 있는 사이트는 IP 주소를 입력하여 페이지를 찾을 수 있다. 하지만 숫자로 구성된 IP 주소는 어느 사이트인지 쉽게 알기 어렵기 때문에 도메인명을 사용한다. 도메인명 종류 gTLD, Generic Top Level Domain .com: 누구나 등록 가능, 상업 조직 대상, 10500원 .net: 누구나 등록 가능, 네트워크 대상, 11000원 .org: 법인(단체, 협회) .edu: 교육.. 2023. 2. 8.

웹 구조 WEB | 웹 페이지 열람 방법 | URL, 전용 애플리케이션 App ✅ 웹 페이지 열람 방법 💡 URL, Uniform Resource Locator 사용 PC, 스마트폰, 태블릿은 디바이스다. 웹 사이트에 가장 접근하기 쉬운 디바이스는 스마트폰인 것 같다. 디바이스에 설치된 브라우저를 사용하여 사용자는 웹 페이지에 접근한다. URL, Uniform Resource Locator을 입력, 클릭, 탭 한다. 💡 전용 애플리케이션 App 사용 디바이스 전용 애플리케이션을 사용하여 접근하는 경우도 늘고 있다. 전용 애플리케이션에 URL을 삽입하여 애플리케이션을 시작하면 바로 접근가능하다. 다른 서버와 자동적으로 특정 데이터를 주고받을 수 있다. 2023. 2. 7.

웹 구조 WEB | 웹 시스템 구조 | 웹 페이지, 웹 사이트, 웹 앱, 웹 시스템 ✅ 웹 시스템 브라우저 소프트웨어를 사용하여 URL을 입력하면 원하는 웹 사이트로 접근한다. 브라우저가 인터넷을 통하여 도착하는 곳은 웹 서버이다. 디바이스(브라우저), 인터넷, 웹 서버가 기본 구성이다. 물리적으로 클라서버 시스템과 같다. 💡 웹 사이트 문서 정보 중심의 웹 페이지로 구성되는 집합체이다. 💡 웹 앱, 애플리케이션 쇼핑 등의 동적인 구조를 가진다. 웹 서버에 애플리케이션 AP 서버, 데이터베이스 DB 서버 등을 추가한 형태이다. 💡 웹 시스템 웹 사이트, 웹 앱에 추가로 API 등 개별 서비스를 제공한다. 다소 복잡하고 규모가 큰 구조이다. 2023. 2. 7.

웹 구조 WEB | 웹이란 | WWW, 하이퍼텍스트, 하이퍼링크 ✅ 웹 WEB 💡 인터넷 웹은 정말 가까이 있는 존재이다. 웹은 인터넷을 통하여 제공되는 정보나 서비스를 주고받기 위한 구조이다. WWW, World Wide Web은 인터넷을 통하여 제공되는 하이퍼텍스트를 이용한 시스템이다. 💡 링크 웹 사이트를 구성하는 웹 페이지는 링크, 참조 형태로 연결된다. 웹은 하이퍼텍스트와 하이퍼링크 구조가 사용된다. 하이퍼링크 구조는 웹 페이지가 하이퍼텍스트 마크업 랭귀지 HTML 언어로 구성되어 있다. 하이퍼텍스트로 작성된 페이지에 링크를 남기면 다른 페이지로 이동할 수 있다. 기존 시스템에서는 프로그램을 호출하고, 종료하는 구조이지만, 웹 사이트에서는 링크로 이동한다. 2023. 2. 7.

이전 1 다음

티스토리툴바