픽토그램이란? 픽토그램이란 픽토(picto)와 전보를 뜻하는 텔레그램(telegram)의 합성어로, 무언가 중요한 사항이나 장소를 알리기 위해, 그 어떤 사람이 보더라도 같은 의미로 통할 수 있는 그림으로 된 언어체계입니다. 디자인을 할 때 픽토그램은 굉장히 유용하게 쓰입니다. 디자인 측면에서 특정 기능이 있을 때 그 기능을 글로 표현하는 것보다는 아이콘으로 간결하게 표현하는 것이 좀 더 깔끔하게 보이기 때문이죠. 위와 같이 팔로우 기능이 있다고 예로 들어보겠습니다. 한눈에 봐도 왼쪽부터 차례대로 페이스북, 인스타그램, 트위터라는 것을 알 수 있습니다. 글귀로 페이스북, 인스타그램, 트위터 이렇게 쓰는 것보다 픽토그램을 쓰는 것이 훨씬 깔끔합니다. 이처럼 픽토그램은 아이콘만 봐도 직관적으로 무슨 기능인지..
리다이렉트(Redirect)란? 리다이렉트는 특정 요청을 받았을 때 현재 웹 페이지를 특정 URL로 이동시키는 프로세스를 말합니다. 리다이렉트는 웹에서 유용하게 사용됩니다. 예를 들면 사용자가 쇼핑몰에서 결제창을 띄워서 결제를 진행한다고 가정해 보겠습니다. 그러면 결제가 완료되거나 실패했을 때 기존에 쇼핑하고 있던 앱이나 웹사이트로 리다이렉트 시키면 사용자 경험이 올라가겠죠. 또한 내가 서비스하고 있는 웹 서비스의 도메인이 바뀌었을 때에도 리다이렉트를 활용하면 기존 도메인으로 들어온 고객들을 바뀐 도메인으로 인입되도록 처리하여 손실되는 트래픽을 최소화시킬 수도 있을 것입니다. 리다이렉트의 주체 클라이언트 사이드 리다이렉트 : 리다이렉트가 사용자의 브라우저에서 처리됩니다. 주로 자바스크립트 코드를 활용하여..
상태코드란? HTTP 상태 코드는 클라이언트가 보낸 HTTP 요청에 대한 처리 상태를 서버의 응답에서 알려주는 기능을 가지고 있는 3자리 숫자코드를 의미합니다. 크게 1xx, 2xx, 3xx, 4xx, 5xx의 숫자로 시작되는 5가지의 분류로 나뉘어 있으며 각각의 상태 코드는 특정한 의미를 가지고 있습니다. 이 HTTP 상태코드 통해 사용자는 클라이언트와 서버 간의 통신 과정에서 어떤 일이 발생했는지를 대략적으로 유추할 수 있습니다. 1xx(Informational): 요청이 수신되어 처리 중 2xx(Successful): 요청 정상 처리 3xx(Redirection): 요청을 완료하려면 추가 행동이 필요 4xx(Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음..
HTTP 요청 메서드는 클라이언트가 서버 측에 요청하는 HTTP 메시지를 전송하는 방식을 뜻합니다. 즉 서버에 HTTP 메서드를 요청할 때 서버에서 기대하는 행동을 정의해서 보낸다고 생각하시면 되겠습니다. 이 HTTP 메서드가 필요한 이유는 서버 측에서 HTTP 메시지의 의미를 쉽게 파악하기 위해서입니다. 예를 들어 회원관리를 하는 관리자 사이트가 있다고 해봅시다. 그러면 회원들의 정보를 수정하기 위해서는 클라이언트에서 서버로 HTTP 요청을 서버에 날려야 할 텐데, 같은 HTTP 메시지에 메서드만 PEATCH(수정), DELETE(삭제)냐에 서버는 요청 메시지의 의미를 구분할 수 있게 되고, 그에 따른 동작을 명확하게 처리할 수 있게 됩니다. 이러한 HTTP 메서드는 RESTful API에서 자주 사용..
오늘날의 인터넷에는 이미지, 동영상, 문서 등 다양한 종류들의 자원들이 웹 상에 존재하고 있습니다. 이렇게 다양한 자원들을 각각 식별하기 위해서 특별한 명칭 또는 주소가 필요하게 되었는데요. 이러한 고민에서 출발한 것이 URI, URL, URN이라는 용어들입니다. URN은 오늘날에는 거의 사용하지 않지만 웹 개발자라면 URI나 URL은 굉장히 많이 사용하게 되는 용어로 꼭 알아둬야 하는 개념입니다. URI(Uniform Resource Identifier)란? Uniform : 리소스 식별하는 통일된 방식 Resource : 자원, URL로 식별할 수 있는 모든 것 Identifier : 다른 항목과 구분하는데 필요한 정보 URI는 Uniform Resource Identifier의 줄임말로 번역해 보자..
도메인 네임 시스템(Domain Name System)이란? DNS는 도메인 네임 시스템 - Domain Name System의 약자로 도메인(www.naver.com)을 IP 주소(192.168.0.1)로 변환하는 시스템입니다. 인터넷에서 통신할 때, 클라이언트는 IP 주소를 사용하여 서버와 통신하게 되는데 사용자는 IP 주소를 일일이 기억하기 어려우므로, DNS 서버에 해당 도메인에 IP 주소를 매핑하여 도메인 입력만으로도 IP주소를 찾을 수 있도록 하는 것입니다. 도메인 네임 시스템(Domain Name System)을 사용해야 하는 이유 기억하기 어려운 IP 주소를 기억하기 쉬운 도메인으로 관리할 수 있다. 네이버 : 223.130.200.104 구글 : 142.250.199.78 DNS 서버를 ..
포트번호란? ex) 192.132.15.86:50921 IP주소 뒤에 : 기호와 함께 붙는 번호를 포트라고 합니다. 포트는 0~65536 사이의 숫자를 가지게 되며 실행되고 있는 프로세스를 구분 짓기 위해 사용되는 16비트의 논리적 할당을 말합니다. 포트번호는 컴퓨터의 특정 프로세스를 찾아갈 때 사용됩니다. 즉 192.132.15.86이라는 IP는 컴퓨터를 찾을 때 필요한 주소를 말하며, 50921이라는 포트는 컴퓨터 안에서 프로그램을 찾을 때 사용하는 것입니다. 포트라는 용어의 유래도 본래는 항구라는 단어에서 따온 말입니다. 항구의 입장에서 봤을 때 컨테이너를 가득 실은 배가 한 번에 둘 이상 입항하려고 하려면 어떻게 해야 할까요? A컨테이너선은 1부두로 B컨테이너선은 2부두로 유도를 시켜줘야 하겠죠...
엔티티코드란? 엔티티코드는 HTML에서 특수기호나 다국어를 사용하기 위한 코드를 뜻하며, 모든 엔티티코드는 &으로 시작해서 ; 기호로 끝납니다. 특수기호의 엔티티코드는 https://www.toptal.com/designers/htmlarrows/ 이 사이트에서 확인하실 수 있습니다. 엔티티 코드 자동 변환 사이트 https://mothereff.in/html-entities HTML entity encoder/decoder mothereff.in 일일이 엔티티코드를 찾아보는 게 귀찮아서 입력만 하면 엔티티코드로 변환시켜 주는 사이트가 있으면 정말 좋겠다 생각했습니다. 그래서 찾아봤는데 실제로 있더군요. 주소는 https://mothereff.in/html-entities 입니다. Decoded 부분에 ..
챗 GPT가 요즘 화제입니다. 저도 잘 사용하고 있는데요. 검색창에 원하는 질문을 입력하면 마치 사람처럼 주저 없이 답변을 해줘서 매우 놀랍습니다. 다만 챗 GPT가 미국의 마이크로소프트가 투자한 오픈 AI인 만큼 대부분의 학습 자료들이 영어로 되어 있어 한글로 질문을 할 시 답변 내용이 잘리고 속도도 다소 느립니다. 그래서 많은 사람들이 번역기를 통해 질문을 만들고 답변을 한글로 번역해서 해석하는 등의 작업을 거치고는 하는데요. 이러한 과정은 매우 번거롭겠죠? 오늘 소개해드릴 프롬프트 지니를 설치하시면 Chat GPT에서 자동으로 영어로 번역을 해주기 때문에 매우 편리합니다. Chat GPT 자동번역 프롬프트 지니 다운로드 / 설치 방법 1. 아래 링크되어 있는 크롬 웹 스토어에 들어가서 "프롬프트 지..
sticky는 영어로 '끈적끈적하다'라는 형용사입니다. position : sticky로 설정하면 끈적끈적하다는 말처럼 스크롤을 계속해서 따라오는 html요소를 생성할 수 있는데요. sticy position으로 설정되어 있는 요소는 스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때는 이전 포스팅에서 배웠던 fixed position처럼 작동합니다. 아래 예시를 보시면 이해가 빠르실 겁니다. position : sticky 사용법 See the Pen position : sticky by wjdxo513 (@wjdxo513) on CodePen. top : 상단에서 픽셀만큼 요소를 아래에 고정시킵니다. right : 우측에서 픽셀만큼 요소를 왼쪽에 고정시킵니다. left : 좌..
position : fixed는 문서의 흐름과 상관없이 위치로 좌표로 결정합니다. 브라우저 창(뷰포트)이 기준이 되며 브라우저 창의 왼쪽 위 꼭짓점을 원점으로 두고 좌표가 계산됩니다. 이 position : fixed 속성을 사용하면 이름처럼 브라우저 창을 스크롤하더라도 한 곳에 계속 고정되어 표시됩니다. 이를 활용하여 헤더, 사이드바, 모달 창 등을 구현할 수 있습니다. position : fixed 사용법 See the Pen position : fixed by wjdxo513 (@wjdxo513) on CodePen. top : 상단에서 픽셀만큼 요소를 아래에 고정시킵니다. right : 우측에서 픽셀만큼 요소를 왼쪽에 고정시킵니다. left : 좌측에서 픽셀만큼 요소를 오른쪽에 고정시킵니다. bo..
CSS의 position 속성은 요소의 위치를 배치하는데 사용되는 속성입니다. position 속성을 이용하면 텍스트나 이미지와 같은 특정 html 요소를 나란히 배치할 수도 있고 가로나 세로로 원하는 위치에 배치할 수도 있으며 경우에 따라서는 스크롤을 따라다니거나 화면 한 곳에 고정도 시킬 수 있습니다. CSS position 속성 사용법 CSS position 속성값 static : 기본적으로 설정되는 값으로, 요소를 문서의 흐름에 맞추어 배치합니다. 다른 위치 속성들과 달리 추가 속성을 사용하지 않습니다. relative : 이전 요소에 자연스럽게 연결하여 배치하되 상대적인 위치를 지정할 수 있습니다. top, right, bottom, left 속성을 사용하여 요소를 이동시킬 수 있습니다. abs..
일반적으로 웹에서 테이블을 만드려면 태그를 사용하지만 display : table 속성을 사용해서 HTML 요소를 테이블 형태로 표시할 수도 있습니다. 이번 포스팅에서는 display: table을 사용하여 테이블 형태의 레이아웃을 만드는 방법에 대해 알아보겠습니다. display : table 사용법 See the Pen css display:table by wjdxo513 (@wjdxo513) on CodePen. display: table = 해당 요소를 테이블 컨테이너로 만듭니다. display: table-row = 해당 요소를 테이블 행으로 만듭니다. display: table-cell = 해당 요소를 테이블 열로 만듭니다. 위와 같이 display:table을 사용하여 요소를 테이블 컨테이너..