CGI, ASGI, WSGI

CGI(Common Gateway Interface) CGI란 CGI는 공용 게이트웨이 인터페이스로 웹 서버와 외부 프로그램 간의 통신을 위한 표준 인터페이스이다. CGI를 사용해 웹 서버가 클라이언트로부터 요청을 받고, 이러한 요청을 외부 프로그램으로 전달하여 프로그램이 요청을 처리하고 결과를 다시 웹 서버로 전달할 수 있다. 지금 말하는 외부 프로그램은 웹 서버에서 실행되는 프로그램이 될 수 있다. 예를 들어 python과 같은 스크립팅 언어로 작성된 CGI 스크립트가 웹 서버에서 실행되면, 이 스크립트는 웹 서버에서 동작하는 외부 프로그램이 된다. 즉 이 스크립트가 웹 서버와 통신하여 브라우저의 요청을 처리하고 그 결과를 브라우저에게 반환하는 것이다. 그래서 이 CGI를 사용하면 웹 서버와 외부프로..

• format_list_bulleted CS/Web
• · 2023. 4. 12.
• textsms

HTML과 HTML5의 차이점

HTML이란? Hyper Text Markup Language의 약자이다. 웹 페이지 제작을 위한 표준 마크업 언어(markup language)로 HTML 요소를 사용해 섹션, 링크 등을 만들어 구조화할 수 있다. 또한 HTML은 동적 기능(dynamic functionality)을 할 수 없어 프로그래밍 언어로 간주되지 않는다. 1991년 HTML 1.0이 나오고 현재는 2014년에 출시된 HTML 5를 표준으로 사용하고 있다. HTML과 HTML5의 차이점 멀티미디어 기능 HTML4까지 웹 브라우저에 멀티미디어 파일(3D, 오디오, 영상 등)을 재생하려면 브라우저가 아닌 별도의 플러그인(plug-in)이 필요했지만, HTML5에서는 웹 브라우저에서 직접 재생할 수 있다. Web Storage HTM..

• format_list_bulleted CS/Web
• · 2023. 2. 7.
• textsms

쿠키와 세션

쿠키(Cookie) 쿠키는 클라이언트에 대한 정보를 클라이언트의 하드디스크에 작은 파일 형태로 저장한 text 파일로 서버에서 사용자에게 편리한 기능을 제공하기 위해 많이 사용되고, 쿠키는 웹 브라우저에 의해 관리된다. 쿠키는 텍스트 형태로 저장되기 때문에 변조나 복사 등이 가능하여 보안성이 없다. 저장되는 위치는 시스템(운영체제)이나 브라우저에 따라 다르며 형식도 꾸준히 바뀌어 가고 있다. 쿠키는 웹 브라우저가 거쳐간 웹 사이트 및 개인의 정보가 기록되기 때문에 개인의 사생활을 침해할 소지가 있으며, 이로 인한 보안 문제를 유발하기 때문에 일반적으로 웹 브라우저 자체에 쿠키 거부 기능이 포함되어 있다. 하지만, 쿠키 거부 기능을 설정하게 되면 웹 브라우저와의 연결을 지속시키지 못하기 때문에 문제가 발생..

• format_list_bulleted CS/Web
• · 2023. 1. 19.
• textsms

9. 배경이미지

background-repeat 이미지 반복시키는 여부 정하는 속성 /* 반복하지 않음 */ background-repeat: no-repeat; /* 가로 방향으로만 반복 */ background-repeat: repeat-x; /* 세로 방향으로만 반복 */ background-repeat: repeat-y; /* 가로와 세로 모두 반복 */ background-repeat: repeat; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */ background-repeat: space; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */ background-repeat: round; background-size 배경 이미지의 사이즈를 정해..

• format_list_bulleted CS/HTML CSS
• · 2022. 6. 26.
• textsms

8. box-sizing

width와 height 속성은 border(테두리)와 padding을 제외한 content(내용물)의 크기만을 나타냅니다. 그래서 아래 코드를 실행해보면 p1과 p2의 크기가 다릅니다. #p1 { border: 3px solid red; width: 400px; height: 200px; margin-bottom: 100px; } #p2 { border: 3px solid red; width: 400px; height: 200px; padding: 20px; } p1의 경우 가로는 406px이고 세로는 206px입니다. p2는 가로 446px이고 세로는 246px입니다. 결국 가로 400px이고 세로 200px로 만들기 위해서는 border과 padding 속성을 다 계산하고 width, height ..

• format_list_bulleted CS/HTML CSS
• · 2022. 5. 7.
• textsms

7. border-radius, background-color, box-shadow

border-radius border-radius 속성을 통해 모서리를 둥글게 만들 수 있습니다. p{ border: 3px solid red; border-radius: 10px; } 값이 커질 수록 더욱 둥글어집니다. 또한 각 모서리를 개별 설정할 수 있습니다. p{ border: 3px solid red; border-top-left-radius: 5px; /* 왼쪽 위 */ border-top-right-radius: 10px; /* 오른쪽 위 */ border-bottom-right-radius: 20px; /* 오른쪽 아래 */ border-bottom-left-radius: 0px; /* 왼쪽 아래 */ } background-color background-color 속성을 통해 배경생을 지..

• format_list_bulleted CS/HTML CSS
• · 2022. 5. 7.
• textsms