01. 웹페이지 제작 (2) 파비콘 제작, FastAPI 디렉토리 구조, 메인페이지
01. 홈페이지 제작 (1) 가비아 도메인 구입, 파이썬 컨테이너 호스팅보통의 날들 01. 진로에 대한 고민 취업을 하면 진로에 대한 고민은 안 할 줄 알았다. 웬 걸 취준 전보다 더 많아졌다.연구
yondoi.tistory.com
회사 일과 개인 공부로 시간이 좀처럼 나지 않아서 계획했던 일이 좀 더디게 진행되고 있다. 최근엔 SQLD에 합격했다. 하나씩 늘어가는 자격증을 보면 내심 뿌듯하다. 각설하고, 지난 글에 이어 제작 중인 웹페이지는 현재 아래와 같아졌다.
<2025. 04. 02 >
웹페이지는 네비게이션 바를 수정 중에 있다. 세부사항을 이것 저것 적으면서 글을 적으려고 했는데, 시간이 넉넉치 못한 관계로 차라리 릴리즈 노트 형식으로 짧막하게 어떤 점들이 변화했고 수정해야할 점과 만약 수정된 점이 있다면 어떤 점을 신경써서 수정하려고 했는지를 중점적으로 작성하고자 한다. 형식은 편한 쪽으로 계속 변할 수도..?
<네비게이션 바>
1. 지금은 네비 바를 상단에 고정을 안 해둬서 스크롤을 하면 같이 움직이는 상태다.
2. 원래 계획은 아래 처럼 네비 바를 중앙 배치하고 백그라운드도 둥근 모양으로 배치하고자 했는데, 1차적으로는 위치를 잡는 것에 먼저 신경을 쓰기로 했다. Figma를 더 잘 활용하면 웹 퍼블리싱까지도 CSS코드를 뽑아서 할 수 있다곤 하는데 초기 UI/UX 기획용 외에는 사용해보지 않아서 모르겠다.
3. 마우스가 Hover된 곳은 색상이 변하도록 설정했다.
4. 상단 네비 바의 ABOUT, 아이디 찾기, 비밀번호 찾기, 회원가입, 게스트로 로그인은 클릭 시 다른 페이지로 이동되도록 설정했다.
아직은 아무것도 설정되지 않은 페이지를 접할 수 있다.
app/
├── main.py
├── database.py
├── controller
├── static
│ ├── css
│ ├── js
│ └── img
├── templates
│ ├── index.html
│ └── page.html
└── models
templates 디렉토리에 생성하고자 하는 페이지들 html을 추가하고, main.py에서 라우팅을 해준다. 각 페이지들에 대한 라우터를 추가하고, 서버를 재시작해야 해당 페이지에 접속이 가능하다는 사실을 깨달았다.
@app.get("/page", response_class=HTMLResponse)
async def page(request: Request):
return templates.TemplateResponse("page.html", {"request": request})
이 문제로 1시간동안 폭풍 서칭을 했는데 아주 단순한 문제였던 것 ...
추가로 각 page에 대한 코드를 작성할 때도 뻘짓했던 게 하나 있는데, vscode에서는 html 작성 시
이 부분만 잘 작성해주면 문제가 없었는데 winSCP에서는 기본 인코딩 값을 다른 걸로 설정해둬서 왜 인코딩이 안 되는지 한참 헤맸다. 인코딩이 안 되는 바람에 글자가 깨져서 인지 404페이지만 나왔다. 인코딩의 중요성을 깨달은 날이었다.
현재는 이 문제까지 해결해 둔 상태!
<릴리즈 노트>
아직 릴리즈를 했다고 보긴 어렵긴 하지만 .. 릴리즈 노트 형식을 차용해 웹페이지를 관리해 볼 예정 :)
'야매코딩 > 웹페이지제작' 카테고리의 다른 글
| 01. 웹페이지 제작 (2) 파비콘 제작, FastAPI 디렉토리 구조, 메인페이지 (0) | 2025.03.21 |
|---|---|
| 01. 웹페이지 제작 (1) 가비아 도메인 구입, 파이썬 컨테이너 호스팅 (1) | 2025.03.21 |
댓글