전체 글 (374) 썸네일형 리스트형 JSP 프로그래밍 기본 - 웹 브라우저 웹은 인터넷이라는 글로벌 네트워크 위에 구현되어 있으며, 정해진 프로토콜을 기반으로 통신한다. 개발자가 아닌 일반 이용자가 이러한 규칙을 이해하고 인터넷을 사용하기는 매우 어렵다. 만약 그랬다면 지금처럼 SNS와 커뮤니티가 활성화되지는 못했을 것이다. 20세기에 등장한 웹 브라우저는 서버와 HTTP 통신을 대신해주고, 수신한 리소스를 시각화하여 위와 같은 문제를 해결하였다. 웹 브라우저는 뛰어난 이용자 경험(User eXperience, UX)을 제공하는 소프트웨어 중 하나이다. 이용자는 브라우저를 이용하여 쉽게 정보를 검색하고, 동영상을 보고, 파일을 내려받지만 내부에서 어떠한 연산이 일어나는지는 전혀 알지 못한다. 브라우저를 통해 이용자가 주소창에 naver.com을 입력했을 때 웹 브라우저가 하게 .. JSP 프로그래밍 기본 - 웹 클라이언트와 서버의 통신 웹 서비스의 통신 과정을 간략화하면 다음과 같습니다. (클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속합니다.(클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청합니다.(서버) HTTP로 전달된 이용자의 요청을 해석합니다.(서버) 해석한 이용자의 요청에 따라 적절한 동작을 합니다.리소스를 요청하는 것이라면, 이를 탐색합니다.계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리합니다.(서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달합니다.(클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여줍니다. 용어 정리통신 - 정보를 전하는 것. 현대에는 전화, .. JSP 프로그래밍 기본 - 웹 리소스 웹 리소스란, 웹에 갖춰진 정보 자산을 의미한다.웹 브라우저의 주소창에 https://www.naver.com/index.html 주소를 입력하면 naver.com 에 존재하는 /index.html 경로의 리소스를 가져오라는 의미이다. 모든 웹 리소스는 고유의 Uniform Resource Indicator (URI)를 가지며, 이를 이용하여 식별된다. 웹의 프론트엔드를 구성하는 대표적인 웹 리소스들은 다음과 같다.Hyper Text Markup Language (HTML)웹 문서의 뼈와 살을 담당한다. 태그와 속성을 통한 구조화된 문서 작성을 지원한다. Cascading Style Sheets (CSS)웹 문서의 생김새를 지정한다. 웹 리소스들의 시각화 방법을 기재한 스타일 시트이다. 글자의 색깔이나.. JSP 프로그래밍 기본 - web 인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스를 웹이라 한다. 여기서 정보를 제공하는 주체를 웹 서버 (Web Server), 정보를 받는 이용자를 웹 클라이언트 (Web Client) 라고 한다. 식당에서 음식을 서빙하는 사람 (Server)과 음식을 주문하는 고객 (Client)의 관계로 생각하시면 된다. 여기서, HTTP란 웹상에서 서로 통신을 하기 위해 정해둔 일종의 규칙이다. 웹의 발전과 웹 보안의 중요성초기 웹 서비스는 저장된 문서의 내용을 출력해 이용자에게 제공하는 간단한 서비스였다. 그런데 웹과 관련된 기술이 발전하면서 이제는 금융, 쇼핑, 협업 등 다양한 분야에서 이용자에게 편의를 주는 복잡한 서비스로 진화했다. 과거에는 단순히 정보를 보여주는 것에서 그쳤.. JSP 프로그래밍 기본 - HTTP 응답 HTTP 응답은 HTTP 요청에 대한 결과를 반환하는 메시지이다. 요청을 수행했는지, 하지 않았는지, 안 했다면 이유는 무엇인지와 같은 상태 정보(Status), 그리고 클라이언트에게 전송할 리소스가 응답에 포함된다. 시작 줄HTTP 응답의 시작 줄은 HTTP 버전, 상태 코드(Status Code), 그리고 처리 사유(Reason Phrase)로 구성돤다. 각각은 띄어쓰기로 구분된다. HTTP 버전은 서버에서 사용하는 HTTP 프로토콜의 버전을 나타낸다. 그리고 상태 코드는 요청에 대한 처리 결과를 세 자릿수로 나타낸다. HTTP 표준인 RFC 2616은 대략 40여개의 상태 코드를 정의하고 있는데, 각각은 첫 번째 자릿수에 따라 5개의 클래스로 분류된다. 처리 사유는 상태 코드가 발생한 이유를 짧게 .. CSS flexbox - 교차축 정렬 align-items와 align-content 교차축 정렬이란?Flexbox 레이아웃에서 교차축(cross axis)은 주 축(main axis)에 수직인 축을 의미한다. 교차축 정렬은 이 축을 따라 Flex 아이템들을 배치하는 방법이다. 주 축이 수평 방향일 때 교차축은 수직 방향이 되고, 주 축이 수직 방향일 때 교차축은 수평 방향이 된다. 교차축 정렬을 위해 두 가지 주요 align-items와 align-content 속성을 사용한다. 1. align-itemsalign-items 속성은 Flex 컨테이너 내의 개별 Flex 아이템들을 교차축을 따라 정렬한다. Flex 컨테이너의 높이와 관계없이 각 아이템의 위치를 지정할 수 있다.flex-start: 아이템들을 교차축의 시작 부분에 정렬한다.flex-end: 아이템들을 교차축의 끝 부분에 정.. CSS flexbox - 주축 방향 정렬 justify-content justify-content 속성이란? justify-content 속성은 Flex 컨테이너 내에서 주 축(main axis)을 따라 아이템들을 정렬하는 방법을 정의한다. flex-start: 아이템들을 주 축의 시작 부분에 정렬한다 (기본값).flex-end: 아이템들을 주 축의 끝 부분에 정렬한다.center: 아이템들을 주 축의 가운데에 정렬한다.space-between: 첫 번째 아이템은 시작 부분에, 마지막 아이템은 끝 부분에 정렬하고, 나머지 아이템들은 사이에 고르게 분포시킨다.space-around: 아이템들 주위에 고르게 여백을 분포시킵니다. 아이템 간의 여백은 동일하지만, 첫 번째 아이템과 마지막 아이템의 바깥 여백은 내부 여백의 절반이다.space-evenly: 모든 아이템들을 사이의 .. CSS flexbox - flex-wrap flex-wrap 속성이란?display: flex; 속성을 사용하여 Flexbox 레이아웃을 구성할 때, 부모 요소를 Flex 컨테이너로 설정하고, 그 자식 요소들을 Flex 아이템으로 취급하는 개념을 학습하였다. 이번에는 주요 속성 중 하나인 flex-wrap 속성에 대해서 알아보자. flex-wrap 속성이란 Flex 컨테이너 내의 아이템들이 주 축을 따라 한 줄에 배치될지, 아니면 여러 줄에 걸쳐 배치될지를 결정한다. flex-wrap 속성에는 아래와 같은 값을 사용할 수 있다.nowrap : 기본값으로, 모든 아이템을 한 줄에 배치한다. 아이템들이 컨테이너의 너비를 넘어서도 한 줄에 계속 배치된다.wrap : 아이템들을 여러 줄에 걸쳐 배치한다. 주 축을 따라 공간이 부족하면 자동으로 줄 바꿈이.. 이전 1 ··· 25 26 27 28 29 30 31 ··· 47 다음