코딩 개발일지

기초 - JS파일과 css 파일을 html과 연결 본문

AI 본 교육/AI 8주차

기초 - JS파일과 css 파일을 html과 연결

호기호 2023. 10. 2. 20:54

index.html 과 index.js 파일을 연결하고 싶을 때,

index.html에 script 태그로 연결시켜주면 된다.

    <script src="index.js"></script>

3번째꺼 선택 ㄱㄱ

이 script 의 위치가 중요한데, head 가장 아래 넣어기도 하고, body 가장 아래 넣어주기도 한다

 

body 가장 아래 넣어주는게 좋다. (추천) 왜냐하면, html.index 파일에서 위에서부터 읽어오기때문에, body부분에서 index.js 를 사용할 수 있기 때문이다.

css 파일을 따로 만들어서 관리할 수 있는데, link:css 태그를 <head>안에서 <title> 전에 넣어주면 된다.

 

const mainHeader = document.querySelector('h1')
const myList = document.getElementById('my-list')
const listItem = document.getElementsByClassName('list-item')

index.js 에서 이렇게 작성을 해서 html 에서 특정한 부분을 가져올 수 있다.

 

첫 번째 : <h1>태그 가져오기 (중복되면, 맨위에꺼만 가져와서 별로임. 잘안씀)

두 번째 : <?>태그 안에 id=my-list 인 것을 가져오기 (Element 뒤에 s 붙이지 말기. 오타주의)

세 번째 : <?>태그 안에 class 명이 list-item 인 것을 가져오기 (Elements 뒤에 s 붙여야함. 오타주의)

 

근데 id랑 class 차이는 뭐임?

>>> id는 html 파일 내에서 단 한개만 존재 가능하고, class는 여러번 쓸 수 있음

html에서 뭔가를 만들었으면, [ ex) button ]항상 console.log 로 해당 버튼이 실행되는지 먼저 확인하기 !!!

console.log는 습관화 하는게 좋다. 많이 쓰자

저작자표시

'AI 본 교육 > AI 8주차' 카테고리의 다른 글

팀프로젝트 (VSCode live share)  (0) 2023.10.10
코딩 오류 공유 커뮤니티 와이어프레임 / ERD / API명세  (0) 2023.10.05
test.py / 개인 과제 TypeError 오류 찡찡대기  (3) 2023.09.26
'AI 본 교육/AI 8주차' Related Articles more