포트폴리오

val()은 선택한 제이쿼리에서 메서드중 하나로 선택한 요소의 값을 가져오는 역할을 합니다.

이번에도 똑같이 

영화페이지에서 영화 이미지주소와 제목 별점을 입력하면 이미지가 출력되는 스크립트를 짜봅니다. 위와 같습니다.

우리는 태극기휘날리며 라는 이미지 주소를 가지고있고, input창에 입력후에 검색버튼을 누르면 카드가 출력이 될것입니다.

주의사항은 우리는 html의 input 안에 id값을 넣어주어야 합니다. 그래야 input값을 아이디값으로 해야 스크립트에서

변수명에 담을수있기 때문이죠.

함수로 호출하면서 제이쿼리 메서드 $('#인풋값').val()선택한 요소의 값을 변수명을 지정해줍니다.

그리고 html창을 출력하고 싶어 temp_html함수명을 입력해주고 백스탭을 눌러 html에 있는 부트스트랩코드 일부를 가져옵니다.

마지막에 append 앞으로 가져오기를 눌러 적절한 아이디명을 넣어서 추가해줍니다.

라고 되어있는곳에 id값을 넣어줍니다. card라고 

$('#card').append(temp_html) 를 추가해줍니다. 

공부를 더 해봐야겠지만, 제이쿼리의 일부를 배웠지만 제이쿼리 메서드 val() 함수를 배운것이 너무재밌었다. 

선택한 요소를 가져오는것,

반이상은 배운기분이였다.  

버튼을 클릭해서 title명을 바꿔주는것을 할것이다.

일단 function 함수명() 을 입력해줄것인데,

버튼에다가 onclick='함수명()' 을 넣어준다.

html 에서 id값을 입력해준다. 나는 h1에 있는 킹덤에 id값을 title로 지정을 해주었다.

바로 script 있는곳으로 들어가서 제이쿼리 함수를 입력해줍니다.

h1에 있는 아이디명 title에서 텍스트를 쥬라기월드로 입력합니다.

를 호출할수있다. 그러면 

텍스트가 바뀐것을 확인할 수 있다.

------------

함수 호출하기 제이쿼리 명으로 함수를 호출할수있다.

버튼에 onclick='함수명'을 입력해줍니다. 

그리고 스크립에서 함수 function을 불러와서 리스트를 만들어 감이라는 글자를 꺼내볼게요.

< script>

function checkResult(){

 let a = ['사과','배','감','귤']

$('#q2').text(a[2]);

}

</script>

웹 화면에서는 결과확인하기 버튼눌러서 리스트에 감이라는 글자가 뜹니다.

딕셔너리로 철수불러오기, 리스트처럼 0번째항으로 되어있지만 {key:value,key:value} 값으로 되어진 딕셔너리는 0번째 항으로 인식이 되어진다. 마치 리스트에 글자나, 숫자의 하나의 항처럼 부르듯이말이다. 

딕셔너리는 묶음을 하나로 통칭해서 부르기때문에 묶여진거라고 보면된다,

 ex) {'name':'영수','age':30} 이 하나의 항이라고 보면된다. 

철수 불러오기 성공!!

우리는 보통 중앙정렬을 할때 div값을 주고 전체를 감싼다음에 css에다가 width 값을 준다음에 margin: auto 0 auto 0 이런식으로 주는 경우가 많다.

하지만 width 값을 주지않고 내용물을 변경하는 방법이있다고 한다.

딱 4가지만 외우면된다.

display:flex;

flex-direction:column;( 세로정렬을 시켜주기 위해서) 

align-items:center;

justify-content:center;

을 하면 내용물들이

가운데로 모이게된다.

 만약 flex-direction:row; 로 하게 되면 가로로 정렬이 되버리게 된다.

-----------------------------------------------------------------------------------------------------------------------------------

백그라운드에 이미지 추가까지 하는방법을 알려드리겠습니다.

백그라운드의 클래스를 입혔던 .mytitle 에다가

background:url();

background-size:cover;

background-position:center; 을 입히게 되면. 

백그라운드에 추출된 이미지들이 나오게됩니다. 너무재밌지않나요?