Clloud's devlog

이번 포스팅에서는 장고를 사용하여 게시판 서비스 개발에 필요한 내비게이션 바(navigation bar)에 대하여 공부를 해보고자 한다. 내비게이션 바 내비게이션 바는 흔히 사용하는 웹 사이트의 메뉴를 의미한다. 화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트이다. 내비게이션 바는 모든 페이지에서 공통적으로 보여야 하므로 base.html 템플릿에 추가해야 한다. [파일명: projects\mysite\templates\base.html] Pybo 로그인 {% block content %} {% endblock %} 항상 pybo:index 페이지로 이동해 주는 'Pybo' 로고를 가장 왼쪽에 배치했고, 오른쪽에는 '로그인' 링크를 추가한다. 이와 같이 수정하고 질문 목록 페이지를 요청하면 화면 상단에 다..

이번 포스팅에서는 장고의 기본 요소 중 하나인 템플릿 상속(extend)에 대하여 공부를 해보고자 한다. 표준 HTML 구조 지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야 한다. [표준 HTML 구조의 예] (... 생략 ...) 표준 HTML 문서의 구조는 위의 예처럼 html, head, body 엘리먼트가 있어야 하며, CSS 파일 링크는 head 엘리먼트 안에 있어야 한다. 또한 head 엘리먼트 안에는 meta, title 엘리먼트 등이 포함되어야 한다. 태그와 엘리먼트 (... 생략 ...) 은 table 태그이고 ~ 처럼 t..

이번 포스팅에서는 HTML의 입력 양식에 대하여 공부를 해보고자 한다. Form 요소 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다. 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다. 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다. 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다. method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나누..

이번 포스팅에서는 HTML의 공간 분할에 대하여 공부를 해보고자 한다. 블록(block)과 인라인(inline) HTML의 모든 요소는 display 속성을 가지며, display 속성 값으로 블록과 인라인 중 하나를 가진다. 블록(block) 타입의 요소 display 속성 값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다. , , , , , 요소는 display 속성 값이 블록(block)인 대표적인 요소이다. 더보기 예제 p요소는 display 속성값이 블록인 요소입니다. 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소이다. 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다. 더..

이번 포스팅에서는 HTML의 기본 요소에 대하여 공부를 해보고자 한다. HTML 링크(Link) 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재한다. 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 태그로 표현한다. HTML 링크 더보기 태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시한다. 태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있다. target 속성 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시한다. target 속성값 설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. _self 링크로 연결된 문서를 현재 프레임(frame..

이번 포스팅에서는 HTML의 기본 요소에 대하여 공부를 해보고자 한다. HTML 스타일 (Style) HTML 요소의 style 속성을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있다. 하나의 HTML 요소에만 style 속성을 이용하여 스타일을 적용할 수 있다. 배경색 변경 예제 style 속성을 이용한 배경색 변경 글자색 변경 예제 style 속성을 이용한 글자색 변경 글자 크기 변경 예제 style 속성을 이용한 글자 크기 변경 문단 정렬 변경 예제 style 속성을 이용한 문단 정렬 변경 여러 스타일의 설정 위에 변경한 여러 가지 스타일을 한 번에 적용할 수 있다. ex) 예제 style 속성을 이용하여 한 번에 스타일링 하기! style 속성 값에 사용되는 CSS 속성(proper..

이번 포스팅에서는 HTML의 텍스트 요소에 대하여 공부를 해보고자 한다. 제목 (Heading) HTML은 제목을 표현할 수 있는 다양한 크기의 태그를 제공한다. 가장 큰 태그부터 가장 작은 태그까지 다양한 크기로 제목을 표현할 수 있다. 태그의 위아래로는 약간의 여백이 자동으로 삽입된다. 여러 검색엔진은 각 웹 사이트의 내용을 태그를 이용하여 키워드를 수집하고, 그 내용을 파악한다. 따라서 HTML 문서에 포함되는 제목은 태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있다. HTML 문서의 제목에 해당하는 부분을 태그나 태그를 사용하면 안 된다. 단락(Paragraph) 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 한다. HTML에서는 태그를 이용하..

이번 포스팅에서는 HTML의 기본적인 구조에 대하여 공부를 해보고자 한다. HTML이란? HTML은 HyperText Markup Language의 약자다. 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다. 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는 데 사용된다. HTML 문서는 윈도우의 메모장, 리눅스의 vi와 같은 기본 에디터로도 작성할 수 있다. 확장자를 .html로 저장하면 웹 브라우저에서 바로 확인할 수 있다. HTML 태그(tag) HTML 태그는 태그 이름을 꺾쇠괄호()로 감싸서 표현한다. → 시작 태그 → 종료 태그 HTML 태그는 보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으..

이번 포스팅에서는 프론트엔드(Front-End) 기본 지식에 대하여 공부를 해보고자 한다. 프론트엔드(Front-End) 프론트엔드는 사용자가 볼 수 있는 화면, 즉 사용자 인터페이스(User Interface, UI)를 말한다. 웹 사이트 또는 웹 애플리케이션의 URL을 입력하거나 모바일 애플리케이션을 다운로드할 때, 화면상 나타나는 아주 깔끔한 레이아웃을 가진 인터페이스라고 생각하면 된다. 프론트엔드는 프로토타입(prototype)을 기반으로 웹사이트의 화면을 만들어 나간다. 사용자는 이 웹사이트에 접근하기 위해 구글 크롬, 엣지, 웨일 등을 사용하는 형식이다. 웹 사이트의 화면을 구성하는 데엔 세 가지 언어(HTML, CSS, JavaScript)가 필요하다. 프론트엔드 개발은 주로 웹 및 모바일 ..