mini_project(movie)_23.05.08

주민·2023년 5월 9일
0

TIL

목록 보기
2/84

2023.05.08

2023.05.09

호버링

* 호버링 외 코드는 기재X
<script>
.myposter-box {
 position: relative; // 박스 위에 다른 글씨나 이미지가 올라갈 수 있게 함
}

.myposter-image {
display: block; // 
}

.textbox { // 이미지 위에 올라가는 텍스트 박스 조건
position: absolute; // 겹치게 가능하게 만듦
// myposter-box 내의 textbox 위치
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;

opacity: 0; // 투명도(투명도 없음, 본이미지와 동일)
transition: .5s ease; // 적용속도
background-color: black; // 덮일 색깔
display: flex; // 위치를 유동적으로 조정할 수 있게 함
flex-direction: column; // 위 -> 아래 순으로 출력
align-items: center; // 좌우 가운데
justify-content: center; // 상하 가운데
}

// 마우스 오버시 textbox, 투명도 0.7 실행
.myposter-box:hover .textbox {
opacity: 0.7;
}        

.text { // textbox 위에 출력되는 텍스트 조건
// textbox 안에 들어간 class이기 때문에 hover 진행 시 같이 됨
color: white;
font-size: 25px;
position: absolute; // 겹치기
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

</script>

<body>
        <div class="myposter-box">
            <img src="https://img1.daumcdn.net/thumb/C408x596/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fmovie%2F8876ecefc861afc397a9943ab781bdf0316c4983"
                class="myposter-image" alt="영화 포스터 - 이미지">
            <div class="textbox">
                <div class="text">영화제목</div>
                <button onclick="abc()" type="button">자세히 보기</button>
            </div>    
        </div>
</body>

2023.05.10

flask로 여러 웹페이지 연결

https://e-hyun.tistory.com/4

  • 기존에는 시작이 되는 페이지 하나만 연결하였으나 타 페이지로 이동하는 경우 a href 등으로 명령어 불가함
@app.py
#대문 페이지
@app.route('/')
def home():
   return render_template('index.html')

# 이동한 페이지
@app.route('/title')
def getmMovie():
   return render_template('main.html')
   
@index.html
// 기존에 URL이 들어갔던 부분을 @app.route() 안에 있는 /title로 가져옴
<body>
<a href="/title"><button type="button" class="centerbutton">글 보기</button></a>
</body>
  • HTML 여러파일 합치기
    -> html 파일도 상속이 가능
    -> main으로 쓰는 페이지를 상위로 두고 외 페이지를 상속으로 지정
#상위
{% block content %}
{% endblock %}

# 상속 받는 파일
{% extends '상위파일명(main.html)' %}
{% block content %}
{% endblock %}

-> 결과
{% extends '상위파일명(main.html)' %} 입력한 위치에 main.html의 내용이 나옴

{% block content %} {% endblock %}
-> 위 2개는 다른 파일과 연결할 수 있는 코드
{% extends '상위파일명(main.html)' %}
-> 상속 받는 코드

2023.05.11

팝업 띄우기

<style>
.popup {
    display: none; // 화면에 표시 되지 않게 함
    position: fixed; // 화면에 고정시켜 스크롤로부터 자유롭게
	// 위치 및 크기 조정
    left: 50%;
    top: 50%;
    width: 700px;
    margin-left: -350px;
    height: 360px;
    margin-top: -180px;
    z-index: 1000;
    padding: 20px;
    background: white;
    border: 1px solid #D1D8DD;
    box-shadow: 0 0 6px 1px rgb(0 0 0 / 30%);
}

</style>

<script>
function toggleBtn() {
	// popup 은 변수명
    // post-box > id 명_해당 id가 들어가있는 태그에 적용됨
    // document.getElementById : 괄호 안에 들어있는 id의 값을 찾아 변수인 popup에 리턴함
    const popup = document.getElementById('post-box');

	// 창은 기본적으로 계속 있는 상태이나 안보이게 만들어 논거임
	// 만약 style에 있는 popup class_display의 값이 none이 아니라면(창이 보인다면) none으로 만들어주고
    // none으로 되어 있다면 block으로(창으로 표시하도록) 바꿔라
    if (popup.style.display !== 'none') {
        popup.style.display = 'none'
    }
    else {
        popup.style.display = 'block'
    }
}

// 팝업창 여닫는 용
function open_box() {
    $('#post-box').show()

}
function close_box() {
    $('#post-box').hide()
}
</script>

<html>
<body>
// 팝업 버튼/toggleBtn() 으로 띄움
 <div class="add_movie">
        <button type="button" class="mybtn" onclick="toggleBtn()">+영화 </br>추가하기</button>
    </div>

// 팝업 창 내용
// 보여주지 않음이 들어간 popup class를 넣고 script에 toggleBtn에서 찾기 위한 id(post-box)를 가져옴
<div class="popup" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화 URL</label>
    </div>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">영화 제목</label>
    </div>
    <div class="popupbtns">
        <button onclick="posting()" type="button" class="btn btn-dark">기록하기</button>
        <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>
</body>
</html>

  • 팝업 2개 이상 띄우기
    -> 동일한 내용으로 팝업을 띄우는 경우 아래와 같이 함수를 다시 만들 필요 없이 기존 함수를 그대로 가져다 쓰면됨, 하단에 팝업 내용도 굳이 입력할 필요 없음

    -> 다른 내용 팝업 2개 이상 띄우기
    -> id는 하나에만 적용 가능한 값이기 때문에 팝업 별로 id가 필요
    -> id를 하나 더 만들고(post-box2) id가 연결되어 있는 script는 새로 만들어야 함

<style>
popup은 그대로 사용
</style>

<script>
//id명과 함수명만 변경함
function toggleBtn2() {
    const popup = document.getElementById('post-box2');

    if (popup.style.display !== 'none') {
        popup.style.display = 'none'
    }
    else {
        popup.style.display = 'block'
    }
}

// 팝업창 여닫는 용
function open_box2() {
    $('#post-box2').show()

}
function close_box2() {
    $('#post-box2').hide()
}
</script>

// id를 변경한 함수를 쓰고 팝업으로 띄울 내용을 바꾸면 새로운 팝업 작업 완료
<html>
<body>
<div class="textbox">
	<div class="text">영화제목</div>
    <button onclick="toggleBtn2()" type="button">자세히 보기</button>
</div>
<div class="popup" id="post-box2">
        <div class="full">
            <div id="screen1">
                <img src="(이미지 URL)">
            </div>
            <div class="screen2">
                <div id="screen2-1">
                    <h3>영화내용1</h3>
                    <br>
                    <h3>영화내용2</h3>
                </div>
                <div class="screen2-2">
                    <h4>댓글</h4>
                    <input id="screen_size" type="text" value="댓글을 남겨주세요">
                </div>
            </div>
        </div>
        <div class="popupbtns2">
            <button onclick="posting()" type="button" class="btn btn-dark">올리기</button>
            <button onclick="close_box2()" type="button" class="btn btn-outline-dark">닫기</button>
        </div>
    </div>
</div>
</body>
</html>
profile
주민
이전 포스트

mini_project(member)_ 23.05.15 ~23.05.19

다음 포스트

TIL)프로그래밍 기초_23.05.22

0개의 댓글

관련 채용 정보