투투

Django 공식 문서와 MDN으로 Django에 대해 정리를 한다. Django는 파이썬 웹 프레임워크 웹 프레임워크는 어떠한 개발자들이 웹 개발을 쉽고 편리하게 할 수 있도록 뼈대를 만들어 놓은 것이며Django는 파이썬을 사용하여 만들어진 웹 프레임워크이다. 프레임워크를 사용할 때는 프레임워크의 규칙에 따라서 개발이 이루어져야하며 자유도가 낮다. Django의 코드는 어떻게 생겼을까? 위의 그림은 MDN에서 설명하는 Django의 흐름이다. 각각의 역할에 따라 코드들이 분리되어 있어 확장성과 유지보수가 쉽다는 장점이 있다. 웹 브라우저로부터 HTTP 요청을 받는다면 urls.py에서 요청을 받아 views.py에 전달한다. views.py에는 요청받은 데이터를 처리하기위한 함수가 정의되어 있다. 함..

CSS에서 flex속성은 해당 item이 속한 컨테이너의 공간을 어떻게 차지할지 정의할 수 있다. 하나의 컨테이너에 세 개의 박스가 있을 때 flex속성을 통해 공간을 분배할 수 있을 것이다. 아래의 그림은 검정 테두리 안에 세 개의 박스가 display:flex의 형태로 정렬되어 있는 것이다. 이 상태에서 flex속성을 이용하여 공간을 분배할 것이다. flex 속성에는 기본적으로 flex-grow, flex-shrink, flex-basis가 존재한다. ▶ flex-grow 컨테이너 박스가 커질 때 item들이 어떤 비율로 커질지 지정하는 속성, 또한 어떤 비율로 공간을 차지할지 지정하는 속성 ▶ flex-shrink 컨테이너 박스가 작아질 때 item들이 어떤 비율로 축소될지 지정하는 속성 ▶ fle..

요즘 어떤 웹 서비스에 로그인을 할 때 "네이버 계정으로 로그인하기", "카카오 계정으로 로그인하기" 등을 쉽게 볼 수 있다. 또한 지도를 사용해야 하는 앱을 보면 구글맵, 카카오 맵 등을 사용하는 것을 확인할 수 있다. 이러한 기능들은 모두 API를 사용한 것인데 API가 무엇이고 어떻게 동작하는지 알아보자 API(Application Programming Interface)란? API는 세 개의 단어 Application, Promgramming, Interface의 약자이며 모두 들어본 단어일 것이다. 그 중 인터페이스는 연결방식이라고 할 수 있다. 우리가 모니터를 연결하려고 할 때에도 HDMI, DP, DVI 등을 사용할 수 있는데 모니터에서 제공하는 인터페이스 방식에 따라 케이블을 선정해야 한다..

HTML과 CSS를 공부하면서 유튜버 "드림코딩 엘리"의 유튜브 클론코딩 영상을 보면서 HTML, CSS에 익숙해지려고 했다. 최대한 많이 반복하는 것이 빨리 익숙해지기 위한 지름길이라고 생각했다. 이를 위해 반응형 헤더를 만들어보고 Youtube 클론코딩을 시작했다. 하지만 반응형 헤더와 달리 웹 페이지의 구조가 복잡했다. 마크업을 하면서 따라하기보다 구조를 파악하고 생각하면서 하는 것이 빨리 익숙해지기 위해 더 좋은 방법일 것 같아 클론 코딩한 Youtube 페이지의 레이아웃을 분석하려고 한다. 먼저 작성한 페이지는 다음과 같다. 먼저 크게 세 개의 부분으로 나눌 수 있다. header, video player가 들어있는 section1, 채널 정보와 동영상 정보가 들어있는 section2와 같이 나..

저번 글에서 flex box에 대해 알아봤으며 이제 flex box로 지정했을 때 포함된 item들에게 적용시킬 수 있는 속성은 무엇이 있는지 알아보겠습니다. 아래 링크는 flex에 대한 기본을 다루고 있고 이 글을 이해하는데 도움이 되실 수 있습니다. kimmeh1.tistory.com/23 [CSS] flex 이해하기 CSS로 요소들의 위치를 잡을 때 flex를 많이 사용한다는 것을 느꼈습니다. 사실 CSS3 이전에는 flex가 없어서 원하는 대로 위치를 지정하는 것이 어려웠다고 한다. flex를 사용하면서 화면의 크기가 kimmeh1.tistory.com ▶ flex-direction flex로 지정된 container의 item들을 어떤 방향을 정렬시킬지 정하는 속성입니다. 기본적으로 flex로 ..

