반응형 프로그램/web9 HTML 란? HTML이란 웹사이트를 구성하는 기초뼈대이다. HTML(HyperText Markup Language)을 좀더 구체적으로 단어 하나하나 분석해보자면 Hypertext : 하이퍼텍스트를 가장 중요한 특징으로 하는 Markup : 마크업이라는 형식을 가진 Language : 컴퓨터 프로그래밍 언어 라고 이해하면 된다. 하이퍼텍스트는 웹페이지에서 항상 보이는 링크이다. HTML로 짜여진 코드를 보고 싶으면 위와 같이 아무 웹페이지를 열고 우클릭을 해서 페이지소스 보기를 하면 해당 웹페이즈를 구성하는 HTML을 확인 할 수 있다. 2021. 8. 31. HTTP 요청&응답 HTTP 프로토콜로 데이터를 주고받기 위해서는 아래와 같이 요청(Request)을 보내고 응답(Response)을 받아야 합니다. 클라이언트란 요청을 보내는 쪽을 의미하며 일반적으로 웹 관점에서는 브라우저를 의미합니다. 서버란 요청을 받는 쪽을 의미하며 일반적으로 데이터를 보내주는 원격지의 컴퓨터를 의미합니다. HTTP 요청 메서드 클라이언트에서 URL을 이용하면 서버에 특정 데이터를 요청할 수 있습니다. 여기서 요청하는 데이터에 특정 동작을 수행하고 싶으면 HTTP 요청 메서드를 이용하면 됩니다. 일반적으로 HTTP 요청 메서드는 HTTP Verbs라고도 불리우며 아래와 같이 메서드를 갖고 있습니다. HTTP 메소드 RFC 요청에 Body 포함 응답에 Body 포함 안전 멱등 (idempotent) 캐.. 2021. 8. 18. HTTP, HTTPS란? HTTP HTTP란 무엇일까? 일단 뜻을 풀어보면 "HyperText Transfer Protocol"의 축약어이다. 이 HTTP를 직역을 하게 되면 하이퍼 본문 전송 규약으로 풀이할 수 있지만 바로 이해하기는 어렵다. 인터넷, 즉 WWW(World Wide Web)상에서 정보를 주고받기 위한 미리 정해놓은 규칙이라고 생각할 수 있다. HTTP는 주로 TCP를 사용하고 HTTP/3부터는 UDP를 사용하며, 80번 포트를 사용한다. 클라이언트와 서버 사이의 소통은 평문(ACII) 메시지로 이루어진다. 클라이언트는 서버로 요청 메시지를 전달하며 서버는 응답 메시지를 보낸다. HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식입니다. 메시지 타입은 두 가지가 있습니다. 요청(request)은 클라.. 2021. 8. 13. 뷰포트 (viewport) viewport는 화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고, 스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 됩니다. 그런데 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 작동하지 않는 문제가 발생할 수 있습니다. 이러한 문제를 방지하기 위해 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 합니다. 예시) 위 메타 태그는 반응형 웹을 제작할 때 사용하는 뷰포트의 기본 형태입니다. 뷰포트 기술을 제대로 사용하려면 문법을 정확하게 이해하고 있어야 하며,, 그중에서도 특히 뷰포트 속성은 반드시 알아야 합니다. 뷰포트 속성 속성명 속성값 속성 설명 width Device-width, 양수 뷰포트의 너.. 2021. 8. 4. 미디어 쿼리(Media Queries) 미디어 쿼리는 오래전 미디어 타입이라는 이름으로 등장했었습니다. 미디어 타입은 말 그대로 미디어의 종류만 감지했기 때문에 세부적인 사항까지는 알지 못했습니다. 또, 옛날에는 기기의 종류가 많지도 않아 사용성에 의구심을 갖는 사람들이 많아 거의 사용하지 않았던 기술입니다. 하지만, CSS3가 등장하면서 이 미디어 타입이라는 기술이 ‘미디어 쿼리’라는 이름과 함께 기기의 종류뿐 아니라 해상도, 비트 수, 가로, 세로 여부 등 세부사항까지 감지할 수 있는 기술로 탈바꿈을 하게 됩니다. 기기의 세밀한 부분까지 감지할 수 있어져 반응형 웹의 시작과 함께 웹 개발의 새로운 지평을 열었다는 찬사도 받습니다. 미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 .. 2021. 8. 2. 반응형 웹의 장단점 반응형 웹이 등장하면서 웹사이트를 사용하는 사람들에게 모든 기기에서 최적화된 웹사이트를 제공할 수 있게 되었고, PC 버전의 웹사이트와 모바일 버전의 웹사이트 두 가지 모두를 만들지 않아도 됨에 따라 비용과 시간, 인력을 반으로 줄일 수 있게 되었습니다. 그러면 왜 반응형 웹으로 만들어야 하는지 구체적으로 알아보겠습니다. 왜 반응형 웹을 쓰는가? 유지보수 간편 반응형 웹은 유지보수가 간편합니다. 모바일 버전과 데스크톱 버전 같은 두 개의 웹사이트를 만들게 되면 웹사이트에 새로운 내용을 추가하거나 수정할 때 모바일 버전과 데스크톱 버전을 개별적으로 수정해야 하므로 같은 내용의 작업을 반복해야 했기 때문에 손이 많이 가고 복잡합니다. 하지만 반응형 웹은 모바일 버전, 태블릿 버전, 데스크톱 버전 등 모든 디.. 2021. 7. 29. 이전 1 2 다음 반응형 LIST
