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 위에서 작동한..

◆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의 기술확정이 아니기 때문에 브라우저 접두어를 사..

◆가변 그리드 가변 그리드는 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀 설정 값이 아닌 퍼센트(%) 설정 값 또는 가변 그리드 단위로 제작하는 기술이다. 가변 그리드 마다 계산하는 공식이 존재하고 공식이 모두 다르다. ●가변 그리드의 단위 가변 그리드의 단위들 vw vh vmin vmax em rem % vw : 웹 넓이를 100을 기준으로 크기를 결정함. vh : 웹 높이를 100을 기준으로 크기를 결정함. vmin : 높이와 너비중 짧은쪽을 100을기준으로하여 크기 결정. vmax : 높이와 너비중 긴쪽을 100을기준으로 하여 크기 결정. em : 부모의 font-size를 상속 받음. (1em = 부모 font-size) >> 부모 font-size가 설..

◆반응형 웹 (Resposible Web) 이란 ? 반응형 웹(Responsible Web)이란 디바이스(전자기기)별로 각각 레이아웃(grid)가 달라지는 웹이다. 쉽게 설명하자면 화면의 크기 마다 레이아웃이 달라진다. ◆미디어쿼리 (Media Query) 반응형 웹에서는 필수인 미디어쿼리는, 화면크기 마다 각각 다르게 CSS를 적용하는 것이다. 화면 사이즈를 인식해 서로 다른 CSS를 적용시켜준다. 보통은 스마트폰, 태블릿 , PC 화면 3개 정도를 구분해준다. CSS파일이나 ◆뷰포트 (ViewPort) Viewport란 모바일 브라우저에서 web conetent 를 출력하는 영역으로써, 일반 PC의 브라우저에서는 존재하지 않는 개념이다. Viewport는 웹페이지의 너비와 높이, 확대/축소 설정할 수..

속성: 값형태로 사용되며 여러 속성을 줄 때는 세미콜론(;)으로 구분한다. 구글크롬의 개발자모드(f12)를 사용하면 쉽다. ●width , height width(가로길이), height(세로길이)를 의미한다. inline 요소에서는 적용되지 않는다. 값의 단위 auto -> 기본값, 브라우저가 계산한 너비 px -> 픽셀 % -> 부모 요소에 상대적인 너비 initial -> 기본값으로 초기화 inherit -> 부모 요소로부터 상속 받은 값 ●margin, padding margin은 바깥쪽 여백, padding은 안쪽 여백을 의미한다. 두 속성 모두 방향을 지정할 수 있다. width,height 속성과 마찬가지로 px, auto 등 값을 사용한다. ex ) margin:10px -> 상하좌우 모두..