[코딩애플] JavaScript 강의 정리 (Level1 1강 ~ 2강)

이언덕·2024년 3월 25일

코딩애플

목록 보기

1/37

1강 / 강의 소개와 자바스크립트의 근본

👨‍💻 개발환경 세팅

1. 에디터 설치

에디터는 개발 생산성에 많은 영향을 미치기 때문에 어떤 에디터를 사용하는지도 중요하다!
많은 에디터들 중에 가장 많이 사용되어지고 있는 VS code을 사용해보자
VS code 설치 방법
⬇️ 필요에 따라 설치하면 좋을 것 같다.
환경 세팅

2. 확장 설치

VS code안에는 많은 확장 프로그램들이 있다.
확장 프로그램은 코드를 작성할 시 가독성을 높여주는 프로그램도 있고 프론트엔드로서 편하게 개발을 도와주는 확장 프로그램들이 있다. 그 중에 내가 설치한 확장 프로그램들을 소개해 보려고 한다!
VS code 확장프로그램

자바스크립트는 HTML 조작을 위해 사용한다.

자바스크립트는 HTML 조작을 위해 사용한다고 하였는데 더 쉽게 알기 위해 MDN에서 설명하는 JavaScript에 대해 알아보자
MDN "Javascript가 뭔가요?"

위 내용에서 조금 더 쉽게 말하자면 아래와 같다.

자바스크립트는 html 파일 안에 집어넣어 html 파일 안에 몰래 숨어서 "html 조작과 변경" 을 담당하는 언어이다!
그래서 자바스크립트 코드를 잘 짜시면 html을 원하는대로 마구마구 조작이 가능하다!

왜 조작을 할까?

탭, 모달 등 웹페이지 UI 만들 수 있음
유저가 입력한 데이터를 검사할 수도 있음
유저가 버튼누르면 서버로 데이터 요청할 수도 있음
비동기 처리
자료다루기

HTML을 조작하고, 변경하려면?

document.getElementById(??).?? = ??;

를 사용해야 한다!

// index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1 id="hello">안녕하세요</h1>
  </body>
  <script>
    document.getElementById("hello").innerHTML = "안녕"; 
	//html 문서의 id="hello" 인거 찾아서 그거의 내부 HTML에 '안녕' 집어넣어라
  </script>
</html>

화면에 안녕하세요였던 h1이 안녕으로 바뀌었는지 확인해보자

위와 같이 '안녕하세요'였던 h1이 자바스크립트를 통해 HTML을 조작하여 '안녕'으로 바꿀 수 있다는 사실을 알 수 있다.

결론

document.getElemantById('???').??? = '???';

여기 물음표만 맘대로 바꿔주면 html의 모든걸 변경하고 조작 가능하다!

document.getElementById('???').src = 'profile.jpg';

원하는 요소에 이미지도 추가 할 수 있다!

document.getElementById('???').style.color = 'red';

요소에 style="color:red" 도 추가 가능하다!

document.getElemantById('???').??? = '???';
                      ⬆️        
                셀렉터 & Dom 메소드

getElemantById가 아닌 여러 셀렉터 (Dom 메소드)가 있으니 한번 찾아보자!
Javascript 셀렉터
Javascript Dom 메소드
Javascript Dom 메소드 2

숙제

h1 내부 글자 사이즈를 16px로 변경해오십시오

//index.html

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

<script></script>

//index.html

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

<script>
  document.getElementById("hi").style.fontSize = "16px";
  // html 문서의 id="hello"인 태그를 찾아 폰트 사이즈를 16px로 바꿔라
</script>

2강 / 동적 UI 만드는 스텝 (Alert 박스 만들기)

기본적인 UI 만드는 법칙

웹페이지에선 탭, 모달창, 서브메뉴, 툴팁 등 수백개의 동적인 UI를 만들 수 있다!
프론트엔드 개발자라면 UI에 대해 잘 알고 있어야 한다.
기본적이고 많이 사용되는 UI에 대해 알려주는 사이트가 있다!
프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소

1. Alert UI 디자인부터 하기

작업폴더에 CSS 파일을 만든 후에 HTML 파일에서 CSS파일을 이어줄 것이다. (Linking Style Sheet 방법)
CSS 연결하기

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
    <title>Coding Apple JavaScript</title>
  </head>
  <body></body>
</html>

이후에 HTML파일에 div를 만들어 주고 CSS를 통해 div를 꾸며보자!

//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
    <title>Coding Apple JavaScript</title>
  </head>
  <body>
  	<div id="alert-box">알림창임</div>    
  </body>
</html>

//index.css
#alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
}

CSS 적용결과

div에 CSS가 적용되어 꾸며진 모습을 볼 수 있다.

UI를 평소에 숨기거나 다시 보여주고 싶다면? => display & visibility 속성을 사용하면 된다!
display 속성
visibility 속성

2. 버튼 누르면 Alert UI 보여주기

지금 부터 할일은 버튼을 누르면 위에서 꾸몄던 알림창을 화면에 보이도록 해야하는 것이다!
그러면 먼저 display속성을 통해 화면에서 알림창을 가려보자
//index.css
#alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none
}
diplay: none을 통해 알림창이 화면에서 없어진 것을 볼 수 있다.

이제 버튼을 만든 뒤 코딩애플에서 알려주는 onClick 속성을 통해 알림창을 화면에서 띄워볼 것이다!
[onClick 속성을 버튼안에 집어넣게 되면 버튼을 클릭시 onClick 안에 있는 코드들이 실행되는 속성을 갖고 있다]
<button onclick="Alert 박스 보여달라는 코드"> 버튼 </button>
우리가 1강에서 배웠던 셀렉터(Dom 메소드)로 HTML & CSS에 접근해서 JS코드를 완성시켜보자
<button onclick="document.getElementById('alert-box').style.display = 'block'">버튼</button>
결과를 살펴보면?

버튼을 누르면 알림창이 잘 뜨는 것을 볼 수 있다.

숙제

Alert 박스 내에 닫기 버튼과 기능을 만들어보기

나는 알림창 안에 ❌ 버튼을 만들어 ❌ 버튼을 누르면 알림창이 사라지도록 만들어보았다.

<div id="alert-box">
  알림창임
  <button
	id="alert-close-btn"
	onclick="document.getElementById('alert-box').style.display = 'none'">
	❌
  </button>
</div>

전체 코드

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./test.css" />
    <title>Coding Apple JavaScript</title>
  </head>
  <body>
    <div id="alert-box">
      알림창임
      <button
        id="alert-close-btn"
        onclick="document.getElementById('alert-box').style.display = 'none'">
        ❌
      </button>
    </div>
    <button
      onclick="document.getElementById('alert-box').style.display = 'block'">
      버튼
    </button>
  </body>
</html>

index.css

#alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
}

이언덕

다음 포스트

[코딩애플] JavaScript 강의 정리 (Level1 1강 ~ 2강)

코딩애플

1강 / 강의 소개와 자바스크립트의 근본

👨‍💻 개발환경 세팅

1. 에디터 설치

2. 확장 설치