국비 26일차

JAY·2022년 10월 31일

국비 공부

목록 보기

26/86

Git

Git
git init 하고난 후에 바로
.gitignore 넣는다!!

<.gitignore>

.vscode/
data/ => 실전에서는 여기서 DB 정보들이 들어가 있을 것
data. => data로 시작하는 이름들 다 빼줘(data라는 이름을 가진 모든 확장자들)
db_.*

db관련 소스는 접두어 db_ 처리함 => 제작노트에도 적어놓는다 (나중에...)

*.pdf
~ 그 이하는 커스터마이징 ~

자바스크립트

제이쿼리

<1> 자바스크립트 내부에서만 css 할 때의 best

<script>
$(function(){
  const bodyStyle = {
  'background-color':'red',
  'color':'white',
  }

  $("body").css(bodyStyle); // 모든 포맷은 json으로 만든다

});
</script>

<2> 유지/보수/협업 시 best

<script>
.bodyStyle {
  background-color: red;
  color: white;
}

$(function(){
  $("body").addClass("bodyStyle");

});
</script>

.hasClass();
if문 조건에 쓰임 => 가지고 있느냐/아니냐 => true/false 값 도출시킴

<script>
$(function(){
  $("body.subpage").addClass("bodyStyle");

});
</script>

=> <body class="subpage bodyStyle"></body>

JS & jQuery 비교

`$('body')` = `document.body`

객체형식으로 document 안의 body

document = {
body
}

$('body').addClass('subpage')

document.body.classList.add('subpage')
document.body.classList += 'subpage' => -= 는 없음!! string이니깐

$('body').removeClass('subpage')

document.body.classList.remove('subpage')

=> #btn 이라는 객체를 클릭했을 때 body에 class 'act' 추가되도록
<script>

$(document).ready(function(){
  $('#btn').click(function(){
      $('body').addClass('act');
  	});
	});
}

</script>

~~window.onload = function(){~~

~~document.querySelector('#btn').onClick = function(){~~
~~document.body.classList.add('act');~~
};
~~그냥 모르고 써봤는데 맞는지 틀린지 모름~~

"빠른 디지털 사후관리를 위한 html5 data 옵션 활용"

버튼으로 배경색 바뀌게 하기

버튼 2개 제작

body 위에 css 클래스를 만든 후 .addClass();, .removeClass();를 사용하여 해보았다.

두 개까지는 그렇다쳐도
만약 버튼이 더 늘어나야 한다면 계속 jQuery 식을 복붙하기에는 한계가 있다

중간 과정들

data 옵션은 html5에서만 가능하다고 한다

.html(); 메서드와 data 옵션을 이용하여 버튼에 data-color 값이 들어가도록 했다

.addClass();를 빼고 .css();에 data('color')를 넣어주었다
css 공통 클래스의 제작 없이, jQuery의 터치 없이 html5 수정만으로 변화를 줄 수 있다!!

상수 oribg를 만들고 맨 위로 올려 처음 열었을 때의 css 배경색을 저장하도록 했다

jQuery로 짜놓고 유지보수는 data 옵션에서 하면 되므로 좋은 식
data 옵션은 -뒤에 아무거나 쓴 후 활용이 가능하다

버튼으로 배경 이미지 바뀌게 하기

이미지 넣기

data-title과 data-bgimg이라는 data 옵션을 추가하여
이미지 주소가 포함된 버튼 태그를 세 개 만들었다

<script>
    $('.btns button').click(function(){
      $('body').css('background-image', 'url('+$(this).data('bgimg')+')');
      $('body').css('background-image', `url(${$(this).data('bgimg')})`);
    });
</script>