jQuery와 인사하기!
자바스크립트는 html을 움직이게 하는 것이었다면, 제이쿼리는 미리 작성된 편리한 자바스크립트 코드이다! 그러므로 시작할 때는 꼭 임포트(Import)를 해줘야 한다. (head에 나 제이쿼리 쓸거야~ 라고 신호를 보내주자)
남이 짜준 예쁜 CSS 코드 모음집 '부트스트랩'과 같은 맥락이다.
아티클 url 부분에 세종대왕을 입력하고, 콘솔창에 이것을 입력하면 '세종대왕' 입력값을 가져온다. 또, val 값을 '장영실'이라고 입력해주면 아티클 url 부분이 장영실이라고 바뀌어 있는 것을 볼 수 있다.
$ ('#article-url').val();
'세종대왕'
따라서 $('#article-url') 까지는 아티클 url 입력창을 지칭하고, 지칭을 할 때 id를 써주면 포인트 아웃이 되어 나오는 것을 알 수 있다! 그리고 id 뒷부분의 .val(); 은, 그 #id를 어떻게 하라는 명령인 것이다.
<div class="posting-box" id="post-box">
<div class="form-group">
<label>아티클 URL</label>
<input type="email" class="form-control" id="article-url" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단코멘트</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
<P> <button type="submit" class="btn btn-primary">기사저장</button></P>
</div>
</div>
먼저 포스팅 박스 div에 id="post-box"를 지정해주고,
콘솔창에서 post-box를 불러오고 .hide()라는 명령을 내렸더니
$('#post-box').hide()
r.fn.init [div#post-box.posting-box]
입력창이 숨겨진 것을 볼 수 있다. 그 반대로 $('#post-box').show() 를 입력하면 다시 보이겠지?
이제는 css값을 불러와보자.
.css('width')를 입력한다면, 현재 포스트 박스의 픽셀이 500이라고 나오고,
이때 .css('width','700px') 이라 명령을 내린다면, 동적으로 500px이던 박스가 700px로 바뀌어있다.
$('#post-box').css('width')
'500px'
$('#post-box').css('width','700px')
r.fn.init [div#post-box.posting-box]
이어서, display 값을 입력하면 block 상태가 나오고, .hide() 명령을 내리면 박스가 숨겨진다. 여기에서 다시 display 값을 입력하면 none 상태가 나온다. 따라서 display가 block이면 보이고, none이면 안보이는 상태라는 것을 알 수 있다.
$('#post-box').css('display')
'block'
$('#post-box').hide()
r.fn.init [div#post-box.posting-box]
$('#post-box').css('display')
'none'기존의 html 문서에서 id="btn-posting-box" 값을 주고, 콘솔창에서 아래와 같은 명령을 내려주면 '포스팅박스 열기' 버튼이 '룰루랄라'로 변경된 것을 볼 수 있다.
이때 .val과 .text의 차이는, .val은 input 박스에만 사용하고, 그 외의 텍스트 변경은 .text로 한다.
$('#btn-posting-box').text('룰루랄라')
r.fn.init [a#btn-posting-box.btn.btn-primary.btn-lg]
이제 기존에 6개 였던 카드컬럼에 카드를 더 추가해보자.
card-columns 부분에 id="cards-box" 값을 주고, let temp_html = ``(이때 백틱은 문자열의 역할을 한다) 을 사용할 것이다.
기존의 html 코드를 백틱 안에 복붙해준다. 그러고, $('#cards-box').append(temp_html) 을 입력해주면 사진과 같이 카드들이 추가되어 붙는 것을 볼 수 있다.
let temp_html = `<div class="card">
<img class="card-img-top"
src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>`
undefined
$('#cards-box').append(temp_html)
r.fn.init [div#cards-box.card-columns]
$('#cards-box').append(temp_html)
r.fn.init [div#cards-box.card-columns]
포스팅박스 열고 닫기 기능을 추가해보자
먼저 포스팅박스가 나와있는지 아닌지 알아보자.
먼저 hey()함수 대신에 onclick="openclose()" 함수를 지정한다.
<div class="jumbotron">
<h1 class="display-4">나홀로 링크 메모장!</h1>
<p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
<hr class="my-4">
<p class="lead">
<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
</p>
</div>앞에서 $('#post-box').css('display')가 박스의 상태를 보여주는 코드라고 했다. 이 코드를 openclose 함수에 추가해준다. 그리고 함수가 입력되었을 때의 상태를 콘솔창에 보이라는 console.log(status); 를 추가해준다.
<script>
function openclose(){
let status = $('#post-box').css('display');
console.log(status);
}
</script>그렇다면 크롬의 콘솔창에 현재상태는 block (보이는) 상태라고 나온다.
포스트박스가 block 상태일때 hide 숨기고, else(블록상태가 아닐때)일때 show 보여지게 하자.
<script>
function openclose(){
let status = $('#post-box').css('display');
if (status == 'block'){
$('#post-box').hide();
} else {
$('#post-box').show();
}
}
</script> 이제 동작에 따라 포스트박스 열기/ 닫기 버튼이 바뀌는 기능을 추가해보자!
<script>
function openclose(){
let status = $('#post-box').css('display');
if (status == 'block'){
$('#post-box').hide();
$('#btn-posting-box').text('포스팅박스 열기');
} else {
$('#post-box').show();
$('#btn-posting-box').text('포스팅박스 닫기');
}
}
</script>post-box를 display 상태로 놓는다. 만약 status가 block일 경우, 박스를 hide 하고, btn-posting-box의 텍스트를 '포스팅박스 열기'로 바꾼다. 만약 그렇지 않으면, post-box를 show 하고 텍스트를 '포스팅박스 닫기'로 바꾼다.
처음부터 포스팅박스가 닫혀져있는 상태를 만들고 싶을 때는?
CSS에 .posting-box class를 불러와서, display: none 상태를 추가해주면, 첫 화면은 포스팅박스가 보이지 않는 상태로 시작하게 된다.
<style>
.posting-box {
width: 500px;
margin: 0px auto 50px auto;
/*margin-bottom: 50px;*/
border: 3px solid black;
border-radius: 30px;
padding: 30px;
display: none
}
</style>