ulgoon/index.html

## index.html
<!DOCTYPE html>
<html lang="ko-KR">
  <!-- 문서 정의를 위해 필요한(사용자에게 보여지진 않는) head -->
  <head>
    <meta charset="utf-8">
    <title>My first HTML Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- css, js 불러오기 -->
    <link rel="stylesheet" type="text/css" href="./style.css">
    <script src="./main.js"></script>
  </head>
  <!-- 사용자에게 실제 보여질 영역을 처리하기 위한 body -->
  <body>
    <a href="./todo.html">Go TODO </a>
    <div class="container" style="background-color: gray;">
      <h1 id="top">Home</h1>
      <p>홈페이지에 방문하신 것을 환영합니다.</p>
      <p>이 문서는 1950년 영국에서 시작되어
        <span style="color: red;">전 세계</span>를 돌고 돌아 당신에게 전달되었습니다.
        <br> <!-- br은 남용하면 안됩니다. 여러번의 줄바꿈: 스타일링의 의도이기 때문 -->
        주변의 지인 5명에게 이 문서를 손으로 작성하여 전달하세요.
      </p>
    </div>
    <h2>목차</h2>
    <!-- 순차형 목록 -->
    <ol>
      <li class="odd"><h3>HTML 이란?</h3></li>
      <li><h3>구조와 표현</h3></li>
    </ol>

    <h2>오늘 저녁 메뉴 후보</h2>
    <!-- 순서없는 목록 -->
    <ul>
      <li class="odd">달걀</li>
      <li>고구마</li>
      <li class="odd">샐러드</li>
    </ul>

    <a href="https://www.kbstar.com/">KB 국민은행 바로가기</a>
    <a href="https://www.google.com/" target="_blank">Google 바로가기</a>
    <a href="#top">맨 위로 가기</a>
    <!--
    https://www.pexels.com/ 에서 원하는 이미지 하나 다운받기
    alt: alt text로 이미지의 대체텍스트를 제공하기 위한 속성
    -->
    <img src="cat.jpg" width="200" alt="고양이가 혀를 내밀었다.">
    <!-- padding, margin 모두 위에서 부터 시계방향으로 값 적용(값이 비면 반대편의 값을 복사 -->
    <div class="pd-test box">text</div>
    <div class="mg-test box">text</div>
  </body>
</html>

## style.css
/* 요소 셀렉터 */
body {
  background-color: yellow;
}
/* id 셀렉터 id: HTML문서에서 요소에 유일한 이름을 지을 때 */
#top {
  font-size: 50px;
}
/* class 셀렉터 class: 미리 정의된 스타일 속성을 재사용하고 싶을 때 */
.odd {
  background-color: rgb(10,10,10);
  color: #dedede;
  font-weight: 400;
}

p {
  text-align: justify;
  line-height: 1.4em;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

/* 위 부터 시계방향으로, 없으면 반대방향 값 상속 */
.pd-test {
  padding: 20px 50px 30px 10px;
}
.mg-test {
  margin: 10px 40px 30px 50px;
}

.container {
  width: 300px;
  margin: 0 auto;
}

## todo.css
body {
  margin: 0;
  min-width: 250px;
}

main {
  max-width: 768px;
  margin: 0 auto;
}

/* Include the padding and border in an element's total width and height */
* {
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
}

/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
}

/* Style the list items */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eeeeee;
  font-size: 18px;
  transition: 0.2s;

  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
  background: #dddddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #999999;
  color: #ffffff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #ffffff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #ff6666;
  color: #cbbeb5;
}

/* Style the header */
.header {
  background-color: 	#525266;
  padding: 30px 40px;
  color: #cbbeb5;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #ffe5a9;
  color: #423f3b;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border: 0;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #cbbeb5;
}

