CSS5 파이썬 웹 프로그래밍 :: html/CSS 스타일, 소개 페이지 제작(3)_TIL#03 ■ JITHub 개발일지(TIL : Today I Learned) 3일차 □ TIL :: HTML/CSS/Javascript/Jquery/Ajax/Flask/MongoDB/... 1. 회원정보 수정/삭제 기능 구현 (1) 회원정보를 로그인하여 관리하지 않고, 비로그인 방식으로 회원정보를 관리하고자 함 아래와 같이 멤버 등록되어 관리되는 회원 카드는 2열로 나열된다. 각 멤버 사진 아래에는 '정보 수정', '정보 삭제' 버튼을 구성했고 각각 누르면, 아래와 같이 모달 창이 뜨며 패스워드를 요구하고, 유효성 확인 후 DB에서 삭제하는 것이 기능의 목적이다. 모달은 부트스트랩의 소스를 활용했다. 정보 수정 멤버 정보를 수정하시겠습니까? Password 닫기 정보 수정 정보 삭제 그러나 현시점에서는 아직 정보를.. 2022. 8. 31. 파이썬 웹 프로그래밍 :: html/CSS 스타일, 소개 페이지 제작(2)_TIL#02 ■ JITHub 개발일지(TIL : Today I Learned) 2일차 □ TIL :: HTML/CSS/Javascript/Jquery/Ajax/Flask/MongoDB/... 1. 네비게이션바 상단에 위치 하기 (1) 헤더가 될 부분과 네비게이션바를 ... 안쪽에 ... 태그를 만들어 내부에 작성한다. (2) 헤더 제목, 그리고 네비게이션 바가 될 소스를 넣는다. (3) 헤더를 고정하기 위해 style 지정을 한다. 안에 지정. (*참고 : 링크) - header에는 position : fixed; (헤더를 고정하는 역할) - 페이지를 올렸을 때 헤더가 다른화면에 가려지지 않도록 z-index : 1;을 넣어준다 - body에는 padding-top : 000px; (본문이 헤더에 일정부분 가려지므로.. 2022. 8. 30. 파이썬 웹 프로그래밍 :: html/CSS 스타일, 소개 페이지 제작_TIL#01 ■ JITHub 개발일지(TIL : Today I Learned) 1일차 □ TIL :: HTML/CSS/Javascript/Jquery/Ajax/Flask/MongoDB/... 1. Style - background-size 속성별 기능 2. 자주 사용하는 스타일 (1) background * 배경을 어둡게 하고 싶을 때 유용한 code 아래 붉은 부분을 url 앞쪽에 붙여넣어서 사용한다. (2) flex - 내용 가운데 정렬할 때 기본적으로 아래의 코드를 가져와서 사용하면 편하다. 구역 내 요소의 배열(열 방향/행 방향)을 변경시 아래와 같이 flex-direction : column ↔ row 선택하여 사용 (3) 마우스를 위에 올렸을 때 효과 : 클래스명 > button:hover { /// } .. 2022. 8. 29. 파이썬 웹 프로그래밍 :: jQuery, Ajax를 활용한 웹 화면 생성 파이썬 웹 프로그래밍_jQuery, Ajax 웹 화면 생성 들어가면서.. 본 포스팅을 통해 jQuery와 Ajax에 대한 기본 개념을 설명하고자 한다. 1. jQuery · HTML의 요소를 조작하기 위한 JavaScript를 미리 작성해 둔 라이브러리 중 하나 간단한 코드, 브라우저 간 호환성을 개선 //Javascript document.getElementById("element").style.display = "none"; //jQuery로 보다 직관적이고 간단하게 표현 가능 $('#element').hide(); · 사용 전 import가 필요하다 → 홈페이지(*링크)의 jQuery CDN부분 참고 내 생애 최고의 영화들 영화 기록하기 // onclick="open_box()"로 위의 기능과 연결.. 2022. 7. 22. 파이썬 웹 프로그래밍 :: HTML, CSS 기본개념 파이썬 웹 프로그래밍 _ HTML, CSS 기본 개념 들어가면서.. 본 포스팅을 통해 HTML과 CSS를 사용하기 위한 기초지식을 정리하고자 합니다. 1. HTML은 프레임, CSS은 채색 · HTML은 구역과 텍스트를 나타내는 코드, CSS는 구역을 꾸며주는 것 · HTML 내에서도 style 속성으로 꾸미기가 가능하나, 현재는 이를 한데 모아 볼 수 있는 CSS 파일이 생겨남 · HTML 코드 내에 CSS 파일을 불러와서 적용 (CSS는 대부분 웹디자이너나 퍼블리셔에게 의존) 2. HTML의 구조 · HTML은 크게 head와 body로 구성 (1) head : 페이지의 속성정보 (2) body : 페이지의 내용 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2.. 2022. 7. 12. 이전 1 다음 반응형
