html,css,js 달력만들기 설명 v2.txt

**HTML 2. 달력만들기 설명

1)
HTML 태그를 이용하여 달력을 만들기 전, 표 콘텐츠를 작성하기 위한 &lt;table&gt; 태그를 학습해봅시다!<br><br>&lt;table&gt;<br> &nbsp; &lt;tr&gt;<br> &nbsp; &nbsp; &lt;th&gt;First name&lt;/th&gt;<br> &nbsp; &nbsp;   &lt;th&gt;Last name&lt;/th&gt;<br> &nbsp; &lt;/tr&gt;<br> &nbsp; &lt;tr&gt;<br> &nbsp; &nbsp; &lt;td&gt;John&lt;/td&gt;<br> &nbsp; &nbsp; &lt;td&gt;Doe&lt;/td&gt;<br> &nbsp; &lt;/tr&gt;<br> &nbsp; &lt;tr&gt;<br> &nbsp; &nbsp;  &lt;td&gt;Jane&lt;/td&gt;<br> &nbsp; &nbsp; &lt;td&gt;Doe&lt;/td&gt;<br> &nbsp;&lt;/tr&gt;<br> &lt;/table&gt;<br>

2)
앞에 예제에서,<br> &lt;table&gt; 태그는 행과 열로 이루어진 표를 정의합니다. <br> &lt;th&gt; 태그는 테이블의 셀 그룹의 헤더로 셀을 정의하며 '머리글 칸'을 지정합니다.<br> &lt;tr&gt; 태그는 테이블의 행을 정의하며 '일반 칸'을 지정합니다.<br> &lt;td&gt; 태그는 데이터를 포함하는 표의 셀을 정의합니다.<br>

3)
*colspan과 rowspan속성을 사용하여 열과 행을 확장할 수 있습니다.<br><br> &lt;thead&gt;,&lt;tbody&gt;,&lt;tfoot&gt; 태그는 표의 머리글, 본문, 바닥글을 지정하며, 기본적으로 테이블의 레이아웃에 영향을 주지 않습니다.<br><br> 학습한 내용을 토대로 직접 코드를 작성해 보며 달력을 만들기 위한 HTML 뼈대를 세워봅시다!<br>

**CSS 2. 달력만들기 설명

1)
HTML로 작성한 달력을 꾸며보기 위한 여러가지 CSS 속성을 학습해봅시다!<br><br> 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다. 이 박스 모델을 구성하는 다양한 속성들 중 일부를 학습해보겠습니다.<br><br> div {<br> &nbsp; width: 100px;<br> &nbsp; height: 100px;<br> &nbsp;  margin: 20px;<br> &nbsp;   border: 1px solid red;<br> &nbsp;  padding: 15px;<br> }<br><br> width 속성은 HTML 요소의 너비를 설정합니다.<br> height 속성은 HTML 요소의 높이를 설정합니다.<br> margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다.<br> border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정합니다.<br> padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다.<br>

2)
다음으로 웹 페이지를 보는 사용자가 마우스로 특정한 행동을 취했을 때 CSS 속성을 지정 할 수 있는 반응 선택자를 학습해봅시다!<br><br> :hover선택자는 사용자가 마우스를 올린 태그를 선택합니다. <br> :active선택자는 사용자가 마우스로 클릭한 태그를 선택합니다.<br><br> /* h1태그에 마우스를 올릴 경우에 color 속성에 red키워드를 적용합니다 */<br> h1:hover {color: red;}<br><br> /* h1태그를 마우스로 클릭할 대 color 속성에 blue키워드를 적용합니다 */<br> h1:active {color:blue;}<br>

3)
마지막으로 요소의 배경 효과를 정의하는데 사용하는 배경 속성을 학습해봅시다!<br><br> background-color속성은 해당 HTML 요소의 배경색을 설정합니다.<br> background-image속성은 해당 HTML 요소의 배경으로 나타날 배경 이미지를 설정합니다.<br> background-size속성은 배경 이미지의 크기를 설정합니다.<br><br> 학습한 내용을 통해 HTML로 작성한 달력을 CSS로 꾸며봅시다!<br>

**JS 2. 달력만들기 설명
1)
javascript의 조건문과 반복문을 학습해봅시다!<br><br> 조건문은 특정 조건 만족 시 어떤 작업을 수행하고 싶을 때 사용합니다. <br> 대표적으로 if, else if, else문이 있습니다. <br><br> if ( condition1 ) {<br> &nbsp;  statement1<br> } else if ( condition2 ) {<br> &nbsp; statement2<br> } else {<br> &nbsp; statement3<br> }<br> condition1을 만족하면 statement1을 실행하고, condition2을 만족하면 statement2을 실행하고, 둘 다 만족하지 않으면 statement3을 실행합니다.<br>

2)
반복문은 특정 작업을 반복적으로 할 때 사용할 수 있는 구문입니다.<br> for 문은 가장 기본적인 반복문입니다. 특정 값에 변화를 주어가면서 우리가 정한 조건이 만족된다면 계속 반복합니다.<br><br> for (let i = 0; i &lt; 10; i++) {<br> &nbsp;console.log(i);<br> }<br><br> 위 코드는 0부터 9까지의 숫자를 Web Console에 출력합니다.<br> 

3)
while문은 특정 조건이 참이라면 계속해서 반복하는 반복문입니다.<br><br> 우리가 앞서 작성했던 0 부터 9 까지 콘솔에 출력을하는 반복문을 while 문으로 구현해보겠습니다.<br><br> let i = 0;<br> while (i &lt; 10) {<br> &nbsp;  console.log(i);<br> &nbsp; i++;<br> }<br><br> 학습한 내용을 토대로 HTML과 CSS로 작성한 달력에 자바스크립트 코드를 추가해봅시다!<br>