웹개발 종합반 2주차 - 1 공부일지

오늘 배운 것

Javascript 복습
jQuery

Javascript 복습

%는 나누기의 나머지를 구하는 걸 의미한다.
ex) 17 % 2 = 15

==은 조건문에서 우리가 아는 =과 의미가 같다.

<script>
let count = 0  // count = 0 부터
function hey(){
	count += 1  //hey라는 함수는 count가 1씩 증가하는 것이라고 정의 
    if(count % 2 == 0) {    //count를 2로 나누었을 때 나머지가 0이라면(짝수라면)
     	alert('짝수입니다!')} //짝수입니다라고 창으로 띄워줘
        else{alert('홀수입니다!')} //나머지가 0이 아닐 때(홀수일 때) 홀수입니다라고 창으로 띄워줘
        }
 </script>
    

jQuery

jQuery란?
CSS의 부트스트랩처럼 미리 만들어놓은 Javascript를 가져다 쓸 수 있는 것
Javascript로 만들면 복잡한 코드가 jQuery를 통해 간결해질 수 있다
jQuery를 쓰려면 script에 미리 jquery 코드를 입력해야한다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jquery에서는 html의 class가 id이다.

$('#url').val('입력을 하고 싶다') //val = value = 값
> s.fn.init [input#url.form-control]
// id = url에 jQuery로 값을 입력하고 싶은데 입력하고 싶은 값은 '입력을 하고 싶다'야

입력된 값을 홍길동으로 변경

$('#url').val() //url에 지금 입력된 value를 나타내줘
> '홍길동'

let temp_html = `<button>나는 버튼이다</button>`
//<button>나는 버튼이다</button>라는 문자열을 temp_html이라고 정의

$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4] //card-box라는 id, class는 row row-cols-1 row-cols-md-4 g-4인 div에 temp_html을 html화 시켜서 넣었다는 의미 

| 참고 | card-box는 이 부분을 의미

card-box의 코드

저 temp_html을 계속 복사해서 넣으면

let temp_html = `<button>나는 버튼이다</button>`
>undefined
$('#cards-box').append(temp_html)
>S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]
$('#cards-box').append(temp_html)
>S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]
$('#cards-box').append(temp_html)
>S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]
$('#cards-box').append(temp_html)
>S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]

버튼 4개가 입력된다

저 button대신에 card를 넣어서 같은 방식으로 하면
카드가 하나씩 붙는다.

let temp_html = `<div class="col">
            <div class="card">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">여기에 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 내용이 들어가지요.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">여기에 코멘트가 들어갑니다</p>
                </div>`//아까 그 button자리에 card를 넣었다
undefined
$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]

---

이제 본격적으로 Javascript와 jQuery 가지고 하니 홈페이지를 꾸미는 느낌이 난다

약간 좀 복잡해서 하나 배울 때 마다 다시 해보면 좀 헤매는 감이 없지 않지만 꾸준히 연습해서 내 홈페이지에도 얼른 적용해보고 싶다. 특히 카드 하나씩 붙는거 저거 진짜 좋은 것 같다!!