1. HTTP란? [ HTTP(Hyper Text Transfer Protocol)란? ] HTTP(Hyper Text Transfer Protocol)란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다. 즉, HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다. 따라서 HTTP 서버가 80번 포트에서 요청을 기다리고 있으며, 클라이언트는 80번 포트로 요청을 보내게 된다. HTTP는 1989년 팀 버너스 리(Tim Berners Lee)에 의해 처음 설계되었으며, WWW(World-Wide-Web) 기반에서 세계적인 정보를 공유하는데 큰 역할을 하였다. [ HTTP의 구조 ] HTTP는 애플리케이션 레벨의 프로토콜로 TCP/IP 위에서 작동한..

서버와 클라이언트가 통신을 할 때 통신이 연속적으로 이어지지 않고 한 번 통신이 되면 끊어진다. 따라서 서버는 클라이언트가 누구인지 계속 인증을 해주어야 한다. 하지만 그것은 매우 귀찮고 번거로운 일이다. 또한 웹페이지의 로딩을 느리게 만드는 요인이 되기도 한다. 그런 번거로움을 해결하는 방법이 바로 쿠키와 세션이다. 정리하면, 클라이언트와 정보 유지를 하기 위해 사용하는 것이 쿠키와 세션이다. ◆동작방식 ◆쿠키 1. 개념 쿠키는 클라이언트 로컬(local)에 저장되는 키와 값(key, value)이 들어있는 작은 데이터 파일이다. 쿠키는 서버에서 HTTP Response Header에 Set-Cookie 속성을 이용하여 클라이언트에 쿠키를 제공한다. 쿠키에는 이름, 값, 만료 날짜/시간(쿠키 저장기간)..

◆소스코드위치 자바스크립트는 기본적으로 HTML 문서의 사이에 위치 합니다. 그러나 그 외 위치에 둘수도 있고 외부파일이나 다른 서버를 통해 참조하는 방식으로도 사용할 수 있습니다. 여기서는 자바스크립트의 소스가 위치하는 몇몇 유형에 대해 살펴 봅니다. ●내부 자바스크립트 HTML 문서 내부에 자바스크립트 소스코드를 두는 유형 입니다. 혹은 에 둘 수 있으며 양쪽에 모두 있어도 상관 없습니다. 현재 HTML 파일의 문서구조(DOM)에 쉽게 접근이 가능. 현재 화면에 동적인 요소를 부여하는 자바스크립트가 같은 소스파일에 위치하기 때문에 코드 관리와 이해가 쉬움. 자바스크립트 소스가 복잡해지는 경우 관리가 어려움. 공통된 기능을 만들기 어렵고 코드의 재활용이 어려움. ●외부 JavaScript HTML 문서..

◆자바스크립트(JavaScript) 자바스크립트는 정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당하게 됩니다. HTML이나 CSS와 달리 자바스크립트는 C언어, 자바와 같은 일반 프로그램언어와 비슷한 구조를 가지고 있습니다. 따라서 단순히 콘텐츠 제작만을 생각하는 프론트엔드 초보 개발자에게는 가장 어려운 부분이라 할 수 있습니다. 자바스크립트는 객체(Object) 기반의 스크립트 언어로 기본적으로는 웹 브라우저에서 해석되는 인터프리터 언어이며 Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍에도 사용할 수 있습니다. 현재 컴퓨터나 스마트폰 등에 포함된 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다. ●자바스크립트 특징 동적이며 타입을 명시..

◆Position 속성 태그를 어떻게 위치시킬지 정의한다. 5가지 값을 가진다. static : 기본 값, 다른 태그와의 관계에 의해 자동으로 배치 됨. 좌표(top,bottom,left,right)를 임의로 설정할 수 없다. 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 가끔 사용된다. inherit : 부모 태그의 속성 값을 상속 받는다. relative : 상대위치. 원래 있던 위치(static위치)를 기준으로 좌표(top,bottom,left,right)를 사용하여 위치를 이동시킨다. absolute : 부모 요소 또는 가장 까까이 있는 조상 요소(static은 제외)를 기준으로 좌표(top,bottom,left,right)만큼 이동한다. 즉, relative, abs..

◆Position 속성 태그를 어떻게 위치시킬지 정하는 속성이다. static : 기본 값, 다른 태그와의 관계에 의해 자동으로 배치 됨. 좌표(top,bottom,left,right)를 임의로 설정할 수 없다. 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 가끔 사용된다. inherit : 부모 태그의 속성 값을 상속 받는다. relative : 상대위치. 원래 있던 위치(static위치)를 기준으로 좌표(top,bottom,left,right)를 사용하여 위치를 이동시킨다. absolute : 부모 요소 또는 가장 까까이 있는 조상 요소(static은 제외)를 기준으로 좌표(top,bottom,left,right)만큼 이동한다. 즉, relative, absolute,fi..

Grid로 레이아웃 연습해보기 기본 예제 grid-template-areas 값에 . (마침표) 가 들어가면 그 부분은 빈 공간이 된다. .item 에 width 나 height 속성을 주면 grid-areas 가 무시된다. 반드시 크기는 grid-template 를 통해서 크기를 설정한다. * 위의 코드를 grid-template 속성 하나도 단축 할 수 있다. .wrap{ display:grid; grid-template: "header header header" 100px /* areas 옆에 grid-template-rows*/ "main . ." 100px "main . aside" 100px "footer footer footer" 100px / 1fr 1fr 1fr; /*1fr 1fr 1fr..

플렉서블 박스 (Flexible box) 플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3 에서 처음으로 소개된 레이아웃 모델이다. 이 레이아웃은 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어 웹페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해준다. 쉽게 말하자면 반응형 웹에서 레이아웃을 유지하게 해주는 CSS 속성이다. 플렉서블 박스 특징 부모 div가 플렉서블 박스로 작동하면 자식 div들은 플렉스 아이템이라고 불린다. 주축을 가로로 설정하면 플렉스 아이템이 왼쪽에서 오른쪽으로 배치된다. 주축을 세로로 설정하면 플렉스 아이템이 위에서 아래로 배치된다. 플렉서블 박스는 아직 W3C의 기술확정이 아니기 때문에 브라우저 접두어를 사..