[JS] 복습 시작! ✨ (HTML 조작, 셀렉터, 메소드, 주석 처리)

다른 프로젝트를 하거나 공부를 하다 보니.. 아무래도 JS가 많이 부족한 것 같아서, 기본 문법부터 다시 차근차근 공부해보고자 한다.

다른 강의들이 잘 와닿지 않던 차에 코딩애플 영상이 괜찮아 보여 이를 바탕으로 공부한 내용을 기록해본다.

 

(다만 다소 이론 부분이 부족할수도 있겠다는 생각이 들어서, 코어 자바스크립트, 솔로런, 프리코드캠프 등의 여러 플랫폼에서 추가 학습을 해나갈 생각이다.)

---

 

개발환경 세팅

1. 에디터 설치: Brackets, VSCode 등
2. 코드 짤 작업폴더를 바탕화면 아무데나 생성
3. 파일 - 폴더열기 등으로 작업할 폴더 오픈 
4. 좌측에서 index.html 파일 만들고 코딩 시작
5. html 파일 미리보기:
   (VSC 기준) Extensions 메뉴 → live server 부가기능 설치 → html 파일 우클릭 - live server
   
   

 

JS로 HTML 조작하기

1. JS는 HTML 파일 안에 몰래 숨어서 "HTML 조작과 변경" 을 담당하는 언어이다
   → JS 코드를 잘 짜면 HTML을 원하는 대로 조작 가능
   
   
2. 이때 아래와 같은 기능을 개발할 수 있음
   - 탭, 모달 등 웹페이지 UI 생성
   - 유저가 입력한 데이터 검사
   - 유저가 버튼을 누를 경우 서버로 데이터 요청
   
   
3. 조작 방법: <script> 태그 안에 JS 코드 작성하기 
   
   document.getElementById('hello').innerHTML = '안녕';
   → 웹문서의 id="hello"인 것을 찾아서, 그 안의 HTML에 '안녕'을 집어넣어라!
   
   document.getElementById('???').??? = '???';
   → ??? 부분만 맘대로 바꿔주면 HTML을 자유롭게 변경 및 조작 가능
   → ex) document.getElementById('???').src = 'profile.jpg';
   → ex) document.getElementById('???').style.color = 'red';
   
   - document: HTML 웹문서
   - 마침표: ~의
   - getElementById('홍길동'): 아이디가 '홍길동'인 html 요소(element)를 찾아줘!
   - innerHTML: 내부 HTML
   - =: 프로그래밍에서 등호는 오른쪽 내용을 왼쪽에 대입하라는 뜻
   - '하잉' "하잉": 큰따옴표, 작은따옴표 안에 담겨 있으면 항상 문자임
   
   

<h1 id="hello">안녕하세요</h1>

<script>
	document.getElementById('hello').innerHTML = '안녕';
</script>

 

 

 

문제 1.

문제) 하단 <h1> 내부의 글자를 'JS 고수예요'로 바꾸고 싶다면?

<h1 id="hi">JS 초보예요</h1>

풀이) innerHTML = '내용'

<h1 id="hi">JS 초보예요</h1>

<script>
	document.getElementById('hi').innerHTML = 'JS 고수예요';
</script>

 

문제 2.

문제) <h1> 내부의 글자를 초록색으로 바꾸고 싶다면?

풀이) style.color = 'green'

<h1 id="hi">JS 초보예요</h1>
<script>
	document.getElementById('hi').style.color = 'green';
</script>

 

문제 3.

문제) <h1> 내부의 글자 사이즈를 16px로 변경하고 싶다면?

풀이) style.fontSize = '16px'

<h1 id="hi">JS 초보예요</h1>
<script>
	document.getElementById('hi').style.fontSize = '16px';
</script>

 

참고

• .getElementById()
  - 셀렉터라고 부름
  - html 요소를 찾기 위해 사용
  
  
• .innerHTML / .style / .color  등등.. 
  - 메소드(또는 함수) 라고 부름
  - html 요소의 어떤 속성을 변경할지 결정하기 위해 사용
  
  
• JS에서 주석 처리하는 법
  - 앞에 // 붙이기

 

 

 

---

TIL 끝!