복습일지 02

나홀로 링크 메모장의 외관과 JQuery 부분까지 완성하였다.

 

 

 

외관에 관한 리뷰부터 하자면, 카드 정렬하는데 넘모 짜증났다!

줄마다 몇개씩 정렬하는 방법은 알겠는데 정렬한 카드뭉치를 가운데로 보내고 싶은데 뭔가 살짝 어긋나있어!!!

 

정렬은 float=left; 를 사용하였고, 카드 하나가 전체 중 33%(여백포함) 면적을 차지하게 하여 한 줄에 3개씩 출력 될 수 있게 한 것 같다. (나도 확신이 안섬..)

 

20%로 하믄 4~5개도 가능하다는고 아닐까!

.box_card {
	width: 100%;
	margin: auto auto auto 5px;
/*  총 크기와 margin 값을 잘 계산해서 때려박는다!  */
}

.card {
	float:left;
	width: 30%;
	border: 1px solid lightgray;
	margin-left: 20px;
	margin-bottom: 10px;
}
.card-text{
	padding: 20px 20px 5px 20px;
}

이렇게 저렇게 값을 넣어보다 일단 가운데로 보내긴 했는데, 이거 더 좋은 방법 없는지 너무 궁금하다.

아는 사람이 있다면 제발 알려죠!!

 

모양을 완성하고 나서 JQuery를 작성해줬는데, 큰 어려움 없이 쉽게 작성했다. (기능이 얼마없다.)

    <script>
        function posting_box(){
            if($(`#posting_box`).css("display") == "none"){
                $(`#posting_bt`).text('포스팅박스 닫기')
                $(`#posting_box`).show();
            }else{
                $(`#posting_bt`).text('포스팅박스 열기')
                $(`#posting_box`).hide();
            }
        }

        function post() {
            if ($(`#article_input`).val() == '' && $(`#comment_input`).val() == ''){
                alert('입력된 내용이 없습니다.')
            }else if ($(`#article_input`).val() == ''){
                alert('아티클 URL을 작성해주세요.')
            }else if ($(`#comment_input`).val() == ''){
                alert('코멘트를 작성해주세요.')
            }else{
                alert('작성이 완료되었습니다.')
            }
        }
    </script>

기능이라곤 이게 전부다. 포스트박스를 열고 닫을 수 있고, 내용을 포스팅 할 때 조건에 따라 경고문이 등장하게 작성하였다.

 

값이 없는 경우(NULL) 을 ='' 으로 작성해야하는데 none 부터 null도 넣어보고 아주 난리도 아니였음 역시

아직 아가 개발자인듯 ㅎㅅㅎ

 

쿼리에선 else if가 사용이 가능하다는 것을 기억해두자!