html,css,js 튜토리얼 v2.txt

****HTML 튜토리얼 설명
1)
HTML은 브라우저에서 보여지는 데이터들의 뼈대입니다.<br><br> &lt;!DOCTYPE html&gt; 태그는 웹브라우저에게 HTML5로 작성된 문서라는 것을 알리고,<br> &lt;html&gt;태그는 html 코드의 시작과 끝을 알려줍니다.<br> &lt;head&gt;태그는 HTML 문서의 정보를 설정하고,<br> &lt;title&gt;태그는 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 설정합니다.<br> &lt;body&gt;태그는 HTML 문서의 구조를 설정하며 웹브라우저에 출력되어 사용자에게 보여지는 부분입니다.<br><br> &lt;body&gt;태그 안에 코드를 작성하기 앞서 HTML의 기본 태그들을 알아보도록 하겠습니다!<br><br>

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

3)
마지막으로 공간분할 태그에 대해서 알아보겠습니다.<br> 공간 분할 태그는 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하고 CSS를 이용하여 꾸미는 목적으로 사용합니다. 대표적으로 &lt;div&gt;태그와 &lt;span&gt;태그가 존재합니다.<br><br> 직접 코드를 작성해보며 HTML 태그를 익혀봅시다!<br>

***CSS튜토리얼 설명

1)
CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어입니다. <br><br> css는 style태그 내부에 작성하거나, link 태그를 통해 외부에서 작성된 css 문서를 불러와 사용합니다.<br><br> css 선택자란는 HTML의 특정한 요소를 선택하는 사인입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. 대표적인 3가지를 알아보겠습니다.<br><br>

2)
태그 선택자 - 선택자를 입력하는 부분에 적용하려는 태그의 이름을 입력합니다.<br><br> /*&lt;h1&gt;은 글자색이 빨강이야!*/<br> h1 {<br>&nbsp; color: red;<br>}<br><br>클래스 선택자 - 좀 더 명확하게 원하는 요소를 찾기 위해서 ‘클래스 선택자’를 사용합니다.<br><br> /*class="title"은 글자색이 빨강이고 글자 굵기는 bold야!*/<br> .title {<br>&nbsp; color: red;<br>&nbsp; font-weight: bold;<br>}<br><br>아이디 선택자 - 유일한 하나의 객체를 찾기 위해서 ‘아이디 선택자’를 사용합니다.<br><br> /*id="main-text"는 글자크기가 15px이야!*/<br> #main-text {<br>&nbsp; font-size: 15px;<br>}<br><br>

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

****JS 튜토리얼 설명

1)
Javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어입니다.<br><br> Javascript는 script태그 내부에 작성하거나, link 태그를 통해 외부에서 작성된 javascript 문서를 불러와 사용합니다.<br><br> 자바스크립트는 선택자를 이용하여 특정 요소를 찾습니다. 다음 예제를 살펴봅시다!<br><br>

2)
-HTML<br>&lt;div id='div_1'&gt;<br>&nbsp; Div1입니다.<br>&lt;/div&gt;<br>&lt;div id='div_2'&gt;<br>&nbsp; Div2입니다.<br>&lt;/div&gt;<br>&lt;button onclick='getDiv1()'&gt;id로 찾기&lt;/button&gt;<br><br> -JS<br>function getDiv1() {<br>&nbsp; const div1 = document.getElementById('div_1');<br> &nbsp; alert(div1.innerText);<br> &nbsp; console.log(div1.innerText);<br> } <br><br>여기서 document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. <br> alert() 메서드는 메시지를 지정할 수 있는 경고 대화 상자를 띄웁니다.<br> console.log() 메서드는 Web Console에 메시지를 출력합니다.<br><br>

3)
다음으로 자바스크립트의 기본 사칙 연산을 학습해보겠습니다.<br><br> //더하기 기호는 +<br>console.log(22 + 10);<br><br>//빼기 기호는 -<br>console.log(22 - 10);<br><br>//곱하기 기호는 *<br>console.log(22 * 10);<br><br>//나눗셈 기호는 /<br>console.log( 22 / 10);<br><br> //나머지는 어떻게 구할까요?<br>console.log(8 % 3); //2<br>console.log(22 % 3); //1<br><br> 직접 코드를 작성해보며 Javascript를 익혀봅시다!<br>