본문 바로가기

11

[STUDY] WEB - 02. 웹 구축 및 구동 방식 02. 웹 구축 및 구동 방식 웹 구축 및 구동 방식의 발전 정적 사이트(Static Sites) · 클라이언트에서 URL을 사용해 서버에 접속 (Request) → 서버는 미리 저장된 HTML (정적 페이지)를 클라이언트로 전송 (Response) ※ 클라이언트에서 URL 이 변경되는 상호작용 이벤트가 발생될 때마다 서버로 HTML(정적 페이지)을 요청하고 응답 받기 때문에 화면 깜빡임이 발생 정적 사이트(Static Sites) : 태그 추가 · 정적 사이트(Static Sites)와 동일한 방식으로 동작하고, 태그를 사용해 부분적 페이지 업데이트가 가능해짐 정적 사이트(Static Sites) : (fetch) 태그 추가 · 정적 사이트(Static Sites)와 동일한 방식으로 동작 · Javas.. 2022. 6. 17.
[STUDY] WEB - 01. 웹(Web) 이란 01. 웹이란 정보 공유 목적의 대표적 인터넷 서비스 하이퍼 텍스트(Hypertext)를 기반으로 서로 관련있는 문서(document)를 연결한 문서의 집합체 (TCP/IP) ※ 하이퍼텍스트(Hypertext)는 참조(Hyperlink)를 통해 문서 간 이동 및 접근 할 수 있는 텍스트 웹 주소 구성 (URL) · URL(Uniform Resource Locator) ://.:/?# 스킴(Scheme) · 프로토콜(Protocol) · 해당 리소스에 접근 프로토콜을 명시 서브 도메인(Sub domain) · URL로 전송 또는 계정 내 IP 주소, 디렉토리로 포워딩 되는 도메인 이름의 확장자 ※ blog.naver.com, mail.naver.com ... 도메인(Domain) ·문자 등으로 만들어진 주.. 2022. 6. 17.
[UX/UI] 웹 UX / UI 디자인 가이드 라인(Guide Line) - 색상(Color) 웹 UX / UI 디자인 가이드 라인(Guide Line) 색상(Color) 색상마다 의미하는 바가 다르지만, '언어'와 달리 그 의미는 공통이다. 색조 (색상, Hue) · 색상(Hue)은 색 자체가 가지고 있는 고유 특성 채도(Saturation) · 색상의 선명도 · 다른 색과 색이 섞이지 않을 수록 선명도가 높아짐 - 고채도 · 다른 색과 색이 섞일 수록 선명도가 낮아짐 - 저채도 명도(Brightness) · 색상의 밝음과 어두움의 정도 톤(Tone) · 서로 동일한 명도, 채도를 사용하여 톤을 조절 색상 가이드(Color Guide) 1. 주요 색상 (Pirmary Color) 브랜드(Brand) 대표 색상으로, 가장 많이 그리고 자주 쓰이는 색상 ※ 사용자의 시선이 가장 많이 머무르는 곳에 .. 2022. 5. 11.
[PROGRAMMING] 프로그래밍 (Programming) - 이미지 변환(Image Transform) 02 코드 · HTML, CSS(SCSS), 자바스크립트(Javascript) 기능 · 이미지 (preserve-3d) 배치, 네비에기션 버튼을 통한 이미지 회전 1. HTML & CSS 1) 코드 뷰 #main-body .container#example > .content[name="example"] { width: 100%; height: 100vh; padding: 0 1vw; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; /* flex 설정 */ -ms-flex-direction: column; -webkit-flex-direction: column; flex-direc.. 2021. 10. 18.
[WEB] SMTP / POP3 / IMAP 1. SMTP 란 · 간이 우편 전송 프로토콜(Simple Mail Transfer Protocol, SMTP) · 이메일을 보내기 위해 이용되는 프로토콜. 메일 서버 간 송수신 및 메일 클라이언트에서 서버로 보낼 때 사용. · REF281, TCP 포트번호 25 2. POP 란 · 포스트 오피스 프로토콜(Post Office Protocol, POP) · 응용 계층 인터넷 프로토콜. 원격 서버(메일 서버)로 부터 TCP/IP 연결을 통해 이메일을 다운로드하고 서버에서 메일을 삭제. · 일반적으로 POP3 로 표기 · TCP 포트번호 110 3. IMAP 란 · 인터넷 메시지 접속 프로토콜(Internet Message Access Protocol, IMAP) · 응용 계층 인터넷 프로토콜. 원격 서버(.. 2021. 10. 13.
[PROGRAMMING] PHP - STRLEN, STRPOS, SUBSTR, STRTOLOWER, STRTOUPPER, TRIM, EXPLODE, IMPLODE, STRCMP 1. STRLEN ( string $string ) ( PHP4, PHP5, PHP7, PHP8 ) · 문자열 길이 반환 (int) 2. STRPOS ( string $haystack, string $needle, int $offset = 0 ) ( PHP4, PHP5, PHP7, PHP8 ) · 전체 문자열에서 특정 문자열 포함 확인 및 첫 위치 반환 · $offset : 검색 시작 위치, 음수 일 경우 문자열 끝에서 부터 시작 3. SUBSTR (string $string, int $offset, ?int $length = null ) ( PHP4, PHP5, PHP7, PHP8 ) · 전체 문자열에서 특정 범위 추출 4. STRTOLOWER( string $string ) / STRTOUPPER (.. 2021. 10. 12.
[WEB] NODE.JS 1. Node.js 란 · 네트워크 어플리케이션(서버 사이드) 개발에 사용되는 소프트웨어 플랫폼 · Chrome V8 자바스크립트 엔진을 사용한 자바스크립트 런타임 · Non-Blocking I/O 지원 (비동기식 프로그래밍) 2. Node.js 설치 · 다운로드 및 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 3. Node.js 관련 명령어 ※ 상시 업데이트 더보기 $node -v : node.js 버전 확인 $npm -v : npm 버전 확인 // NPM 이란, Node Package Modules로 Node.js에서 사용 가능한 모듈 .. 2021. 10. 10.
[WEB] HTML 유용한 사이트 https://www.w3schools.com/ - HTML 및 CSS 코드 정보 사이트 https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com - HTML 5 및 CSS 코드 별 브라우저 사용유무 확인 사이트 https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Websi.. 2021. 10. 9.
[WEB] HTML 기본 구조 HTML 헤드(HEAD) 메타(meta) 태그 ( meta element) - 도큐먼트(document)에 대한 구조적인 정보(메타 데이터(Meta data) ; 데이터의 데이터) 정의 ... 메타 태그 속성 속성 http-equiv name content 문법 http-equiv="" name="" content="" 설명 문서 초기 정보를 나타내는 속성 문서 초기 정보를 나타내는 속성 해당 정보에 대한 내용 설정 ▶ 도큐먼트 문자 코드 타입 설정 (UTF-8) ▶ 렌더링 모드 설정 ( 강제 렌더링 ) - IE=5 : IE5 렌더링 - IE=7 : IE7 표준 모드 렌더링 - IE=8 : IE8 표준 모드 렌더링 - IE=edge : IE8 이상 버전에서 항상 최신 표준 모드로 렌더링 ▶ 캐쉬(Cach.. 2021. 10. 9.
[PROGRAMMING] 프로그래밍 (Programming) - 이미지(Image) 돋보기(Magnifier-glass) 코드 · HTML, CSS(SCSS). 자바스크립트(Javascript) 기능 · 마우스 커서를 따라 부분 확대, 돋보기(Magnifier-glass) 효과 1. HTML & CSS 1) 코드 뷰 Image : Magnifying-Glass /* #main-body #magnifier-glass > .content */ .wrap { width: 100%; text-align: center; padding: 2rem 0; } .wrap > .ct-img { max-width: 100%; position: relative; display: inline-block; border: 1px solid RGB(0, 0, 0, 0.1); overflow: hidden; } /* 자식 노드(child) 사이즈가 큰 .. 2021. 10. 2.
[PROGRAMMING] 프로그래밍 (Programming) - 이미지(Image) 줌인(Zoom-In) 코드 · HTML, CSS(SCSS). 자바스크립트(Javascript) 기능 · 마우스 커서를 따라 이미지를 확대 (Zoom-In) 1. HTML & CSS 1) 코드 뷰 Image : Zoom-In /* #main-body #magnifier-glass > .content */ .wrap { width: 100%; text-align: center; padding: 2rem 0; } .wrap > .ct-img { max-width: 100%; position: relative; display: inline-block; border: 1px solid RGB(0, 0, 0, 0.1); overflow: hidden; } .wrap > .ct-img.scrollbar { /* 자식 노드(child) 사.. 2021. 10. 2.
반응형