1. Flask로 여러개의 html 연결
- 팀 소개 페이지를 만드는 미니 프로젝트를 진행
- 메뉴 리스트를 만들고 각 메뉴 별 a태그를 통해 서브페이지 html로 이동이 가능하게 구현하던 중
클릭 시 새 팝업창이 뜨게 끔 연결하려고 함
발생오류 : 404 not found error
<li>
<a class="menulink" href="message.html"
onclick="window.open(this.href, '_blank', 'width=100', 'height=100');
return false;">응원 메세지
</a>
</li>- a태그에서 html 파일명으로 직접 링크를 걸 경우 localhost:5500에서는 정상 작동이 되지만 :5500에서는 404 error가 발생
원인 1
@app.route('/')
def home():
return render_template('index.html')- api를 추가하지 않아 템플릿을 읽어올 수 없음
@app.route('/')
def home():
return render_template('index.html')
@app.route('/message')
def message():
return render_template('message.html')- 팝업창에 나타날 서브 html용 api 추가
원인 2
<li>
<a class="menulink" href="message"
onclick="window.open(this.href, '_blank', 'width=100', 'height=100');
return false;">응원 메세지
</a>
</li>- a 태그에 파일명으로 입력할 경우 인식을 못하고 로컬에 있는 파일로 접속하려고 하여 flask에서 동작 될 서버 url의 리소스 경로로 지정
- 정상작동 확인
발생오류: 팝업 창 size 조절이 안되는 현상
<li>
<a class="menulink" href="message"
onclick="window.open(this.href, '_blank', 'width=100, height=100'); return false;">응원 메세지
</a>
</li>- 서브 html message.html 작동 시 팝업 창 사이즈가 width와 height 값을 이것 저것 넣어봐도 변경이 안되는 현상이 발견되었다. 코드가 작동하지 않는 것으로 보여 또 다시 구글링..
<li>
<a class="menulink" href="message"
onclick="window.open(this.href, '_blank', 'resizable=yes, width=500, height=500'); return false;">응원 메세지
</a>
</li>resizable=yes를 추가하니 사이즈가 정상 작동
2. margin collapse
마진상쇄가 일어나는 이유 3가지
- 인접 형제 박스 간 상하 마진이 겹칠 때 :
겹처진 마진 값 중 더 큰 마진 값으로 상쇄 - 빈 요소의 상하 마진이 겹칠 때
1) height / min-height / padding / border 값이 없을 때
2) 내부에 Inline 콘텐츠가 존재하지 않는 요소 - 부모 박스와 첫 번째(마지막) 자식 박스의 상·하단 마진이 겹칠 때
부모와 첫 번째(마지막) 자식 사이에 inline 콘텐츠가 없거나, 상·하단에 padding 또는 border 값을 주지 않았다면 마진이 겹친다. 이때, 자식 요소의 마진값의 유무와 상관없이 상쇄된 마진은 부모 박스의 바깥으로만 렌더링 된다
🙏 오늘 하루 정리🙏
- Organization repository를 생성 후 미니프로젝트 시작
master branch와 sub branch 두개를 생성하여 각자 작업 후 하루가 끝나기 전에 merge 진행예정! - 어제 작성한 S.A. 문서를 베이스로 역할 분담 후 작업 진행
디테일하게 역할을 분담하고 싶었으나 팀원이 부족하여 맨파워가 나오지 않을 것 같아 총 3개의 페이지를 각각 하나씩 맡아 진행하기로 결정
강의 없이 진행하려고 하니 시행착오도 너무 많았고 원하는대로 구현이 되지 않아 답답함도 많이 느꼈지만 하나하나 구글링으로 찾아가면서 문제를 해결해나가는 과정이 재밌게 느껴진다.
눈으로 보기엔 얼추 와이어프레임과 비슷하게 만들어지는 것 같은데 제대로 만들고 있는 건가 싶기도 하지만...
어느정도 개발과 익숙해지면 리팩토링을 진행해서 코드를 좀 더 효율적이게 작성해보는 것이 목표!
코린이