's IT STORY 's IT STORY

Django ▶ 장점 오픈소스로 디테일한 문서가 매우 많으며 사용자가 많아 자료 찾기에 편리합니다. Full-stack Framework로 이미 구조화 되어 있어서 프레임워크 가이드 대로 하면 손쉽게 개발이 가능합니다. RDBMS와의 상호 작용을 완전히 지원하는 ORM기능이 내장되어있습니다. (ORM(Object relational mapping) - 객체 관계 매핑. 데이터베이스 시스템과 데이터 모델 클래스를 연결) 자동으로 관리자 페이지를 제공하며, 이를 통해 web application에서 사용하는 데이터들을 쉽게 생성하거나 변경할 수 있습니다. ▶ 단점 Full-stack Framework인 만큼 Flask보다 약 10배 많은 코드 라인으로 개발이 비교적 느리며 더 무겁습니다. 많은 기능을 제공하..

IP IP(Internet Protocol)란 인터넷이 통하는 네트워크에서 어떤 정보를 수신하고 송신하는 통신에 대한 규약을 의미합니다. IP 주소는 전화번호처럼 통신 기능이 제공되는 기기들이 서로 통신을 하기 위해 필요한 고유 번호입니다. 32비트의 값을 가지며 8비트씩 끊어 0~255의 10진수 숫자로 나타내고 각 숫자는 .점으로 구분합니다. (최대 약 43억개의 고유한 주소를 부여할 수 있습니다.) 예) 111.222.333.444 도메인 IP는 여러 숫자들로 이루어져 있기 때문에 우리가 쉽게 기억하고 구분하기가 매우 어렵습니다. 이러한 문제를 해결하여 한눈에 구분할 수 있고 쉽게 기억할 수 있게 이름을 부여한 것이 도메인(Domain) 입니다. 한마디로 도메인이란 IP를 대신하여 사용하는 이름입니..

HTTP란? HTTP(Hypertext Transfer Protocol)은 서로 다른 시스템들 사이에 통신을 주고 받게 해주는 가장 기본적인 프로토콜입니다. (프로토콜(Protocol) - 컴퓨터들 간의 원활한 통신을 위해 지키기로 약속한 규약) 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있습니다. HTTP 서버가 80번 포트에서 요청을 기다리고 있으며, 클라이언트는 80번 포트로 요청을 보내게 됩니다. 웹 서핑을 할 때 서버에서 자신의 브라우저로 데이터를 전송해주는 용도로 많이 사용되며, 인터넷 초기에 모든 웹 사이트에서 기본적으로 사용되었던 프로토콜이었습니다. 암호화가 되지 않은 평문 데이터를 전송하는 프로토콜로 비밀번호나 개인정보등의 민감한 데이터를 제3자가 정보..

플렉서블 박스 이용해 목업 웹사이트 만들기 먼저 우리가 만들어볼 웹사이트의 구조와 각각의 영역이 어떠한 역할을 하는지 살펴볼까요? ← 로고와 메뉴를 담고 있는 헤더 영역 ← 이미지를 효과적으로 보여주기 위한 슬라이더 영역과 사진을 보여줄 갤러리 영역 그리고 인기 검색어를 순위대로 보여주는 인기 검색어 영역 ← 최근에 작성한 글들과 사람들이 많이 본 글을 보여주는 최근 글 영역과 인기 글 영역, 광고 또는 웹사이트에서 전달할 사항을 담고 있는 배너 영역, 그리고 사람들과의 소통을 위한 소셜 네트워크 영역 ← 웹사이트의 저작권 정보 등을 담고 있는 푸터 영역 기본 구조 잡기 1. 편집기를 실행시켜 실습 파일인 04_1.html을 불러옵니다. 그리고 , 태그 사이에 wrap이라는 아이디로 태그를 작성합니다. ..

