사전학습 2일 차! 오늘은 학습을 하면서 아는 내용이 많이 나와서 강의를 멈추고 혼자 코드를 짠 뒤 강의를 다시 돌려보면서 내가 짠 코드와 강의에서 설명하는 코드의 내용일 일치하는 만족감에 시간 가는 줄 모르고 들었다. 확실히 공부는 반복학습이 제일 좋은 것 같다.. 오늘은 자바스크립트와 jQuery, fetch에 대한 강의를 들었다. 강의의 내용을 내가 느낀 바로 정리해 보자면, 자바스크립트는 동작 수행 역할을 하는 것, jQuery는 복잡한 코드를 직관적으로 보이도록 만들어주는 것, fetch는 api를 불러와주는 것이라고 정리가 될 것 같다. 오늘도 마찬가지로 헷갈렸던 것과 처음 알았던 것, 자주 쓰일 것 같다고 생각되는 것들을 정리해보고자 한다.
1. jQuery의 텍스트 변경과 css 변경
$('#btnLogin').text('로그인 중입니다...')
$('#btnLogin').css('background-color', 'gray')위의 코드는 기존에 작성되어 있던 html 코드의 텍스트와 css를 수정해주는 코드이다. 특히 아래의 코드를 사용하면 <sytle> 부분에서 사용했던 css의 내용을 수정할 수 있다. 위의 코드는 간단한 수정에 매우 용이할 것으로 보인다.
2. class를 body부분에 붙이지 않아도 style에서 css 적용이 가능
if(gu_mise>=85){
temp_html =` <li class='up'>${gu_name} : ${gu_mise}(${mise})</li>`
} else {
temp_html =` <li>${gu_name} : ${gu_mise}(${mise})</li>`
}처음에는 당연히 class를 <body> 부분에서 붙여야 사용이 가능하다고 생각했었다. 하지만 위의 코드처럼 <script> 부분에서도 사용할 수 있으며, <script> 부분에서 사용한 class 부분을 <style>에서 수정이 가능하다.
3. 이미지 변환 및 텍스트 삽입
$('#moviesPic').attr('src', img)
$('#movieTitle').text(title)
$('#movieComment').text(comment)1번에서 설명한 내용 + attr()과 관련된 코드이며, attr()은 기존에 삽입되어 있던 이미지를 내가 선택한 이미지로 변경할 수 있게 해주는 코드이며, attr('src', '링크')의 형태로 사용할 수 있다.
4. 로딩이 다 되고 파일 오픈
$(document).ready(function () { movie()}이 코드는 웹페이지의 로딩이 다 된 후에 movie() 함수를 실행하는 코드이다. 따라서 <script> 부분의 맨 앞부분에 나와야 하는 코드라고 생각하며, 아마 앞으로 필수적으로 사용해야하는 코드가 아닐까 하는 생각이 든다.
2일차는 강의 내용이 조금 많기는 하지만 강의를 보지 않고도 스스로 할 수 있는 부분이 있어서 재밌게 강의를 수강했던 것 같다. 마지막으로 오늘 클론코딩한 netflix 웹페이지를 올리며, 2일 차 글을 마무리해야겠다.
내가 만든 netflix 웹페이지: https://rladydqls99.github.io/netflix/
넷플릭스 - 따라만들기
오늘의 영화 토르: 러브 앤 썬더 오늘 Top 10 영화 오늘 한국의 추천 영화
rladydqls99.github.io
'[항해99] TIL' 카테고리의 다른 글
| [항해99] 1일차(JavaScript 문법) (0) | 2023.08.14 |
|---|---|
| 1주차 WIL (사전 미니 프로젝트 회고) (0) | 2023.08.11 |
| 항해99 사전학습 4일차(Elastic Beanstalk) (0) | 2023.08.07 |
| 항해99 사전학습 3일차(To-do-list 만들기) (0) | 2023.08.05 |
| 항해99 사전학습 1일차(CSS 기초) (0) | 2023.08.03 |
