CGI(Common Gateway Interface) CGI란 CGI는 공용 게이트웨이 인터페이스로 웹 서버와 외부 프로그램 간의 통신을 위한 표준 인터페이스이다. CGI를 사용해 웹 서버가 클라이언트로부터 요청을 받고, 이러한 요청을 외부 프로그램으로 전달하여 프로그램이 요청을 처리하고 결과를 다시 웹 서버로 전달할 수 있다. 지금 말하는 외부 프로그램은 웹 서버에서 실행되는 프로그램이 될 수 있다. 예를 들어 python과 같은 스크립팅 언어로 작성된 CGI 스크립트가 웹 서버에서 실행되면, 이 스크립트는 웹 서버에서 동작하는 외부 프로그램이 된다. 즉 이 스크립트가 웹 서버와 통신하여 브라우저의 요청을 처리하고 그 결과를 브라우저에게 반환하는 것이다. 그래서 이 CGI를 사용하면 웹 서버와 외부프로..
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..
쿠키(Cookie) 쿠키는 클라이언트에 대한 정보를 클라이언트의 하드디스크에 작은 파일 형태로 저장한 text 파일로 서버에서 사용자에게 편리한 기능을 제공하기 위해 많이 사용되고, 쿠키는 웹 브라우저에 의해 관리된다. 쿠키는 텍스트 형태로 저장되기 때문에 변조나 복사 등이 가능하여 보안성이 없다. 저장되는 위치는 시스템(운영체제)이나 브라우저에 따라 다르며 형식도 꾸준히 바뀌어 가고 있다. 쿠키는 웹 브라우저가 거쳐간 웹 사이트 및 개인의 정보가 기록되기 때문에 개인의 사생활을 침해할 소지가 있으며, 이로 인한 보안 문제를 유발하기 때문에 일반적으로 웹 브라우저 자체에 쿠키 거부 기능이 포함되어 있다. 하지만, 쿠키 거부 기능을 설정하게 되면 웹 브라우저와의 연결을 지속시키지 못하기 때문에 문제가 발생..
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 배경 이미지의 사이즈를 정해..
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 ..
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 속성을 통해 배경생을 지..
요소의 가로 길이(width)와 세로 길이(height)를 설정할 수 있다. p { border : 3px solid red; width: 200px; height: 300px; } 최소, 최대 길이 min-width, max-width, min-height, max-height 를 이용해서 가로, 세로의 최소, 최대 길이를 지정할 수 있다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates debitis pariatur omnis! Optio ipsa rem qui ratione natus, inventore illum sed minima, quibusdam aspernatur quia laboriosam reprehenderit ..
border : 테두리 border Test 이렇게 테두리의 속성을 하나씩 지정 가능하다. border-style : 테두리 스타일 border-color : 테두리 색상 border-width : 테두리 굵기 한 줄로 작성 border Test1 border Test2 border Test3 이렇게 굵기, 스타일, 색 순서로 한 줄로 작성할 수 있다. 또한 #p3처럼 각각의 설정을 줄 수도 있다. 참고 태그와 같이 기본적으로 테두리가 설정된 요소에 테두리를 없애고 싶으면 border: none; border: 0; 이렇게 border 속성을 지정하면 된다. 부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다. 이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
요소 : 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다. Padding : 내용과 테두리 사이의 여유 공간 Margin : 요소 주위의 여백(테두리 밖의 공간) Padding padding을 주는 여러 가지 방법 가장 직관적으로 padding 주는 방법 padding 속성을 이용하면 순서는 위 오른쪽 아래 왼쪽 이다(시계방향) 모두 같은 padding 속성을 주고 싶으면 그냥 padding에 값만 입력하면 된다 좌, 우 값이 같고 위, 아래 값을 같게 주고 싶으면 padding 속성에 위, 아래 값(20px)을 주고 좌, 우 값(40px)을 주면 된다. Margin margin 도 동일하다. #p1 { border: 3px solid red; margin-top: 3..
Loerem으로 채우기 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum unde inventore soluta? Temporibus impedit eius aliquid voluptates, deserunt ipsam nostrum, laudantium molestias odit repellendus maxime facilis possimus veritatis, atque architecto? 이 문서를 보면 padding border margin을 이해할 수 있는데 실제 내용은 검은 바탕이고 padding은 빨간 선 안의 흰색 부분으로 내용과 테두리 사이의 공간이고 border은 빨깐 선이고 margin은 그 바깥의 흰 부분으로 다른 요소 ..