JS, HTML 복습 (메모용)
2021. 8. 9. 17:39ㆍ프론트엔드/HTML, CSS, Javascript
728x90
요새 잡 코리아 보면서 생각이 많다.
나는 이게 경력직인가 아닌가... 웹개발자 3년경력이 맞나...
중고신입으로 들어갈 마음이었지만 신입을 또 안 뽑음...
모르겠다. 그런 고로 프로젝트를 꾸준히 하기로 했다.
이게 좋은 선택일지 아닐지는 일단 무지성으로 열심히 한다음에 생각하자.
어차피 생각이 많아지면 안 하게 되니까.
오늘은 Javascript와 html을 쓰면서 자주 쓸만하지만 구글에 쳐볼만한 코드들을 가져와봤다.
스크립트 import
CSS 파일 import
<head>
...
<link rel="stylesheet" href="popup.css">
...
</head>head 태그 안에 저렇게 넣어준다.
JS import
<script src="popup.js"></script>이거는 head와 body 모두에 넣어도 된다.
하지만 배치하는 위치나 이유는 다른데, 자세한건 다음의 페이지를 보자.
When to use the
새로운 Element 생성하기
우선, 이 두가지를 구분할 수 있어야 한다.
<div>안녕하세요</div>여기서 div는 element,
'안녕하세요'는 textNode다.
여기에 create를 붙이면 각각 element와 textNode를 생성하는 함수가 된다.
let newMemo = document.createElement("div");
let memoText = document.createTextNode("안녕하세요);
// textNode(안녕하세요)를 div에 넣기
newMemo.appendChild(memoText);그리고 append이기 때문에, 해당 element의 children의 마지막에 추가된다.
element의 텍스트 가져오기
위와 같이 다음의 예시로 생각해보자.
<div id="myDiv">안녕하세요!</div>이 myDiv의 텍스트를 가져오고 싶다면 어떻게 해야할까?
document.getElementById("myDiv").textContent;이러면 텍스트 내용이 가져와진다.
input의 텍스트 가져오기
그렇다면 텍스트 필드에 써진 값은 어떻게 가져올까?
<input type="text" id="newMemoText" />
document.getElementById("newMemoText").value;다음과 같이 value로 가져온다.
UTF-8 적용 (한글 깨짐 문제)
기본적으로 윈도우 웹브라우저는 euc-kr를 사용하고 있기 때문에
이 페이지가 utf-8을 사용중임을 알려야 한다.
<head>
...
<meta charset="utf-8">
...
</head>'프론트엔드 > HTML, CSS, Javascript' 카테고리의 다른 글
| Javascript Prototype 오염 (0) | 2022.04.21 |
|---|---|
| 브라우저 객체 모델 - BOM (0) | 2022.04.21 |
| [HTML] 글자 사이에 원하는 길이만큼 공백 넣기 (feat. React) (0) | 2022.02.08 |
| CSS에서 Flex를 해보자. (0) | 2021.10.19 |
| DOM이란 무엇인가 (0) | 2021.07.11 |