Post

데브코스 TIL - Day 7

Posted Updated
By hyemin 8 min read
23년 11월 22일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다.

CSS (Cascading Style Sheets)

HTML 태그를 꾸며주는 언어

※ 방법

인라인 (inline)

  • HTML 태그 안에 같이 작성
  • 가장 우선순위가 높음
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</title>
  </head>
  <body>
    <h1 style="color: green; text-align: center">로그인</h1>
    <form>
      <label>이메일</label>
      <input type="text" placeholder="이메일" style="font-size: 20px" />
      <br />
      <label>비밀번호</label>
      <input type="password" placeholder="비밀번호" style="font-size: 20px" />
      <br />
      <input type="button" value="로그인하기" style="padding: 8px 20px" />
    </form>
  </body>
</html>

내부 스타일 시트 (internal style sheet)

  • HTML 문서 안에 같이 작성

HTML <head></head>태그 안에 <style></style>태그를 작성하고, 그 안에 CSS 코드 작성

  • 특정 요소에만 스타일을 적용하고 싶을 때에는 class, id를 사용하기

  • class:
    • .class
    • 동일한 값을 갖는 값들에게 사용 (중복 가능)
  • id:
    • #id
    • 단 하나의 요소에만 지정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</title>
    <s>
      h1 {
        color: green;
        text-align: center;
      }
      input.login_inputs {
        font-size: 20px;
      }
      #button {
        padding: 8px 20px;
      }
    </style>
  </head>
  <body>
    <h1>로그인</h1>
    <form>
      <label>이메일</label>
      <input class="login_inputs" type="text" placeholder="이메일" />
      <br />
      <label>비밀번호</label>
      <input class="login_inputs" type="password" placeholder="비밀번호" />
      <br />
      <input id="button" type="button" value="로그인하기" />
    </form>
  </body>
</html>

login_inputs 클래스를 가진 모든 요소 스타일 변경해주기

1
2
3

input.login_inputs {
  font-size: 20px;
}

1
2

<input class="login_inputs" type="text" placeholder="이메일" />
<input class="login_inputs" type="password" placeholder="비밀번호" />

button이라는 아이디를 가진 요소 스타일 변경해주기

1
2
3

#button {
  padding: 8px 20px;
}

1

<input id="button" type="button" value="로그인하기" />

외부 스타일 시트 (external style sheet)

  • HTML 문서 밖에 별도의 파일을 생성하고 HTML 파일과 연결
  • 내부 스타일 시트에 스타일을 작성하는 것보다 별도의 스타일 시트에 코드를 작성하는 것이 가독성이 높고, 관리하기가 쉬움
1
2
3

프로젝트 폴더
├ login.html
└ style.css

별도의 style.css 파일을 생성하고, 사용할 login.html에 연결하기

  • HTML <head></head>태그 안에
  • <link href="경로" rel="stylesheet" />를 사용하여 스타일 시트를 연결하기
1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</title>
    <link href="./style.css" rel="stylesheet" />
  </head>
  <body>
    ...
  </body>
</html>
  • style.css 파일에는 내부 스타일 시트에 작성했던 것과 동일하게 코드를 작성하면 됨
1
2
3
4
5
6
7
8
9
10

h1 {
  color: green;
  text-align: center;
}
input.login_inputs {
  font-size: 20px;
}
#button {
  padding: 8px 20px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</title>
    <link href="./style.css" rel="stylesheet" />
  </head>
  <body>
    <h1>로그인</h1>
    <form>
      <div>
        <label>이메일</label>
        <input class="login_inputs" type="text" placeholder="이메일" />
      </div>
      <div>
        <label>비밀번호</label>
        <input class="login_inputs" type="password" placeholder="비밀번호" />
      </div>

      <input
        id="button"
        type="button"
        value="로그인하기"
        onclick="alert('로그인 성공')"
      />
    </form>
  </body>
</html>

HTML과 CSS에 주석달기

1

<!-- HTML에서 주석달기 -->

1

/* CSS에서 주석달기 */

1
2

// Javascript에서 주석달기
/* Javascript에서 주석달기 */

자바스크립트

특정 요소를 선택하여 제어할 수 있는 스크립트 언어

※ 방법

인라인

사용자와 상호작용이 있을 때만 가능

내부 스크립트

HTML 문서 안에 같이 작성
HTML <body></ body>태그 안에 <script></script>태그를 작성하고, 그 안에 자바스크립트 코드 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</title>
    <link href="./style.css" rel="stylesheet" />
  </head>
  <body>
    <h1>로그인</h1>
    <form>
      <div>
        <label>이메일</label>
        <input class="login_inputs" type="text" placeholder="이메일" />
      </div>
      <div>
        <label>비밀번호</label>
        <input class="login_inputs" type="password" placeholder="비밀번호" />
      </div>

      <input
        id="button"
        type="button"
        value="로그인하기"
        onclick="alert('로그인 성공')"
      />
    </form>
    <script>
      const emailEle = document.getElementById("txt_email");
      function popId() {
        const emailEleValue = emailEle.value;
        emailEleValue
          ? confirm(emailEleValue + "를 입력하신게 맞나요?")
          : alert("이메일을 입력하세요!");
      }
    </script>
  </body>
</html>

외부 스크립트

HTML 문서 밖에 별도의 파일을 생성하고 HTML 파일과 연결

1
2
3
4

프로젝트 폴더
├ login.html
├ main.js
└ style.css

HTML 문서와 연결하기

방법1. HTML <body></ body>태그 안에 작성하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</title>
    <link href="./style.css" rel="stylesheet" />
  </head>
  <body>
    ...

    <script type="text/javascript" src="./main.js"></script>
  </body>
</html>

방법2. HTML <head></ head>태그 안에 작성하기

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</title>
    <link href="./style.css" rel="stylesheet" />
    <script defer type="text/javascript" src="./main.js"></script>
  </head>
  <body>...</body>
  </html>

외부 스크립트에 코드 작성하기

내부 스크립트와 동일하게 작성하면 됨

1
2
3
4
5
6
7
8

const emailEle = document.getElementById("txt_email");
function popId() {
  const emailEleValue = emailEle.value;

  emailEleValue
    ? confirm(emailEleValue + "를 입력하신게 맞나요?")
    : alert("이메일을 입력하세요!");
}

변수

■ var

  • 값 재할당 가능
  • 함수 스코프

■ let

  • 값 재할당 가능
  • 블록 스코프
1
2
3
4
5
6

let num1 = 10;
console.log(num1); // 10

// 값 재할당
num1 = 20;
console.log(num1); // 20

■ const

  • 선언과 동시에 초기화해야 함
  • 값 재할당 불가능
  • 블록 스코프
1
2
3
4
5
6

const num1 = 10;
console.log(num1); // 10

// ERROR!!
// 값 재할당 불가능
num1 = 20;
데브코스, TIL
This post is licensed under CC BY 4.0 by the author.