헤더 네비게이터 인터렉션 구현하기

0. 개요 해더를 누르면 해당 페이지로 바로 가는 웹 페이지 예시를 만들어 보았습니다 1. HTML 구조 우선 웹 페이지의 기본 구조를 HTML로 작성합니다. 페이지 상단에 네비게이션 바(header)가 위치하고, 이어서 본문(content) 부분으로 나누었습니다. first second third fourth " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스

티스토리 스킨 자작 (0.4v)

드디어 방학을 하고 뭘 할지 고민해봤는데 초심으로 돌아가서 바닐라를 공부하다가 삘이 딱 꽃혀서 블로그 스킨을 만들기로 했다 근데 쉬울줄 알았는데 생각보다 만드는 난이도가 있어서 어려웠다 이 블로그에 바로 적용시키는건 쫌 그런거 같아서 테스트용 블로그를 만들어서 거기서 만들었다 https://sooooooohwan.tistory.com/ 티스토리는 제발 치환자좀 어떻게 해줘

html+css 로 인터랙션 사이드바 만들기

티스토리 스킨을 제작하는데 사이드바와 네비게이션을 어떻게 짜면 좋을까 에대한 디자인적인 아이디어가 없어서 웹사이트를 검색하면서 찾아보는데 어딜가도 내가 원하는 깔끔한 인터랙션을 가진 사이드바가 없어서 내가 직접 만들었다 하루정도 찾아본 결과 해외 사이트에서 책갈피 효과같은 꽤 멋진 인터렉션을 가진 사이트를 찾았는데 보고 이런식으로 만들면 멋질꺼 같아서 바로 만들어 봤다 밑에는 html코드인데 따라 해보기 쉽게 가장 간단한 구성요소로만 만들었고 아래 css는 복잡하니까 나중에 디자인 수정을 쉽게 하기 위해서 위쪽으로 색상코드나 크기등을 변수로 조정할수 있게 만들었다 :root{ /* memu */ /* size */ --memu--width:280px; --memu--interval:40px; /* col..

[장고]구름으로 장고 프로젝트 만들기 - 7. view 설정

시작하기 전에 이전 글들을 보면 파일 이름에 혼동이 있어서 했갈릴까봐 앞으로 djangoproject폴더를 프로젝트, djangoapp1 폴더를 앱1 로 부르도록 하겠다 이번에는 view파일을 수정해서 화면에 보여질것들을 만들어 볼 것 이다 전시간에 우리가 모든 url을 iew를 앱1/views.py에 연결했기때문에 해당 폴더를 수정해서 화면을 구성해볼것이다 #앱1/views.py from django.shortcuts import render from django.http import HttpResponse def index(request): return HttpResponse("안녕 장고.") def appindex(request): return HttpResponse("안녕 장고 앱.") view를..

[장고]구름으로 장고 프로젝트 만들기 - 6. url 설정

그리고 장고에는 url분리라는 개념이 있는데 간단하게 그림으로 설명해보면 아래 그림처럼 프로젝트 폴더에 urls.py에서 각각에 앱들에 urls.py를 연결해주고 연결된 앱 폴더에 urls.py에서 그 앱에 속하는 다른 화면들을 보여주는 식으로 개발 규모가 커져도 각 기능들을 나누어서 편하게 개발할수 있게 해준다 이 기능을 구현하기 위해 djangoproject 폴더 안에 urls.py를 수정해주자 장고에서는 include를 사용해 url분리를 사용할 수 있다 #djangoproject/urls.py from django.contrib import admin from django.urls import path, include # include를 추가해주었다 urlpatterns = [ path('admi..

[장고]구름으로 장고 프로젝트 만들기 - 5. 장고 앱 만들기

하나의 장고 프로젝트는 하나의 웹을 가르키고 그 프로젝트 안에 여러 기능들을 앱이라는 형태로 편하게 관리할 수 있다 가장 먼저 장고 앱을 생성해 주자 (djangoapp1 이라는 앱을 생성했다) # 장고 앱 만들기 django-admin startapp djangoapp1 이렇게 만들어진 장고 앱에는 여러 파일들이 존재하는데 그중 우리가 자주 살펴볼 파일들은 models.py, views.py, 그리고 urls.py 파일인데 urls.py는 기본적으로 생성되지 않음으로 여기에 새로운 파일을 만들어 주자 각 파일들에 대해 간단하게 설명하면 models.py는 앞으로 다룰 장고에 모델을 다루는 파일, views.py는 화면에 보일 것 들을 정해주는 파일, urls.py는 프로젝트를 실행시켰을때 어떤 url주..