answer-code/html,css,js 튜토리얼.txt at main · Code-with/answer-code · GitHub

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
****HTML 튜토리얼 설명
HTML은 브라우저에서 보여지는 데이터들의 뼈대입니다.

<!DOCTYPE html> 태그는 웹브라우저에게 HTML5로 작성된 문서라는 것을 알리고,
<html>태그는 html 코드의 시작과 끝을 알려줍니다.
<head>태그는 HTML 문서의 정보를 설정하고,
<title>태그는 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 설정합니다.
<body>태그는 HTML 문서의 구조를 설정하며 웹브라우저에 출력되어 사용자에게 보여지는 부분입니다.

<body>태그 안에 코드를 작성하기 앞서 HTML의 기본 태그들을 알아보도록 하겠습니다!

<h1>~<h6>태그는 제목을 나타내는 태그입니다. 숫자가 낮을수록 높은 단계(중요한)의 제목입니다.
<p>태그는 하나의 문단을 나타냅니다.
<br>태그는 줄바꿈을 설정합니다.
<hr>태그는 문단의 분리(주제에 의한)를 위해 설정합니다.
<a href="">태그는 다른 페이지, 같은 페이지 위치(#, 해시 태그), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정합니다.
<ul>태그는 정렬되지 않은 목록을 설정하고
<ol>태그는 정렬된 목록을 설정합니다.
<li>태그는 <ul>과 <ol>태그의 자식태그로 목록의 항목을 나타냅니다.
<button>태그는 클릭 가능한 버튼을 나타냅니다.

다음으로 공간분할 태그에 대해서 알아보겠습니다.
공간 분할 태그는 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하고 CSS를 이용하여 꾸미는 목적으로 사용합니다. 대표적으로 <div>태그와 <span>태그가 존재합니다.

직접 코드를 작성해보며 HTML 태그를 익혀봅시다!

***CSS튜토리얼 설명

CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어입니다.

css는 style태그 내부에 작성하거나, link 태그를 통해 외부에서 작성된 css 문서를 불러와 사용합니다.

css 선택자란는 HTML의 특정한 요소를 선택하는 사인입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. 대표적인 3가지를 알아보겠습니다.

태그 선택자 - 선택자를 입력하는 부분에 적용하려는 태그의 이름을 입력합니다.

/*<h1>은 글자색이 빨강이야!*/
h1 {
  color: red;
}

클래스 선택자 - 좀 더 명확하게 원하는 요소를 찾기 위해서 ‘클래스 선택자’를 사용합니다.

/*class="title"은 글자색이 빨강이고 글자 굵기는 bold야!*/
.title {
  color: red;
  font-weight: bold;
}

아이디 선택자 - 유일한 하나의 객체를 찾기 위해서 ‘아이디 선택자’를 사용합니다.

/*id="main-text"는 글자크기가 15px이야!*/
#main-text {
   font-size: 15px;
}

css는 속성을 통해 크기, 여백, 색상 같은 눈에 보이는 스타일을 지정합니다.
직접 코드를 작성해보며 css 속성을 익혀봅시다!


****JS 튜토리얼 설명

Javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어입니다.

Javascript는 script태그 내부에 작성하거나, link 태그를 통해 외부에서 작성된 javascript 문서를 불러와 사용합니다.

자바스크립트는 선택자를 이용하여 특정 요소를 찾습니다. 다음 예제를 살펴봅시다!

-HTML
  <div id='div_1'>
        Div1입니다.
      </div>
      <div id='div_2'>
        Div2입니다.
      </div>
      <button onclick='getDiv1()'>id로 찾기</button>

-JS
function getDiv1() {
  const div1 = document.getElementById('div_1');
  alert(div1.innerText);
  console.log(div1.innerText);
}

여기서 document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다.
alert() 메서드는 메시지를 지정할 수 있는 경고 대화 상자를 띄웁니다.
console.log() 메서드는 Web Console에 메시지를 출력합니다.

다음으로 자바스크립트의 기본 사칙 연산을 학습해보겠습니다.
//더하기 기호는 +
console.log(22 + 10);

//빼기 기호는 -
console.log(22 - 10);

//곱하기 기호는 *
console.log(22 * 10);

//나눗셈 기호는 /
console.log( 22 / 10);

//나머지는 어떻게 구할까요?
console.log(8 % 3); //2
console.log(22 % 3); //1

직접 코드를 작성해보며 Javascript를 익혀봅시다!