주축 방향으로 다양하게 플렉스 아이템 배치하기 플렉스 아이템은 플렉서블 박스 주축의 시작점부터 배치됩니다. 만약 주축 방향으로 박스를 다양하게 배치하고 싶다면 다음의 속성과 속성값을 사용하세요. 속성명 속성값 적용 요소 justify-content flex-start(기본값), flex-end, center, space-between, space-around 플렉서블 박스 속성값명 속성값 설명 flex-start 자식 박스를 부모 박스 주축의 시작점으로 배치하며, 기본값입니다. flex-end 자식 박스를 부모 박스 주축의 끝점으로 배치합니다. center 자식 박스를 부모 박스의 중앙으로 배치합니다. space-between 플렉서블 박스에 빈 공간이 있을 때 사용합니다. 첫 번째 박스와 마지막 박스는..

플렉서블 박스 기본 개념 이해하기 플렉서블 박스(Flexible Box)를 이용하면 가변적인 박스를 아주 손쉽게 만들 수 있어 반응형 웹과 플렉서블 박스는 환상의 콤비라고도 할 수 있습니다. 이미 해외의 유명 웹 기술 잡지인 'W.E.B'에서 최고 신기술상을 수상하기도 했으며 웹 기술 중 가장 주목을 받고 있는 기술입니다. 기존의 속성들로는 박스의 배치 순서를 변경하거나 자유롭게 바꾸는 것이 불가능했습니다. 하지만 플렉서블 박스가 등장하면서 박스 요소들을 다양하고 자유롭게 조작할 수 있게 되었습니다. 예로 플렉서블 박스의 특정 속성값을 중앙으로만 설정하면 박스들을 중앙으로 배치할 수 있으며, 여러개의 박스가 나란히 있을 때는 가장 높은 크기의 박스에 맞춰 모든 박스의 높이를 확장하는 등 유연하게 작동하는..

화면의 크기나 환경에 따라 웹사이트를 변경하는 기술, 미디어 쿼리 미디어 쿼리(Media Queries)는 사실 새로운 기술이 아닙니다. 이미 오래 전에 미디어 타입이라는 이름으로 등장한 적이 있는데, 미디어 타입은 말 그대로 미디어의 종류만 감지하기 때문에 기기의 세부적인 사항들은 감지할 수가 없었습니다. 또한 예전에는 기기의 종류가 다양하지 않아 사용성에도 의구심을 갖는 사람들이 많아 거의 사용하지 않았던 기술이었죠. 하지만 CSS3가 등장하면서 이 미디어 타입이라는 기술은 '미디어 쿼리'라는 이름으로 바뀌었고 기기의 종류뿐만 아니라 해상도, 비트 수, 가로, 세로 여부 등 세밀한 부분까지 감지할 수 있는 기술이 탑재되면서 반응형 웹의 시작과 함께 웹 개발의 새로운 지평을 열고 있다는 찬사를 받고 있..

폰트도 자유자재로! 가변 폰트 이용하기 웹사이트를 구성하는 요소는 여러 가지가 있지만 그중에서도 글자, 즉 폰트는 웹사이트에서 빠져서는 안 될 핵심 요소 중 하나입니다. 기존에 웹사이트를 개발할 때는 고정 단위인 픽셀(px)을 많이 사용했습니다. 하지만 픽셀은 모니터의 해상도를 기준으로 하기 때문에 화면이 확대되거나 축소되는 환경에는 맞지 않습니다. 웹 페이지를 표시하는 모니터 해상도에 따라 픽셀 크기가 달라지기 때문이죠. 웹 브라우저에서 정확하게 글자 크기를 나타내려면 상대적인 단위인 em을 사용하는 것이 좋습니다. em 단위는 대문자 M의 너비를 1cm으로 표현한 것으로, 16px이 1cm에 해당합니다. (최신 브라우저는 픽셀(px) 단위를 사용해도 축소, 확대가 가능합니다.) 글자를 가변적이게 만들..