CSS로 요소들의 위치를 잡을 때 flex를 많이 사용한다는 것을 느꼈습니다. 사실 CSS3 이전에는 flex가 없어서 원하는 대로 위치를 지정하는 것이 어려웠다고 한다. flex를 사용하면서 화면의 크기가 달라져도 자동적으로 재 정렬되어 보입니다. 그렇다면 flex를 어떻게 사용하는지 살펴보겠습니다. flex는 아래와 같이 사용할 수 있습니다. div{ display:flex; } section 태그 안에 div로 box 3개를 출력해보겠습니다. 다음 그림과 같이 기본적으로 block 타입이기 때문에 한 줄에 하나의 box가 출력됩니다. 이제 section 태그의 display를 flex로 변경해보겠습니다. 한 줄에 box 3개가 모두 출력되었습니다. 이러한 결과가 나타난 이유를 자세히 살펴보겠습니다...

시맨틱(Semantic) 태그는 의미가 있는 태그란 뜻입니다. HTML 태그를 통해 웹 문서를 작성할 때 좀 더 의미 있는 태그를 사용함으로써 정확하게 정보를 전달하고 웹 문서의 구조를 쉽게 파악할 수 있도록 합니다. 또한, 검색 엔진은 웹 사이트의 HTML 태그들을 분석하여 사용자가 원하는 정보를 노출시키기 때문에 시맨틱 마크업은 중요합니다. 그렇다면 시맨틱 태그는 어떤 것이 있는지 알아보겠습니다. 아래 그림은 시맨틱 태그를 활용하여 웹 문서의 레이아웃을 잡은 것입니다. 각 태그가 어떤 의미를 갖고있는지 살펴보겠습니다. ▶ : 보통 웹 문서의 소개 및 탐색을 위해 사용됩니다. 제목, 로고, 검색, 내비게이션 등을 포함시킬 수 있습니다. ▶ : 현재 페이지에서 다른 페이지의 탐색을 돕는 내비게이션 역할을..

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분합니다. - 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. - 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. - 테두리(border) : 내용과 패딩 주변을 감싸는 테두리입니다. - 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다. 위 그림과 설명은 TCP School에서 가져온 것이다. 왜냐하면 개인적으로 가장 이해가 잘되는 그림이었습니다..

CSS의 position 속성은 문서 상의 각 요소를 어떻게 배치할 지 정합니다. HTML의 태그들은 웹 문서에서 block, inline의 흐름에 따라 자동적으로 배치됩니다. 이때 position 속성에 static, relative, absolute, fixed, sticky를 사용함에 따라 본인이 원하는 위치에 배치할 수 있도록 합니다. 1. static 모든 태그는 웹 문서에 배치될 때 static을 기본값으로 배치가 됩니다. 즉 문서의 흐름에 따라 자동적으로 배치가 되며 top, right, bottom, left, z-index와 같은 속성에 영향을 받지 않습니다. 따라서 이와 같은 속성을 사용하기 위해서는 static이 아닌 다른 키워드를 사용해야 합니다. 아래 그림은 를 통해 box1 ~ ..

HTML의 태그에 id와 class를 지정하면서 사용법과 차이점을 정리해보려고 한다. 먼저 id와 class의 사용법을 알아보자. ID를 지정함 ID를 지정하지 않음 HTML에서 id와 class는 위와 같이 사용할 수 있다. 이제 위의 문서에 CSS를 입혀보자. class에 css를 입힐 때는 ' . '을 사용하여 .(class이름)으로 css 속성을 추가한다. id는 '#'을 사용하여 #(id이름)으로 css 속성을 추가한다. .menu{ background-color:#006666; } #btn{ background-color:#ff9933; color:#fff; } 결과는 다음과 같다. div에 menu라는 class를 지정 후 청록색으로 지정하였다. 그리고 div에 속해있는 id가 btn인 p태..