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로 지정한 올때바밤바의 차이를 확인 가능!