STUDY/진짜 웹 개발로 배우는 실용 JS
1-1강 : 셀렉터 selector
myejinni
2022. 5. 2. 23:47
자바스크립트 사용처
-웹서버
-모바일앱
-머신러닝
but 원조는 웹개발
웹환경에서 JS의 목적=HTML 조작과 변경!
처음 배울거: HTML 조작
1. ALERT 창 띄우고 닫기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2 id="hello">안녕하세요</h2>
<h2 id="hi">올때메로나</h2>
<script>
document.getElementById('hello').innerHTML='안녕';
//웹문서 ~의 id hello인 HTML 요소 가져와 내부글자
//문서 안에 있는 id hello인것을 가져오고 안녕으로 가져와!
//그냥 외워
//document.getElementById('???').???='???';
//물음표 부분 잘 바꾸기가 관건
document.getElementById('hi').innerHTML='올때바밤바';
document.getElementById('hi').style.color='brown';
// 셀렉터
</script>
</body>
</html>
1. 바꾸고 싶은 HTML 요소의 ID 적기
2. 뭐 바꿀지 뒤에 적기
ex. innerHTML
document.getElementById('???').???='???';
물음표 부분 잘 바꾸기가 관건 <- 구글 검색필요
프로그래밍=컴퓨터에게 일 시키기(노예에게 명령하듯이)
* 정확히 명령해야 알아들음!
ex. id=hello인 HTML 요소를 안녕으로 바꿔

-오늘의 숙제-
Q. 이 글자 사이즈를 30px로 바꾸려면?
hi ID의 style.fontSize='30px' 코드를 추가적으로 입력.
폰트 크기를 지정하지 않은 안녕과 폰트 사이즈를 30PX로 지정한 올때바밤바의 차이를 확인 가능!