## todo.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./todo.css">
  </head>
  <body>
    <header>
      <nav>
        <a href="/">Home</a>
      </nav>
    </header>
    <main>
      <section id="todo-input" class="header">
        <h1 style="margin:5px">오늘 할 일</h1>
        <input type="text" id="todoInput" placeholder="등록 할 일을 입력하세요..">
        <button onclick="newElement()" class="addBtn">Add</button>
      </section>

      <ul id="todoList">
        <li>주간회의 참석하기</li>
        <li class="checked">전기세 납부하기</li>
        <li>점심 먹기</li>
        <li>운동하기</li>
        <li>카드 만들기</li>
      </ul>
    </main>
    <footer></footer>
    <script>
    // 모든 할 일 목록에 close 버튼(\u00D7) 추가하기
    let todoItems = document.getElementsByTagName("li");
    // 각 아이템에 대해
    for (let i = 0; i < todoItems.length; i++) {
      // span 태그를 만들고 X 문자를 채워 appendChild(자식요소 추가하기) 실시
      let span = document.createElement("span");
      let txt = document.createTextNode("\u00D7");
      span.className = "close";
      span.appendChild(txt);
      todoItems[i].appendChild(span);
    }

    // X 버튼의 동작 정의하기(누르면 요소 숨기기)
    let close = document.getElementsByClassName("close");
    for (i = 0; i < close.length; i++) {
      close[i].onclick = function() {
        let div = this.parentElement;
        // 여기가 바로 보여주기를 숨기는 부분!
        // display: none;
        div.style.display = "none";
      }
    }

    // 할 일 클릭하면 checked class 속성 활성화(비활성화)하기 with toggle
    let todoList = document.querySelector('ul');
    todoList.addEventListener('click', function(ev) {
      if (ev.target.tagName === 'LI') {
        ev.target.classList.toggle('checked');
      }
    }, false);

    // 새로운 할 일을 작성하고 ADD 버튼 누르면 할 일을 목록에 추가하기
    function newElement() {
      let li = document.createElement("li");
      let inputValue = document.getElementById("todoInput").value;
      let t = document.createTextNode(inputValue);
      li.appendChild(t);

      // 만약 할 일이 빈 값일 경우
      if (inputValue === '') {
        // alert 띄우기
        alert("할 일을 입력하세요.");
      } else {
        // 할 일 이 있다면
        document.getElementById("todoList").appendChild(li);
      }
      document.getElementById("todoInput").value = "";

      let span = document.createElement("span");
      let txt = document.createTextNode("\u00D7");
      span.className = "close";
      span.appendChild(txt);
      li.appendChild(span);

      for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
          let div = this.parentElement;
          div.style.display = "none";
        }
      }
    }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ko-KR">
	<!-- 문서 정의를 위해 필요한(사용자에게 보여지진 않는) head -->
	<head>
	<meta charset="utf-8">
	<title>My first HTML Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- css, js 불러오기 -->
	<link rel="stylesheet" type="text/css" href="./style.css">
	<script src="./main.js"></script>
	</head>
	<!-- 사용자에게 실제 보여질 영역을 처리하기 위한 body -->
	<body>
	<a href="./todo.html">Go TODO </a>
	<div class="container" style="background-color: gray;">
	<h1 id="top">Home</h1>
	<p>홈페이지에 방문하신 것을 환영합니다.</p>
	<p>이 문서는 1950년 영국에서 시작되어
	<span style="color: red;">전 세계</span>를 돌고 돌아 당신에게 전달되었습니다.
	<br> <!-- br은 남용하면 안됩니다. 여러번의 줄바꿈: 스타일링의 의도이기 때문 -->
	주변의 지인 5명에게 이 문서를 손으로 작성하여 전달하세요.
	</p>
	</div>
	<h2>목차</h2>
	<!-- 순차형 목록 -->
	<ol>
	<li class="odd"><h3>HTML 이란?</h3></li>
	<li><h3>구조와 표현</h3></li>
	</ol>

	<h2>오늘 저녁 메뉴 후보</h2>
	<!-- 순서없는 목록 -->
	<ul>
	<li class="odd">달걀</li>
	<li>고구마</li>
	<li class="odd">샐러드</li>
	</ul>

	<a href="https://www.kbstar.com/">KB 국민은행 바로가기</a>
	<a href="https://www.google.com/" target="_blank">Google 바로가기</a>
	<a href="#top">맨 위로 가기</a>
	<!--
	https://www.pexels.com/ 에서 원하는 이미지 하나 다운받기
	alt: alt text로 이미지의 대체텍스트를 제공하기 위한 속성
	-->
	<img src="cat.jpg" width="200" alt="고양이가 혀를 내밀었다.">
	<!-- padding, margin 모두 위에서 부터 시계방향으로 값 적용(값이 비면 반대편의 값을 복사 -->
	<div class="pd-test box">text</div>
	<div class="mg-test box">text</div>
	</body>
	</html>
	/* 요소 셀렉터 */
	body {
	background-color: yellow;
	}
	/* id 셀렉터 id: HTML문서에서 요소에 유일한 이름을 지을 때 */
	#top {
	font-size: 50px;
	}
	/* class 셀렉터 class: 미리 정의된 스타일 속성을 재사용하고 싶을 때 */
	.odd {
	background-color: rgb(10,10,10);
	color: #dedede;
	font-weight: 400;
	}

	p {
	text-align: justify;
	line-height: 1.4em;
	}

	.box {
	width: 100px;
	height: 100px;
	background-color: blue;
	}

	/* 위 부터 시계방향으로, 없으면 반대방향 값 상속 */
	.pd-test {
	padding: 20px 50px 30px 10px;
	}
	.mg-test {
	margin: 10px 40px 30px 50px;
	}

	.container {
	width: 300px;
	margin: 0 auto;
	}
	body {
	margin: 0;
	min-width: 250px;
	}

	main {
	max-width: 768px;
	margin: 0 auto;
	}

	/* Include the padding and border in an element's total width and height */
	* {
	box-sizing: border-box;
	font-family: 'Noto Sans KR', sans-serif;
	}

	/* Remove margins and padding from the list */
	ul {
	margin: 0;
	padding: 0;
	}

	/* Style the list items */
	ul li {
	cursor: pointer;
	position: relative;
	padding: 12px 8px 12px 40px;
	list-style-type: none;
	background: #eeeeee;
	font-size: 18px;
	transition: 0.2s;

	/* make the list items unselectable */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	/* Set all odd list items to a different color (zebra-stripes) */
	ul li:nth-child(odd) {
	background: #f9f9f9;
	}

	/* Darker background-color on hover */
	ul li:hover {
	background: #dddddd;
	}

	/* When clicked on, add a background color and strike out text */
	ul li.checked {
	background: #999999;
	color: #ffffff;
	text-decoration: line-through;
	}

	/* Add a "checked" mark when clicked on */
	ul li.checked::before {
	content: '';
	position: absolute;
	border-color: #ffffff;
	border-style: solid;
	border-width: 0 2px 2px 0;
	top: 10px;
	left: 16px;
	transform: rotate(45deg);
	height: 15px;
	width: 7px;
	}

	/* Style the close button */
	.close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 12px 16px 12px 16px;
	}

	.close:hover {
	background-color: #ff6666;
	color: #cbbeb5;
	}

	/* Style the header */
	.header {
	background-color: #525266;
	padding: 30px 40px;
	color: #cbbeb5;
	text-align: center;
	}

	/* Clear floats after the header */
	.header:after {
	content: "";
	display: table;
	clear: both;
	}

	/* Style the input */
	input {
	margin: 0;
	border: none;
	border-radius: 0;
	width: 75%;
	padding: 10px;
	float: left;
	font-size: 16px;
	}

	/* Style the "Add" button */
	.addBtn {
	padding: 10px;
	width: 25%;
	background: #ffe5a9;
	color: #423f3b;
	float: left;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	transition: 0.3s;
	border: 0;
	border-radius: 0;
	}

	.addBtn:hover {
	background-color: #cbbeb5;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="./todo.css">
	</head>
	<body>
	<header>
	<nav>
	<a href="/">Home</a>
	</nav>
	</header>
	<main>
	<section id="todo-input" class="header">
	<h1 style="margin:5px">오늘 할 일</h1>
	<input type="text" id="todoInput" placeholder="등록 할 일을 입력하세요..">
	<button onclick="newElement()" class="addBtn">Add</button>
	</section>

	<ul id="todoList">
	<li>주간회의 참석하기</li>
	<li class="checked">전기세 납부하기</li>
	<li>점심 먹기</li>
	<li>운동하기</li>
	<li>카드 만들기</li>
	</ul>
	</main>
	<footer></footer>
	<script>
	// 모든 할 일 목록에 close 버튼(\u00D7) 추가하기
	let todoItems = document.getElementsByTagName("li");
	// 각 아이템에 대해
	for (let i = 0; i < todoItems.length; i++) {
	// span 태그를 만들고 X 문자를 채워 appendChild(자식요소 추가하기) 실시
	let span = document.createElement("span");
	let txt = document.createTextNode("\u00D7");
	span.className = "close";
	span.appendChild(txt);
	todoItems[i].appendChild(span);
	}

	// X 버튼의 동작 정의하기(누르면 요소 숨기기)
	let close = document.getElementsByClassName("close");
	for (i = 0; i < close.length; i++) {
	close[i].onclick = function() {
	let div = this.parentElement;
	// 여기가 바로 보여주기를 숨기는 부분!
	// display: none;
	div.style.display = "none";
	}
	}

	// 할 일 클릭하면 checked class 속성 활성화(비활성화)하기 with toggle
	let todoList = document.querySelector('ul');
	todoList.addEventListener('click', function(ev) {
	if (ev.target.tagName === 'LI') {
	ev.target.classList.toggle('checked');
	}
	}, false);

	// 새로운 할 일을 작성하고 ADD 버튼 누르면 할 일을 목록에 추가하기
	function newElement() {
	let li = document.createElement("li");
	let inputValue = document.getElementById("todoInput").value;
	let t = document.createTextNode(inputValue);
	li.appendChild(t);

	// 만약 할 일이 빈 값일 경우
	if (inputValue === '') {
	// alert 띄우기
	alert("할 일을 입력하세요.");
	} else {
	// 할 일 이 있다면
	document.getElementById("todoList").appendChild(li);
	}
	document.getElementById("todoInput").value = "";

	let span = document.createElement("span");
	let txt = document.createTextNode("\u00D7");
	span.className = "close";
	span.appendChild(txt);
	li.appendChild(span);

	for (i = 0; i < close.length; i++) {
	close[i].onclick = function() {
	let div = this.parentElement;
	div.style.display = "none";
	}
	}
	}
	</script>
	</body>
	</html>